/* Shared AITopic shell and theme layer. */
:root {
  --sx-bg: #f4f6f8;
  --sx-surface: #ffffff;
  --sx-surface-2: #eef1f4;
  --sx-surface-3: #e5eaee;
  --sx-ink: #17202a;
  --sx-ink-2: #4c5965;
  --sx-muted: #77828d;
  --sx-line: #dfe4e8;
  --sx-orange: #e86f1d;
  --sx-amber: #bd5d16;
  --sx-coral: #dc5b37;
  --sx-header: rgba(255, 255, 255, .94);
  --sx-control: #ffffff;
  --sx-code: #18222d;
  --sx-overlay: rgba(23, 32, 42, .9);
  --sx-max: 1240px;
  --sx-radius: 16px;
  --sx-shadow: 0 8px 28px rgba(23, 32, 42, .09);
}

html[data-theme="dark"] {
  --sx-bg: #0d1013;
  --sx-surface: #15191d;
  --sx-surface-2: #1d2329;
  --sx-surface-3: #252c33;
  --sx-ink: #f1f4f6;
  --sx-ink-2: #c1c9d1;
  --sx-muted: #8c98a4;
  --sx-line: #2a333c;
  --sx-orange: #f27a1a;
  --sx-amber: #ffaa3d;
  --sx-coral: #ff7043;
  --sx-header: rgba(15, 18, 21, .96);
  --sx-control: #181e23;
  --sx-code: #0b1014;
  --sx-overlay: rgba(9, 12, 15, .94);
  --sx-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html, body { background: var(--sx-bg); }
body.aitopic {
  min-height: 100vh;
  background: var(--sx-bg) !important;
  color: var(--sx-ink) !important;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
body.aitopic a { color: inherit; }
body.aitopic .container { width: 100%; max-width: var(--sx-max); padding-left: 28px; padding-right: 28px; }
header.sx-header > .container,
footer.sx-footer > .container { width: 100%; max-width: var(--sx-max) !important; }

header.sx-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 78px;
  background: var(--sx-header) !important;
  border-bottom: 1px solid var(--sx-line) !important;
  box-shadow: 0 2px 14px rgba(23, 32, 42, .1);
  backdrop-filter: blur(12px);
}
.sx-header-inner { height: 100%; display: flex; align-items: center; gap: 24px; background: var(--sx-header) !important; }
.sx-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 11px;
  float: none !important;
  height: auto !important;
  line-height: 1.2 !important;
  color: var(--sx-ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
  width: auto !important;
  min-width: 0;
}
.sx-brand > a,
.sx-footer-brand > .sx-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 11px;
  width: auto !important;
  height: auto !important;
  text-align: left !important;
  white-space: nowrap;
}
.sx-brand-logo { width: 38px; height: 38px; display: block; object-fit: contain; flex: 0 0 38px; }
html[data-theme="dark"] .sx-brand-logo { filter: invert(1) brightness(.92); }
.sx-brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--sx-amber), var(--sx-orange));
  color: #1a0d05;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(232, 111, 29, .24);
}
.sx-brand-copy { display: inline-flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: auto !important; height: auto !important; font-size: 18px; font-weight: 800; letter-spacing: .1px; line-height: 1.05; text-align: left !important; white-space: nowrap; }
.sx-brand-name { display: block; line-height: 1.05; }
.sx-brand-copy small { display: block; margin: 0; color: var(--sx-muted); font-size: 10px; font-weight: 500; font-style: italic; letter-spacing: 0; line-height: 1; }
.sx-header-actions { position: static !important; top: auto !important; right: auto !important; transform: none !important; order: 3; min-width: 0 !important; margin-left: 12px !important; display: flex; align-items: center; gap: 10px; float: none !important; }
.language-switcher { position: relative; }
.language-toggle, .sx-theme-toggle, .toggle-search {
  display: grid !important;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border: 1px solid var(--sx-line);
  border-radius: 50%;
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
}
.language-toggle { text-decoration: none; }
.language-icon { width: 19px; height: 19px; opacity: .82; }
.language-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 46px;
  min-width: 178px;
  padding: 8px;
  margin: 0;
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  box-shadow: var(--sx-shadow);
  z-index: 120;
}
.language-switcher:hover .language-dropdown, .language-switcher:focus-within .language-dropdown { display: block; }
.language-dropdown li { display: block !important; margin: 0 !important; }
.language-dropdown a, .language-dropdown .dropdown-item { display: block !important; padding: 8px 10px !important; background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; line-height: 1.4 !important; border-radius: 8px; }
.language-dropdown a:hover, .language-dropdown a.active, .language-dropdown .dropdown-item:hover, .language-dropdown .dropdown-item.active { background: var(--sx-surface-2) !important; color: var(--sx-orange) !important; }
.sx-theme-toggle { cursor: pointer; font: inherit; }
.sx-theme-toggle:hover, .toggle-search:hover, .language-toggle:hover { color: var(--sx-orange) !important; border-color: var(--sx-orange); }
.sx-site-nav { order: 2; margin-left: auto !important; padding: 0 !important; display: block; float: none !important; position: static !important; }
.sx-site-nav > ul { display: flex; align-items: center; gap: 4px; margin: 0 !important; line-height: 1 !important; background: transparent !important; }
.aitopic .nav > ul, .aitopic .header .nav > ul, .aitopic .sx-site-nav ul ul { background: transparent !important; }
.sx-site-nav > ul > li { display: block !important; margin: 0 !important; position: relative; }
.sx-site-nav > ul > li > a { display: inline-flex !important; align-items: center; gap: 6px; padding: 9px 12px !important; border-radius: 999px; color: var(--sx-ink-2) !important; font-size: 14px; line-height: 1.3 !important; }
.sx-site-nav > ul > li > a:hover { background: var(--sx-surface-2) !important; color: var(--sx-ink) !important; }
.sx-login-item a { border: 1px solid var(--sx-line); }
.sx-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--sx-line);
  border-radius: 999px;
  background: var(--sx-surface) !important;
  color: var(--sx-ink) !important;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.sx-user-trigger:hover, .sx-user-menu.is-open .sx-user-trigger { border-color: var(--sx-orange); color: var(--sx-orange) !important; }
.sx-user-chevron { font-size: 12px; transition: transform .18s; }
.sx-user-menu.is-open .sx-user-chevron { transform: rotate(180deg); }
.sx-user-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.sx-user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 190px;
  padding: 8px;
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line);
  border-radius: 13px;
  box-shadow: var(--sx-shadow);
}
.sx-user-menu:hover .sx-user-dropdown, .sx-user-menu.is-open .sx-user-dropdown { display: block; }
.sx-user-dropdown a { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px !important; border-radius: 8px; color: var(--sx-ink-2) !important; font-size: 14px; line-height: 1.4 !important; }
.sx-user-dropdown a:hover { background: var(--sx-surface-2) !important; color: var(--sx-orange) !important; }
.sx-user-dropdown i { width: 16px; text-align: center; color: var(--sx-orange); }
.sx-menu-toggle { display: none; position: static !important; top: auto !important; right: auto !important; color: var(--sx-ink-2) !important; cursor: pointer; }

.Up-search { background: var(--sx-surface) !important; border-bottom: 1px solid var(--sx-line); padding: 14px 0 !important; }
.Up-search:not(.is-open) { display: none !important; height: 0 !important; }
.Up-search.is-open { display: block !important; height: auto !important; overflow: visible !important; }
.Up-search .search, .Up-search .search-form { float: none !important; width: auto !important; height: auto !important; }
.Up-search .search-form { width: 100% !important; }
.Up-search .search-row { display: flex; gap: 10px; max-width: 760px; margin: 0 auto; }
.Up-search .category-filter-group { flex: 0 0 190px; }
.Up-search .category-select, .Up-search .search-input { width: 100%; height: 42px; border: 1px solid var(--sx-line) !important; border-radius: 10px; background: var(--sx-surface-2) !important; color: var(--sx-ink) !important; padding: 0 12px; }
.Up-search .search-input-group { display: flex; flex: 1; }
.Up-search .search-input { border-radius: 10px 0 0 10px; }
.Up-search .submit { width: 48px; height: 42px; border-radius: 0 10px 10px 0; background: var(--sx-orange) !important; color: #fff !important; }

footer.sx-footer { background: var(--sx-surface) !important; border-top: 1px solid var(--sx-line); color: var(--sx-ink-2); padding: 42px 0 18px; }
.sx-footer-inner { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 34px; }
.sx-footer-brand p { max-width: 330px; margin: 14px 0 0; color: var(--sx-muted); font-size: 13px; }
.sx-footer-col { display: flex; flex-direction: column; gap: 8px; }
.sx-footer-col h5 { margin: 2px 0 8px; color: var(--sx-ink); font-size: 13px; font-weight: 800; }
.sx-footer-col a { color: var(--sx-muted) !important; font-size: 13px; }
.sx-footer-col a:hover { color: var(--sx-orange) !important; }
.sx-footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--sx-line); color: var(--sx-muted); font-size: 12px; }

/* Shared controls prevent legacy modules from reverting to white boxes. */
body.aitopic input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body.aitopic select, body.aitopic textarea {
  background: var(--sx-control) !important;
  color: var(--sx-ink) !important;
  border-color: var(--sx-line) !important;
}
body.aitopic input::placeholder, body.aitopic textarea::placeholder { color: var(--sx-muted); }
body.aitopic .login-modal-content, body.aitopic .modal-content, body.aitopic .feedback-modal-content { background: var(--sx-surface) !important; color: var(--sx-ink) !important; border-color: var(--sx-line) !important; }
body.aitopic .input100, body.aitopic .form-input, body.aitopic .form-textarea { background: var(--sx-control) !important; color: var(--sx-ink) !important; border-color: var(--sx-line) !important; }
body.aitopic .qk-md-paragraph { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; }
body.aitopic .popular-card { background: var(--sx-surface) !important; color: var(--sx-ink) !important; border-color: var(--sx-line) !important; }
body.aitopic .popular-developer { background: var(--sx-surface-2) !important; color: var(--sx-muted) !important; }
.aitopic .prompt-comments-box { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .tag-link { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .tag-link:hover { background: var(--sx-orange) !important; color: #fff !important; border-color: var(--sx-orange) !important; }
.aitopic .close-modal { background: var(--sx-surface-3) !important; color: var(--sx-ink) !important; }
.aitopic .app-architecture { background: rgba(232, 111, 29, .12) !important; color: var(--sx-amber) !important; border-color: rgba(232, 111, 29, .24) !important; }
.aitopic .content, .aitopic .news-content, .aitopic .flash-article-body { background: transparent !important; color: var(--sx-ink-2) !important; }
.aitopic .content p, .aitopic .content h1, .aitopic .content h2, .aitopic .content h3, .aitopic .content h4, .aitopic .content h5, .aitopic .content h6, .aitopic .news-content p, .aitopic .news-content h1, .aitopic .news-content h2, .aitopic .news-content h3, .aitopic .news-content h4, .aitopic .news-content h5, .aitopic .news-content h6, .aitopic .flash-article-body p, .aitopic .flash-article-body h1, .aitopic .flash-article-body h2, .aitopic .flash-article-body h3, .aitopic .flash-article-body h4, .aitopic .flash-article-body h5, .aitopic .flash-article-body h6 { background: transparent !important; color: var(--sx-ink-2) !important; }
.aitopic .content h1, .aitopic .content h2, .aitopic .content h3, .aitopic .content h4, .aitopic .content h5, .aitopic .content h6, .aitopic .news-content h1, .aitopic .news-content h2, .aitopic .news-content h3, .aitopic .news-content h4, .aitopic .news-content h5, .aitopic .news-content h6 { color: var(--sx-ink) !important; }

/* Prompt pages. */
.prompt-page, .prompt-single-page { background: var(--sx-bg) !important; color: var(--sx-ink) !important; padding: 34px 0 66px !important; }
.prompt-page .container, .prompt-single-page .container { max-width: var(--sx-max) !important; }
.prompt-header-text { border-color: var(--sx-line) !important; padding: 8px 0 22px !important; }
.prompt-header h1, .prompt-single-title { color: var(--sx-ink) !important; font-family: Georgia, "Noto Serif SC", serif !important; letter-spacing: 0 !important; }
.prompt-header p { color: var(--sx-ink-2) !important; }
.prompt-filter-box { background: var(--sx-surface) !important; border-color: var(--sx-line) !important; border-radius: var(--sx-radius) !important; box-shadow: var(--sx-shadow) !important; }
.prompt-filter-title, .prompt-card .prompt-author, .prompt-card .prompt-view-badge { color: var(--sx-muted) !important; }
.prompt-filter-item { background: var(--sx-surface-2) !important; border-color: var(--sx-line) !important; color: var(--sx-ink-2) !important; border-radius: 999px !important; }
.prompt-filter-item:hover, .prompt-filter-item.active { background: var(--sx-orange) !important; border-color: var(--sx-orange) !important; color: #fff !important; }
.prompt-filter-item span { background: var(--sx-surface-3) !important; color: var(--sx-ink-2) !important; }
.prompt-filter-item.active span { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
.prompt-grid { gap: 20px !important; }
.prompt-card { background: var(--sx-surface) !important; border-color: var(--sx-line) !important; border-radius: var(--sx-radius) !important; box-shadow: var(--sx-shadow) !important; }
.prompt-card:hover { border-color: var(--sx-orange) !important; box-shadow: 0 12px 28px rgba(23, 32, 42, .16) !important; }
.prompt-thumb { background: var(--sx-surface-2) !important; border-radius: var(--sx-radius) var(--sx-radius) 0 0 !important; }
.prompt-thumb img { filter: saturate(.94); }
.prompt-overlay { background: linear-gradient(180deg, rgba(23, 32, 42, .04), var(--sx-overlay)) !important; }
.prompt-platform-badge, .prompt-class-badge { background: rgba(23, 32, 42, .76) !important; border-color: var(--sx-line) !important; color: var(--sx-amber) !important; }
.prompt-title, .prompt-compact-title { color: #fff !important; }
.prompt-desc { color: rgba(255, 255, 255, .82) !important; }
.prompt-action { color: var(--sx-amber) !important; }
.prompt-icon-btn { background: rgba(23, 32, 42, .82) !important; border-color: var(--sx-line) !important; color: #fff !important; }
.prompt-icon-btn:hover, .prompt-icon-btn.active { color: var(--sx-amber) !important; border-color: var(--sx-orange) !important; }
.prompt-single-card, .prompt-sidebar-widget { background: var(--sx-surface) !important; border-color: var(--sx-line) !important; border-radius: var(--sx-radius) !important; box-shadow: var(--sx-shadow) !important; }
.prompt-single-hero { background: var(--sx-surface-2) !important; border-bottom-color: var(--sx-line) !important; }
.prompt-single-meta, .prompt-single-date, .prompt-info-row .label, .prompt-sidebar-platform, .prompt-sidebar-views { color: var(--sx-muted) !important; }
.prompt-single-meta a, .prompt-sidebar-link:hover, .prompt-info-row .value a { color: var(--sx-orange) !important; }
.prompt-single-content, .prompt-sidebar-widget .widget-content { color: var(--sx-ink-2) !important; }
.prompt-content-body { background: transparent !important; border-color: transparent !important; }
.prompt-copy-card, .prompt-rating-box { background: transparent !important; border-color: var(--sx-line) !important; }
.prompt-info-list, .prompt-sidebar-list { background: transparent !important; border-color: transparent !important; }
.prompt-copy-title, .widget-title, .prompt-info-row .value, .prompt-sidebar-title, .prompt-author-name { color: var(--sx-ink) !important; }
.prompt-copy-text, .prompt-content-body p, .prompt-content-body li { color: var(--sx-ink-2) !important; }
.prompt-copy-btn, .prompt-favorite-btn { background: var(--sx-orange) !important; border-color: var(--sx-orange) !important; color: #fff !important; }
.prompt-single-tag { background: var(--sx-surface-2) !important; border-color: var(--sx-line) !important; color: var(--sx-ink-2) !important; }
.prompt-single-tag:hover { color: var(--sx-orange) !important; border-color: var(--sx-orange) !important; }
.pagebar a, .pagebar span { background: var(--sx-surface) !important; border: 1px solid var(--sx-line); border-radius: 999px; color: var(--sx-ink-2) !important; margin: 0 3px; }
.pagebar span.current, .pagebar a:hover { background: var(--sx-orange) !important; border-color: var(--sx-orange); color: #fff !important; }

/* Legacy gallery, news, tags and article surfaces. */
.aitopic .app-gallery-section, .aitopic .news-list-section, .aitopic .news-article-section, .aitopic .question-single-page, .aitopic .tag-archive-page { background: var(--sx-bg) !important; color: var(--sx-ink) !important; }
.aitopic .main-body, .aitopic .main-body-with-sidebar, .aitopic .main-content, .aitopic .main-content-full { background: transparent !important; color: var(--sx-ink) !important; }
.aitopic .category, .aitopic .category-inner { background: transparent !important; color: var(--sx-ink) !important; border-color: var(--sx-line) !important; }
.aitopic .category-card, .aitopic .rankings-section, .aitopic .author-works-main { background: var(--sx-surface) !important; color: var(--sx-ink) !important; border-color: var(--sx-line) !important; }
.aitopic .rankings-card, .aitopic .case-card, .aitopic .cases-single-card, .aitopic .hall-card, .aitopic .question-card, .aitopic .author-work-card, .aitopic .nf-day-card, .aitopic .payment-section { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; box-shadow: var(--sx-shadow); }
.aitopic .rankings-card-title, .aitopic .case-card h3, .aitopic .hall-card .card-title, .aitopic .question-card-title, .aitopic .author-work-title, .aitopic .nf-day-title { color: var(--sx-ink) !important; }
.aitopic .rankings-card-brief, .aitopic .case-card p, .aitopic .hall-card .card-intro, .aitopic .question-card-excerpt, .aitopic .author-work-excerpt, .aitopic .nf-item-summary { color: var(--sx-ink-2) !important; }
.aitopic .app-grid-header h1, .aitopic .app-grid-header p, .aitopic .news-list-heading, .aitopic .news-title, .aitopic .article-title, .aitopic .tag-block-header h2, .aitopic .question-single-title { color: var(--sx-ink) !important; }
.aitopic .app-grid-header p, .aitopic .news-list-subheading, .aitopic .news-excerpt p, .aitopic .article-dek, .aitopic .tag-block-header p { color: var(--sx-ink-2) !important; }
.aitopic .app-card, .aitopic .app-card-news, .aitopic .tag-news-list, .aitopic .question-single-card, .aitopic .question-comments-box, .aitopic .popular-card { background: var(--sx-surface) !important; border-color: var(--sx-line) !important; box-shadow: var(--sx-shadow); }
.aitopic .app-card:hover, .aitopic .app-card-news:hover { border-color: var(--sx-orange) !important; }
.aitopic .app-info, .aitopic .article-body, .aitopic .question-single-content { color: var(--sx-ink-2) !important; }
.aitopic .app-title, .aitopic .app-title a, .aitopic .news-title a, .aitopic .article-body h2, .aitopic .article-body h3, .aitopic .article-body h4, .aitopic .question-single-content h4, .aitopic .question-related-text { color: var(--sx-ink) !important; }
.aitopic .app-category, .aitopic .app-time, .aitopic .news-meta-row, .aitopic .news-time, .aitopic .article-meta, .aitopic .article-breadcrumb, .aitopic .news-sidebar-meta, .aitopic .question-time { color: var(--sx-muted) !important; }
.aitopic .app-version, .aitopic .app-language, .aitopic .app-typeyuyan, .aitopic .news-sidebar-category, .aitopic .article-kicker, .aitopic .question-badge, .aitopic .answer-label { background: var(--sx-surface-2) !important; color: var(--sx-orange) !important; border-color: var(--sx-line) !important; }
.aitopic .news-sidebar-link, .aitopic .sticky-sidebar-link, .aitopic .apps-compact-item, .aitopic .question-related-item { border-color: var(--sx-line) !important; }
.aitopic .news-sidebar-title, .aitopic .sticky-title, .aitopic .apps-compact-title, .aitopic .widget-title, .aitopic .related-title { color: var(--sx-ink) !important; }
.aitopic .news-sidebar-link:hover .news-sidebar-title, .aitopic .sticky-sidebar-link:hover .sticky-title, .aitopic .apps-compact-link:hover .apps-compact-title { color: var(--sx-orange) !important; }
.aitopic .article-body p, .aitopic .article-body li, .aitopic .question-single-content p, .aitopic .question-single-content li { color: var(--sx-ink-2) !important; }
.aitopic .article-body blockquote, .aitopic .question-single-content blockquote, .aitopic .system-requirements, .aitopic .whats-new { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .article-body table, .aitopic .article-body td, .aitopic .article-body th { border-color: var(--sx-line) !important; }
.aitopic .article-body th { background: var(--sx-surface-2) !important; color: var(--sx-ink) !important; }
.aitopic .article-tags .tag-link, .aitopic .tag-news-readmore, .aitopic .question-single-tag, .aitopic .tag-switch-btn { background: var(--sx-surface-2) !important; border-color: var(--sx-line) !important; color: var(--sx-ink-2) !important; }
.aitopic .article-tags .tag-link:hover, .aitopic .tag-news-readmore:hover, .aitopic .question-single-tag:hover, .aitopic .tag-switch-btn:hover, .aitopic .tag-switch-btn.active { background: var(--sx-orange) !important; border-color: var(--sx-orange) !important; color: #fff !important; }
.aitopic .tags-page-wrapper { background: var(--sx-surface) !important; border-color: var(--sx-line) !important; box-shadow: var(--sx-shadow) !important; }
.aitopic .tags-page-list a { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; }
.aitopic .tags-page-list a:hover { background: var(--sx-orange) !important; color: #fff !important; }
.aitopic .tag-hero { background: linear-gradient(135deg, #23303b, #40515c) !important; }
.aitopic .tag-news-item, .aitopic .tag-news-item:hover { background: var(--sx-surface) !important; border-color: var(--sx-line) !important; }
.aitopic .tag-news-category { background: var(--sx-surface-2) !important; color: var(--sx-orange) !important; }

.aitopic .code-wrapper, .aitopic pre { background: var(--sx-code); color: #e6edf3; border-color: var(--sx-line); }
.aitopic .site-global-toast, .aitopic .prompt-favorite-toast { background: var(--sx-overlay) !important; color: #fff !important; }
.aitopic .cancel-reply-btn { background: var(--sx-coral) !important; color: #fff !important; }

@media (max-width: 1000px) {
  .sx-header-inner .sx-site-nav { display: none !important; }
  .sx-menu-toggle { display: block; }
  .sx-header-inner .sx-site-nav.is-open { display: block !important; position: absolute !important; left: 0; right: 0; top: 78px; background: var(--sx-surface) !important; border-bottom: 1px solid var(--sx-line); padding: 10px 20px; box-shadow: var(--sx-shadow); }
  .sx-site-nav.is-open > ul { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .sx-site-nav.is-open > ul > li > a, .sx-site-nav.is-open .sx-user-trigger { width: 100%; justify-content: flex-start; border-radius: 10px; }
  .sx-site-nav.is-open .sx-user-menu { width: 100%; }
  .sx-site-nav.is-open .sx-user-dropdown { position: static; margin: 3px 0 8px; box-shadow: none; border-radius: 10px; }
  .sx-site-nav.is-open .sx-user-menu:hover .sx-user-dropdown { display: none; }
  .sx-site-nav.is-open .sx-user-menu.is-open .sx-user-dropdown { display: block; }
  .sx-header-inner { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 700px) {
  body.aitopic .container { padding-left: 18px; padding-right: 18px; }
  .sx-brand-copy { font-size: 16px; gap: 2px; }
  .sx-brand-copy small { display: block; font-size: 9px; }
  .sx-header-inner { gap: 12px; }
  .sx-header-actions { gap: 6px; }
  .sx-footer-inner { grid-template-columns: 1fr 1fr; gap: 26px; }
  .sx-footer-brand { grid-column: 1 / -1; }
  .sx-footer-bottom { flex-direction: column; gap: 6px; }
  .Up-search .search-row { display: block; }
  .Up-search .category-filter-group { margin-bottom: 8px; }
  .Up-search .search-input-group { width: 100%; }
  .prompt-page, .prompt-single-page { padding-top: 24px !important; }
}

/* Remaining legacy page surfaces. These rules are deliberately last so page-specific CSS cannot restore white panels in dark mode. */
.aitopic .question-page, .aitopic .cases-page, .aitopic .cases-single-page, .aitopic .rankings-section, .aitopic .flash-article-section, .aitopic .author-works-page { background: var(--sx-bg) !important; color: var(--sx-ink) !important; }
.aitopic .question-header-inner, .aitopic .question-card, .aitopic .question-empty, .aitopic .cases-empty, .aitopic .cases-single-card, .aitopic .cases-comments-box, .aitopic .cases-sidebar-widget, .aitopic .rankings-content, .aitopic .rankings-card, .aitopic .flash-article-single, .aitopic .flash-summary-box, .aitopic .author-work-card, .aitopic .author-empty-box { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; box-shadow: var(--sx-shadow); }
.aitopic .question-header h1, .aitopic .question-title a, .aitopic .question-empty h3, .aitopic .cases-header h1, .aitopic .case-title a, .aitopic .cases-single-title, .aitopic .rankings-header h1, .aitopic .rankings-card-title, .aitopic .flash-title, .aitopic .author-works-title, .aitopic .author-work-title { color: var(--sx-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.aitopic .question-header p, .aitopic .question-excerpt, .aitopic .question-empty p, .aitopic .cases-header p, .aitopic .case-desc, .aitopic .cases-single-content, .aitopic .rankings-header p, .aitopic .rankings-card-brief, .aitopic .flash-summary, .aitopic .author-works-desc, .aitopic .author-work-summary { color: var(--sx-ink-2) !important; }
.aitopic .question-footer, .aitopic .case-footer, .aitopic .cases-single-tags, .aitopic .cases-info-row, .aitopic .rankings-nav, .aitopic .rankings-card-meta, .aitopic .author-work-meta { border-color: var(--sx-line) !important; }
.aitopic .question-tag, .aitopic .case-tag, .aitopic .cases-single-tag, .aitopic .rankings-card-category, .aitopic .author-work-platform { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .question-readmore, .aitopic .case-link, .aitopic .cases-single-meta a, .aitopic .rankings-card-title a, .aitopic .author-work-actions a { color: var(--sx-orange) !important; }
.aitopic .question-card-mark span, .aitopic .cases-badge, .aitopic .case-badge { background: linear-gradient(135deg, var(--sx-orange), var(--sx-coral)) !important; color: #fff !important; }
.aitopic .cases-single-hero { background: var(--sx-surface-2) !important; border-color: var(--sx-line) !important; }
.aitopic .cases-single-content blockquote, .aitopic .cases-single-tag:hover { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .rankings-tab { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; border: 1px solid var(--sx-line) !important; }
.aitopic .rankings-tab:hover, .aitopic .rankings-tab.active { background: var(--sx-orange) !important; color: #fff !important; border-color: var(--sx-orange) !important; }
.aitopic .rankings-card-actions a { border-color: var(--sx-line) !important; }
.aitopic .rankings-btn-detail, .aitopic .rankings-btn-visit { background: var(--sx-surface-2) !important; color: var(--sx-orange) !important; }
.aitopic .rankings-btn-detail:hover, .aitopic .rankings-btn-visit:hover { background: var(--sx-orange) !important; color: #fff !important; }
.aitopic .rankings-card-count, .aitopic .case-date, .aitopic .case-meta, .aitopic .question-meta-top, .aitopic .cases-time, .aitopic .cases-single-meta, .aitopic .author-work-date { color: var(--sx-muted) !important; }
.aitopic .nf-day-card { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .nf-day-head, .aitopic .nf-item, .aitopic .nf-item-footer { border-color: var(--sx-line) !important; }
.aitopic .nf-day-badge, .aitopic .nf-item-category { background: var(--sx-surface-2) !important; color: var(--sx-orange) !important; }
.aitopic .nf-item-title, .aitopic .nf-item-title a { color: var(--sx-ink) !important; }
.aitopic .nf-item-summary, .aitopic .nf-item-meta, .aitopic .nf-item-time, .aitopic .nf-item-views { color: var(--sx-ink-2) !important; }
.aitopic .hall-card, .aitopic .hall-card .card-content, .aitopic .hall-card .card-body, .aitopic .hall-card .card-footer { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .hall-card .card-title, .aitopic .hall-card .hall-category { color: var(--sx-ink) !important; }
.aitopic .comment-content, .aitopic .comment-main-content, .aitopic .comment-form-wrapper, .aitopic .comment-form { background: transparent !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .comment-author, .aitopic .comment-floor, .aitopic .comment-meta, .aitopic .comment-time, .aitopic .comment-form-title { color: var(--sx-ink) !important; }

@media (max-width: 700px) {
  .sx-brand-logo { width: 34px; height: 34px; flex-basis: 34px; }
  .sx-brand-copy { font-size: 16px; }
}

/* Final legacy overrides: keep every page on the same restrained theme. */
.aitopic .category-inner a.item { color: var(--sx-ink-2) !important; }
.aitopic .category-inner a.item i { background: var(--sx-surface-2) !important; color: var(--sx-muted) !important; border-color: var(--sx-line) !important; box-shadow: none !important; }
.aitopic .category-inner a.item:hover:not(.active) { color: var(--sx-ink) !important; }
.aitopic .category-inner a.item:hover:not(.active) i, .aitopic .category-inner a.item.active i { background: var(--sx-surface-3) !important; color: var(--sx-orange) !important; border-color: var(--sx-orange) !important; }
.aitopic .category-inner a.item.active { color: var(--sx-ink) !important; }

.aitopic .app-card, .aitopic .app-card-news { color: var(--sx-ink-2) !important; }
.aitopic .app-card .app-title, .aitopic .app-card .app-title a, .aitopic .app-card-news .app-title, .aitopic .app-card-news .app-title a { color: var(--sx-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.aitopic .app-card .app-category, .aitopic .app-card .app-time, .aitopic .app-card-news .app-category, .aitopic .app-card-news .app-time { color: var(--sx-muted) !important; }
.aitopic .app-card .app-icon-news, .aitopic .app-card-news .app-icon-news { background: var(--sx-surface-2) !important; border-color: var(--sx-line) !important; }

.aitopic .newsflash-page { background: var(--sx-bg) !important; color: var(--sx-ink) !important; }
.aitopic .nf-item-timeago, .aitopic .nf-item-views, .aitopic .nf-item-meta a { background: var(--sx-surface-2) !important; color: var(--sx-muted) !important; border-color: var(--sx-line) !important; }
.aitopic .nf-item-category, .aitopic .nf-item-category a { background: var(--sx-surface-3) !important; color: var(--sx-orange) !important; border-color: var(--sx-line) !important; }
.aitopic .nf-item-footer, .aitopic .nf-day-head, .aitopic .nf-item { border-color: var(--sx-line) !important; }

.aitopic .news-article-single .article-header { background: var(--sx-surface) !important; border-bottom: 1px solid var(--sx-line) !important; }
.aitopic .news-list-section { padding-top: 38px !important; padding-bottom: 64px !important; }
.aitopic .news-title a { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sx-ink) !important; }
.aitopic .news-excerpt p { color: var(--sx-ink-2) !important; }
.aitopic .news-sidebar-link { border-color: var(--sx-line) !important; }

.aitopic .demand-content { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; box-shadow: var(--sx-shadow); }
.aitopic .demand-header { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; border-bottom-color: var(--sx-line) !important; }
.aitopic .demand-header h2, .aitopic .demand-count { color: var(--sx-ink) !important; }
.aitopic .sort-btn { background: var(--sx-surface) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .sort-btn.active { background: #246bdb !important; color: #fff !important; border-color: #246bdb !important; }
.aitopic .empty-state { color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .empty-state h3 { color: var(--sx-ink) !important; }
.aitopic .wish-btn { border-color: transparent !important; color: #fff !important; }

.aitopic .hall-card .card-header { background: var(--sx-surface-3) !important; border-color: var(--sx-line) !important; }
.aitopic .hall-card .hall-time, .aitopic .hall-card .hall-views { background: var(--sx-surface-2) !important; color: var(--sx-muted) !important; border-color: var(--sx-line) !important; }
.aitopic .hall-card .tag { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }

.aitopic .question-single-content .alert-warning { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .question-single-content .alert-warning strong, .aitopic .question-single-content .alert-warning span { color: var(--sx-ink) !important; }
.aitopic .prompt-platform-label, .aitopic .prompt-style-label { background: var(--sx-surface-3) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .prompt-media-label { background: rgba(232, 111, 29, .12) !important; color: var(--sx-orange) !important; border-color: rgba(232, 111, 29, .34) !important; }

html[data-theme="dark"] body.aitopic hr, 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 { border-color: var(--sx-line) !important; }

/* Dark-mode closing layer for legacy page-specific styles. Keep the hierarchy
   consistent even when an older template still declares white surfaces. */
html[data-theme="dark"] body.aitopic .app-info,
html[data-theme="dark"] body.aitopic .payment-section,
html[data-theme="dark"] body.aitopic .news-article-single,
html[data-theme="dark"] body.aitopic .news-sidebar,
html[data-theme="dark"] body.aitopic .news-widget,
html[data-theme="dark"] body.aitopic .news-sidebar-item,
html[data-theme="dark"] body.aitopic .news-single-article,
html[data-theme="dark"] body.aitopic .news-single-normal-page,
html[data-theme="dark"] body.aitopic .news-single-flash-page,
html[data-theme="dark"] body.aitopic .flash-article-single,
html[data-theme="dark"] body.aitopic .flash-summary-box,
html[data-theme="dark"] body.aitopic .question-card,
html[data-theme="dark"] body.aitopic .question-empty,
html[data-theme="dark"] body.aitopic .cases-single-card,
html[data-theme="dark"] body.aitopic .cases-sidebar-widget,
html[data-theme="dark"] body.aitopic .rankings-content,
html[data-theme="dark"] body.aitopic .rankings-card,
html[data-theme="dark"] body.aitopic .author-work-card,
html[data-theme="dark"] body.aitopic .hall-card,
html[data-theme="dark"] body.aitopic .demand-content,
html[data-theme="dark"] body.aitopic .feedback-modal-content {
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .news-article-section,
html[data-theme="dark"] body.aitopic .question-page,
html[data-theme="dark"] body.aitopic .cases-page,
html[data-theme="dark"] body.aitopic .cases-single-page,
html[data-theme="dark"] body.aitopic .rankings-section,
html[data-theme="dark"] body.aitopic .flash-article-section,
html[data-theme="dark"] body.aitopic .author-works-page,
html[data-theme="dark"] body.aitopic .newsflash-page,
html[data-theme="dark"] body.aitopic .ai-hall {
  background: var(--sx-bg) !important;
  color: var(--sx-ink) !important;
}

html[data-theme="dark"] body.aitopic .article-title,
html[data-theme="dark"] body.aitopic .article-kicker,
html[data-theme="dark"] body.aitopic .news-single-article h1,
html[data-theme="dark"] body.aitopic .news-single-article h2,
html[data-theme="dark"] body.aitopic .flash-title,
html[data-theme="dark"] body.aitopic .flash-kicker,
html[data-theme="dark"] body.aitopic .question-title,
html[data-theme="dark"] body.aitopic .case-title,
html[data-theme="dark"] body.aitopic .cases-single-title,
html[data-theme="dark"] body.aitopic .hall-card .card-title,
html[data-theme="dark"] body.aitopic .hall-card .hall-category,
html[data-theme="dark"] body.aitopic .demand-header h2 {
  background: transparent !important;
  color: var(--sx-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body.aitopic .app-meta-large,
html[data-theme="dark"] body.aitopic .app-tags,
html[data-theme="dark"] body.aitopic .news-meta-row,
html[data-theme="dark"] body.aitopic .article-meta,
html[data-theme="dark"] body.aitopic .news-sidebar-link,
html[data-theme="dark"] body.aitopic .question-footer,
html[data-theme="dark"] body.aitopic .case-footer,
html[data-theme="dark"] body.aitopic .cases-info-row,
html[data-theme="dark"] body.aitopic .rankings-nav,
html[data-theme="dark"] body.aitopic .rankings-card-meta,
html[data-theme="dark"] body.aitopic .author-work-meta,
html[data-theme="dark"] body.aitopic .hall-card .card-footer,
html[data-theme="dark"] body.aitopic .nf-day-head,
html[data-theme="dark"] body.aitopic .nf-item,
html[data-theme="dark"] body.aitopic .nf-item-footer {
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .article-body,
html[data-theme="dark"] body.aitopic .news-content,
html[data-theme="dark"] body.aitopic .flash-article-body,
html[data-theme="dark"] body.aitopic .article-body p,
html[data-theme="dark"] body.aitopic .article-body li,
html[data-theme="dark"] body.aitopic .news-content p,
html[data-theme="dark"] body.aitopic .news-content li {
  background: transparent !important;
  color: var(--sx-ink-2) !important;
}

html[data-theme="dark"] body.aitopic table,
html[data-theme="dark"] body.aitopic th,
html[data-theme="dark"] body.aitopic td,
html[data-theme="dark"] body.aitopic blockquote,
html[data-theme="dark"] body.aitopic .language-dropdown li {
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .language-dropdown,
html[data-theme="dark"] body.aitopic .language-dropdown a,
html[data-theme="dark"] body.aitopic .header .nav ul ul,
html[data-theme="dark"] body.aitopic .header .nav ul ul li a,
html[data-theme="dark"] body.aitopic .category-select {
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .language-dropdown a:hover,
html[data-theme="dark"] body.aitopic .header .nav ul ul li a:hover {
  background: var(--sx-surface-2) !important;
  color: var(--sx-orange) !important;
}

/* Editorial pages use their own legacy spacing and color declarations. Keep
   the reading column comfortably inset and map their remaining light tokens. */
.aitopic .news-article-single,
.aitopic .flash-article-single {
  padding: 32px 40px 42px !important;
}

html[data-theme="dark"] body.aitopic .flash-header,
html[data-theme="dark"] body.aitopic .flash-summary-box,
html[data-theme="dark"] body.aitopic .flash-article-body blockquote,
html[data-theme="dark"] body.aitopic .flash-article-body table th,
html[data-theme="dark"] body.aitopic .sticky-index {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .flash-header {
  background: transparent !important;
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .flash-kicker,
html[data-theme="dark"] body.aitopic .flash-summary-box .summary-label {
  background: var(--sx-orange) !important;
  color: #fff !important;
}

html[data-theme="dark"] body.aitopic .flash-breadcrumb,
html[data-theme="dark"] body.aitopic .flash-breadcrumb a,
html[data-theme="dark"] body.aitopic .flash-meta,
html[data-theme="dark"] body.aitopic .flash-summary-box p,
html[data-theme="dark"] body.aitopic .flash-article-body,
html[data-theme="dark"] body.aitopic .flash-article-body p,
html[data-theme="dark"] body.aitopic .flash-article-body li,
html[data-theme="dark"] body.aitopic .flash-article-body blockquote,
html[data-theme="dark"] body.aitopic .flash-article-body table td {
  color: var(--sx-ink-2) !important;
}

html[data-theme="dark"] body.aitopic .flash-title,
html[data-theme="dark"] body.aitopic .flash-article-body h2,
html[data-theme="dark"] body.aitopic .flash-article-body h3,
html[data-theme="dark"] body.aitopic .flash-article-body h4,
html[data-theme="dark"] body.aitopic .flash-article-body strong {
  color: var(--sx-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body.aitopic .flash-article-body a,
html[data-theme="dark"] body.aitopic .flash-readmore,
html[data-theme="dark"] body.aitopic .nf-readmore {
  color: var(--sx-orange) !important;
}

html[data-theme="dark"] body.aitopic .newsflash-page .newsflash-header h1 {
  color: var(--sx-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body.aitopic .newsflash-page .newsflash-header p,
html[data-theme="dark"] body.aitopic .newsflash-page .nf-day-sub,
html[data-theme="dark"] body.aitopic .newsflash-page .nf-item-summary p {
  color: var(--sx-ink-2) !important;
}

html[data-theme="dark"] body.aitopic .newsflash-page .nf-day-group::before {
  background: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .newsflash-page .nf-day-head::before {
  background: var(--sx-orange) !important;
  border-color: var(--sx-surface) !important;
  box-shadow: 0 0 0 2px var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .newsflash-page .nf-item:hover,
html[data-theme="dark"] body.aitopic .newsflash-page .nf-item-timeago,
html[data-theme="dark"] body.aitopic .newsflash-page .nf-item-views,
html[data-theme="dark"] body.aitopic .newsflash-page .nf-item-category a,
html[data-theme="dark"] body.aitopic .newsflash-page .pagebar a {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .newsflash-page .nf-item-time,
html[data-theme="dark"] body.aitopic .newsflash-page .nf-item-category a:hover,
html[data-theme="dark"] body.aitopic .newsflash-page .pagebar a:hover {
  color: var(--sx-orange) !important;
}

html[data-theme="dark"] body.aitopic .prompt-content-body {
  color: var(--sx-ink-2) !important;
}

html[data-theme="dark"] body.aitopic .prompt-content-body p,
html[data-theme="dark"] body.aitopic .prompt-content-body li,
html[data-theme="dark"] body.aitopic .prompt-content-body blockquote,
html[data-theme="dark"] body.aitopic .prompt-content-body table td,
html[data-theme="dark"] body.aitopic .prompt-content-body table th {
  color: var(--sx-ink-2) !important;
}

html[data-theme="dark"] body.aitopic .prompt-content-body h2,
html[data-theme="dark"] body.aitopic .prompt-content-body h3,
html[data-theme="dark"] body.aitopic .prompt-content-body h4,
html[data-theme="dark"] body.aitopic .prompt-content-body table th {
  color: var(--sx-ink) !important;
}

html[data-theme="dark"] body.aitopic .prompt-content-body blockquote,
html[data-theme="dark"] body.aitopic .prompt-content-body table,
html[data-theme="dark"] body.aitopic .prompt-content-body table th,
html[data-theme="dark"] body.aitopic .prompt-content-body table td,
html[data-theme="dark"] body.aitopic .prompt-content-body :not(pre) > code {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .prompt-content-body hr,
html[data-theme="dark"] body.aitopic .prompt-dual-box,
html[data-theme="dark"] body.aitopic .prompt-copy-head {
  border-color: var(--sx-line) !important;
}

html[data-theme="dark"] body.aitopic .prompt-copy-head,
html[data-theme="dark"] body.aitopic .prompt-copy-body {
  background: var(--sx-surface-2) !important;
}

html[data-theme="dark"] body.aitopic .prompt-copy-text {
  color: var(--sx-ink-2) !important;
}

@media (max-width: 700px) {
  .aitopic .news-article-single,
  .aitopic .flash-article-single {
    padding: 24px 20px 32px !important;
  }
}

/* Final shared layout and interaction layer. */
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 {
  width: 100%;
  flex: 0 0 auto;
  margin-top: auto;
}
body.aitopic > header.sx-header { flex: 0 0 auto; }

/* Keep the category band and the content grid on the same container edges. */
.aitopic .app-gallery-section > .container > .category {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 12px;
  overflow: hidden;
}
.aitopic .app-gallery-section > .container > .category > .category-inner,
.aitopic .app-gallery-section > .container > .app-grid {
  width: 100%;
  max-width: none;
}

/* Keep the original favorite button geometry; theme overrides only its colors. */
.aitopic .custom-favorite-pseudo {
  border-color: var(--sx-line) !important;
  background: var(--sx-surface) !important;
}
.aitopic .custom-favorite-pseudo:hover,
.aitopic .custom-favorite-pseudo:focus-visible {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-orange) !important;
}
.aitopic .custom-favorite-pseudo::before {
  filter: brightness(0) saturate(100%) invert(54%) sepia(84%) saturate(1800%) hue-rotate(355deg) brightness(95%) contrast(95%) !important;
}
.aitopic .custom-favorite-pseudo.favorited,
.aitopic .custom-favorite-pseudo.active {
  background: rgba(232, 111, 29, .16) !important;
  border-color: var(--sx-orange) !important;
}
.aitopic .custom-favorite-pseudo.favorited::before,
.aitopic .custom-favorite-pseudo.active::before {
  filter: brightness(0) saturate(100%) invert(54%) sepia(84%) saturate(1800%) hue-rotate(355deg) brightness(95%) contrast(95%) !important;
}
.aitopic .btn-favorite {
  background: var(--sx-surface-3) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}

/* RatingPlus controls remain legible on both panel levels. */
.aitopic #ratingplus_container .like-btn {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink) !important;
}
.aitopic #ratingplus_container .like-btn:hover,
.aitopic #ratingplus_container .like-btn:focus-visible {
  background: var(--sx-surface-3) !important;
  border-color: var(--sx-orange) !important;
  color: var(--sx-ink) !important;
}
.aitopic #ratingplus_container .like-icon,
.aitopic #ratingplus_container .heart-icon,
.aitopic #ratingplus_container .like-btn .heart-icon path {
  color: var(--sx-orange) !important;
  fill: currentColor !important;
}
.aitopic #ratingplus_container .like-count {
  background: var(--sx-surface-3) !important;
  color: var(--sx-ink-2) !important;
}
.aitopic #ratingplus_container .divider { background: var(--sx-line) !important; }
.aitopic #ratingplus_container .stars-background { color: var(--sx-line) !important; }
.aitopic #ratingplus_container .stars-foreground,
.aitopic #ratingplus_container .stars-interactive .star { color: var(--sx-orange) !important; }
.aitopic #ratingplus_container .rating-no { color: var(--sx-muted) !important; }

/* Comments: use the same quiet panel hierarchy in light and dark themes. */
.aitopic .comments-section {
  background: transparent !important;
  color: var(--sx-ink-2) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.aitopic .prompt-comments-box {
  background: var(--sx-surface) !important;
  color: var(--sx-ink-2) !important;
  border: 1px solid var(--sx-line) !important;
  box-shadow: var(--sx-shadow) !important;
}
.aitopic .comment-form-wrapper,
.aitopic .comment-form-header,
.aitopic .comments-list,
.aitopic .comment-content,
.aitopic .comment-text {
  background: transparent !important;
  color: var(--sx-ink-2) !important;
  border-color: var(--sx-line) !important;
}
.aitopic .comment-form {
  background: var(--sx-surface-2) !important;
  border: 1px solid var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}
.aitopic .comment-form-header,
.aitopic .comment-item,
.aitopic .commentpagebar .pagebar a,
.aitopic .commentpagebar .pagebar span {
  border-color: var(--sx-line) !important;
}
.aitopic .comment-item {
  background: transparent !important;
  color: var(--sx-ink-2) !important;
}
.aitopic .comment-item:hover {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
}
.aitopic .comment-child,
.aitopic .comment-child .comment-child {
  background: var(--sx-surface-2) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}
.aitopic .comment-children {
  background: transparent !important;
  border-color: var(--sx-line) !important;
}
.aitopic .reply-quote {
  background: var(--sx-surface-3) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
}
.aitopic .quote-header,
.aitopic .quote-content,
.aitopic .comment-meta,
.aitopic .comment-time,
.aitopic .form-tips,
.aitopic .no-comments,
.aitopic .no-comments p { color: var(--sx-muted) !important; }
.aitopic .comment-form-title,
.aitopic .comment-author,
.aitopic .author-name,
.aitopic .no-comments h4 { color: var(--sx-ink) !important; }
.aitopic .reply-btn { color: var(--sx-orange) !important; background: rgba(232, 111, 29, .12) !important; }
.aitopic .reply-btn:hover { background: var(--sx-orange) !important; color: #fff !important; }
.aitopic .comment-form input:not([type="checkbox"]):not([type="radio"]),
.aitopic .comment-form textarea {
  background: var(--sx-control) !important;
  color: var(--sx-ink) !important;
  border-color: var(--sx-line) !important;
}
.aitopic .verifycode-img-container {
  background: var(--sx-surface-3) !important;
  border: 1px solid var(--sx-line) !important;
}
.aitopic .verifycode-img {
  background: var(--sx-surface-3) !important;
  border: 1px solid var(--sx-line) !important;
}
.aitopic .verifycode-refresh { color: var(--sx-muted) !important; }
.aitopic .verifycode-refresh:hover { background: var(--sx-surface) !important; color: var(--sx-orange) !important; }
html[data-theme="dark"] body.aitopic .verifycode-img { filter: invert(.86) hue-rotate(180deg) !important; }

/* News article and sidebar spacing/lines. */
.aitopic .news-article-single,
.aitopic .news-sidebar,
.aitopic .news-sidebar .sidebar-widget {
  background: transparent !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink-2) !important;
  box-shadow: none !important;
}
.aitopic .news-article-single { padding: 32px 40px 42px !important; }
.aitopic .article-header,
.aitopic .article-tags,
.aitopic .news-sidebar-item,
.aitopic .sticky-sidebar-item,
.aitopic .apps-compact-item { border-color: var(--sx-line) !important; }
.aitopic .article-body blockquote,
.aitopic .article-body table th { background: var(--sx-surface-2) !important; color: var(--sx-ink-2) !important; border-color: var(--sx-line) !important; }
.aitopic .article-body table td { border-color: var(--sx-line) !important; color: var(--sx-ink-2) !important; }
.aitopic .article-body h2,
.aitopic .article-body h3,
.aitopic .article-body h4 { color: var(--sx-ink) !important; }
.aitopic .article-body a { color: var(--sx-orange) !important; }

/* Prompt detail hierarchy. Content itself stays on the parent panel; only
   copy/rating surfaces receive the secondary panel color. */
.aitopic .prompt-single-page { background: var(--sx-bg) !important; color: var(--sx-ink) !important; }
.aitopic .prompt-single-card,
.aitopic .prompt-sidebar-widget,
.aitopic .prompt-comments-box { background: var(--sx-surface) !important; border-color: var(--sx-line) !important; }
.aitopic .prompt-single-hero,
.aitopic .prompt-sidebar-widget .widget-title { background: var(--sx-surface-2) !important; border-color: var(--sx-line) !important; }
.aitopic .prompt-single-content { padding: 32px 36px 36px !important; background: transparent !important; }
.aitopic .prompt-content-body { background: transparent !important; border: 0 !important; color: var(--sx-ink-2) !important; }
.aitopic .prompt-content-body p,
.aitopic .prompt-content-body li { color: var(--sx-ink-2) !important; }
.aitopic .prompt-content-body h2,
.aitopic .prompt-content-body h3,
.aitopic .prompt-content-body h4 { color: var(--sx-ink) !important; }
.aitopic .prompt-copy-card,
.aitopic .prompt-rating-box { background: transparent !important; border-color: var(--sx-line) !important; }
.aitopic .prompt-copy-head { background: var(--sx-surface-3) !important; border-color: var(--sx-line) !important; }
.aitopic .prompt-copy-body { background: transparent !important; }
.aitopic .prompt-copy-text { background: var(--sx-surface-3) !important; border-color: var(--sx-line) !important; color: var(--sx-ink-2) !important; box-shadow: none !important; }
.aitopic .prompt-info-list,
.aitopic .prompt-sidebar-list { background: transparent !important; border: 0 !important; }
.aitopic .prompt-info-row,
.aitopic .prompt-sidebar-link { border-color: var(--sx-line) !important; }
.aitopic .prompt-sidebar-link:hover { background: var(--sx-surface-2) !important; }
.aitopic .prompt-sidebar-title,
.aitopic .prompt-copy-title,
.aitopic .prompt-author-name,
.aitopic .prompt-info-row .value { color: var(--sx-ink) !important; }
.aitopic .prompt-info-row .label,
.aitopic .prompt-sidebar-platform,
.aitopic .prompt-sidebar-views { color: var(--sx-muted) !important; }
.aitopic .prompt-single-tag { background: var(--sx-surface-2) !important; border-color: var(--sx-line) !important; color: var(--sx-ink-2) !important; }
.aitopic .prompt-content-body blockquote,
.aitopic .prompt-content-body table,
.aitopic .prompt-content-body table th,
.aitopic .prompt-content-body table td,
.aitopic .prompt-content-body :not(pre) > code { background: var(--sx-surface-3) !important; border-color: var(--sx-line) !important; }

/* Keep the homepage category band and card grid on the page background. */
.aitopic .app-gallery-section > .container > .category,
.aitopic .app-gallery-section > .container > .category > .category-inner,
.aitopic .app-gallery-section > .container > .app-grid {
  background: transparent !important;
  box-shadow: none !important;
}
.aitopic .app-gallery-section > .container > .app-grid > .app-card {
  min-width: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Login/register modal colors for dark mode; dimensions and spacing stay in the plugin CSS. */
html[data-theme="dark"] body.aitopic .login-modal-content,
html[data-theme="dark"] body.aitopic #messageModal .modal-content {
  background: var(--sx-surface) !important;
  border-color: var(--sx-line) !important;
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] body.aitopic .modal-login-form::before {
  color: var(--sx-ink) !important;
  border-bottom-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .close-modal {
  background: var(--sx-surface-2) !important;
  color: var(--sx-ink-2) !important;
}
html[data-theme="dark"] body.aitopic .close-modal:hover {
  background: var(--sx-surface-3) !important;
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] body.aitopic .modal-tabs { border-bottom-color: var(--sx-line) !important; }
html[data-theme="dark"] body.aitopic .modal-tab { color: var(--sx-muted) !important; }
html[data-theme="dark"] body.aitopic .modal-tab:hover,
html[data-theme="dark"] body.aitopic .modal-tab.active {
  color: var(--sx-ink) !important;
}
html[data-theme="dark"] body.aitopic .modal-tab.active { border-bottom-color: var(--sx-orange) !important; }
html[data-theme="dark"] body.aitopic .label-input100 { color: var(--sx-muted) !important; }
html[data-theme="dark"] body.aitopic .focus-input100 { color: var(--sx-muted) !important; }
html[data-theme="dark"] body.aitopic .input100,
html[data-theme="dark"] body.aitopic .captcha-image {
  background: var(--sx-control) !important;
  color: var(--sx-ink) !important;
  border-color: var(--sx-line) !important;
}
html[data-theme="dark"] body.aitopic .input100::placeholder { color: var(--sx-muted) !important; }
html[data-theme="dark"] body.aitopic .input100:focus { border-color: var(--sx-orange) !important; box-shadow: 0 0 0 3px rgba(242, 122, 26, .16) !important; }
html[data-theme="dark"] body.aitopic .login100-form-btn,
html[data-theme="dark"] body.aitopic #messageModal .btn-primary {
  background: var(--sx-orange) !important;
  border-color: var(--sx-orange) !important;
  color: #fff !important;
}
html[data-theme="dark"] body.aitopic .login100-form-btn:hover,
html[data-theme="dark"] body.aitopic #messageModal .btn-primary:hover {
  background: var(--sx-coral) !important;
  border-color: var(--sx-coral) !important;
}
html[data-theme="dark"] body.aitopic #messageModal .modal-header,
html[data-theme="dark"] body.aitopic #messageModal .modal-footer { border-color: var(--sx-line) !important; }
html[data-theme="dark"] body.aitopic #messageModal .modal-header,
html[data-theme="dark"] body.aitopic #messageModal .modal-body { color: var(--sx-ink-2) !important; }

/* Responsive safeguards for narrow screens. */
@media (max-width: 1000px) {
  .sx-header-inner { gap: 8px; }
  .sx-brand { flex: 1 1 auto; min-width: 0; }
  .sx-header-actions { order: 3; margin-left: auto !important; flex: 0 0 auto; }
  .sx-menu-toggle { order: 4; flex: 0 0 auto; }
  .sx-site-nav.is-open { max-height: calc(100vh - 78px); overflow-y: auto; }
}
@media (max-width: 700px) {
  body.aitopic .container { padding-left: 16px; padding-right: 16px; }
  .sx-header { height: 70px !important; }
  .sx-header-inner { padding-left: 16px !important; padding-right: 16px !important; }
  .sx-site-nav.is-open { top: 70px; max-height: calc(100vh - 70px); }
  .sx-brand { gap: 8px; }
  .sx-brand-logo { width: 32px; height: 32px; flex-basis: 32px; }
  .sx-brand-copy { font-size: 15px; }
  .sx-brand-copy small { font-size: 9px; }
  .sx-header-actions { gap: 5px; }
  .language-toggle, .sx-theme-toggle, .toggle-search { width: 34px; height: 34px; }
  .Up-search .search.container { padding-left: 16px; padding-right: 16px; }
  .Up-search .search-row { display: block; }
  .Up-search .category-filter-group,
  .Up-search .search-input-group { width: 100%; min-width: 0; }
  .Up-search .category-filter-group { margin-bottom: 8px; }
  .aitopic .news-article-single { padding: 24px 18px 32px !important; }
  .aitopic .comments-section { padding: 18px 16px !important; }
  .aitopic .comment-item:hover { margin: 0 !important; padding: 18px 0 !important; border-radius: 0 !important; }
  .aitopic .comment-header { display: block; }
  .aitopic .comment-meta { margin-top: 8px; flex-wrap: wrap; gap: 8px; }
  .aitopic .verifycode-wrapper { flex-direction: column; align-items: stretch; }
  .aitopic .verifycode-img-container { justify-content: center; margin-top: 8px; }
  .aitopic .prompt-single-content { padding: 22px 18px 24px !important; }
}
@media (max-width: 480px) {
  .aitopic .app-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .aitopic .app-card { width: 100% !important; max-width: none; margin: 0 !important; }
  .aitopic .category-inner { gap: .5rem !important; }
  .aitopic .category-inner a.item { width: 4.3rem; }
  .aitopic .app-meta-large span { max-width: 100%; }
  .aitopic .prompt-single-title { font-size: 24px !important; }
  .aitopic .prompt-copy-head { align-items: stretch; }
  .aitopic .prompt-copy-btn { width: 100%; }
}

/* Prompt detail page: PromptReserve-like two-column presentation. */
.prompt-single-page .main-body-with-sidebar {
  display: block !important;
}
.prompt-single-page .main-content {
  width: 100% !important;
  float: none !important;
}
.prompt-single-page .main-body-with-sidebar > .prompt-sidebar {
  display: none !important;
}
.prompt-single-page .prompt-single-card {
  overflow: hidden !important;
  background: var(--sx-surface) !important;
  border: 1px solid var(--sx-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--sx-shadow) !important;
}
.prompt-single-page .prompt-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  align-items: stretch;
  min-width: 0;
}
.prompt-single-page .prompt-detail-main {
  min-width: 0;
  background: var(--sx-surface) !important;
}
.prompt-single-page .prompt-single-content {
  padding: 0 26px 30px !important;
  background: var(--sx-surface) !important;
}
.prompt-single-page .prompt-single-hero {
  display: none !important;
}
.prompt-single-page .prompt-detail-media {
  min-height: 440px;
  padding: 20px;
  display: grid;
  place-items: center;
  background: var(--sx-surface-2) !important;
  border-bottom: 1px solid var(--sx-line);
}
.prompt-single-page .prompt-detail-media img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 72vh;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: none !important;
}
.prompt-single-page .prompt-gallery-stage {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: grid;
  place-items: center;
}
.prompt-single-page .prompt-gallery-stage:focus-visible {
  outline: 2px solid var(--sx-orange);
  outline-offset: 3px;
}
.prompt-single-page .prompt-gallery-image {
  display: none !important;
  width: 100% !important;
  max-width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  cursor: zoom-in;
}
.prompt-single-page .prompt-detail-media .prompt-gallery-image {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
}
.prompt-single-page .prompt-gallery-image.is-active { display: block !important; }
.prompt-single-page .prompt-gallery-zoom {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sx-line);
  border-radius: 9px;
  background: rgba(15, 19, 23, .68);
  color: #fff;
  cursor: pointer;
}
.prompt-single-page .prompt-gallery-download {
  position: absolute;
  right: 54px;
  top: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sx-line);
  border-radius: 9px;
  background: rgba(15, 19, 23, .68);
  color: #fff;
  cursor: pointer;
}
.prompt-single-page .prompt-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sx-line);
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(15, 19, 23, .68);
  color: #fff;
  cursor: pointer;
}
.prompt-single-page .prompt-gallery-prev { left: 10px; }
.prompt-single-page .prompt-gallery-next { right: 10px; }
.prompt-single-page .prompt-gallery-arrow:hover,
.prompt-single-page .prompt-gallery-zoom:hover,
.prompt-single-page .prompt-gallery-download:hover { background: var(--sx-orange); border-color: var(--sx-orange); }
.prompt-single-page .prompt-gallery-count {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15, 19, 23, .68);
  color: #fff;
  font-size: 11px;
}
.prompt-single-page .prompt-gallery-thumbs {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 10px 12px 0;
  overflow-x: auto;
}
.prompt-single-page .prompt-gallery-thumb {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 2px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: var(--sx-surface);
  cursor: pointer;
  opacity: .65;
}
.prompt-single-page .prompt-gallery-thumb.is-active { opacity: 1; border-color: var(--sx-orange); }
.prompt-single-page .prompt-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.prompt-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px 24px;
  overflow: hidden;
  background: rgba(6, 8, 11, .92);
}
.prompt-image-lightbox img {
  display: block;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 96px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  transform-origin: center center;
  user-select: none;
  cursor: grab;
}
.prompt-image-lightbox img.is-dragging { cursor: grabbing; }
.prompt-image-lightbox-toolbar {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  padding: 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(20, 24, 29, .9);
}
.prompt-image-lightbox-tool {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}
.prompt-image-lightbox-tool:hover { background: var(--sx-orange); border-color: var(--sx-orange); }
.prompt-image-lightbox-scale {
  min-width: 48px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  text-align: center;
}
.prompt-image-lightbox-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
}
.prompt-image-lightbox-close:hover { background: var(--sx-orange); border-color: var(--sx-orange); }
body.prompt-lightbox-open { overflow: hidden !important; }
.prompt-single-page .prompt-detail-media-empty {
  min-height: 300px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--sx-muted);
}
.prompt-single-page .prompt-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 0 8px;
}
.prompt-single-page .prompt-detail-copy,
.prompt-single-page .prompt-detail-favorite {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid var(--sx-line);
  border-radius: 9px;
  background: var(--sx-control);
  color: var(--sx-ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.prompt-single-page .prompt-detail-copy:hover,
.prompt-single-page .prompt-detail-favorite:hover,
.prompt-single-page .prompt-detail-favorite.active {
  border-color: var(--sx-orange);
  background: rgba(232, 111, 29, .12);
  color: var(--sx-orange);
}
.prompt-single-page .prompt-primary-copy-box {
  margin: 12px 0 20px;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  background: var(--sx-surface-2);
}
.prompt-single-page .prompt-primary-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--sx-line);
  color: var(--sx-ink);
  font-size: 13px;
  font-weight: 800;
}
.prompt-single-page .prompt-primary-copy-hint { color: var(--sx-muted); font-size: 11px; font-weight: 600; }
.prompt-single-page .prompt-primary-copy {
  max-height: 320px;
  overflow: auto;
  padding: 15px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--sx-ink-2);
  font: 13px/1.8 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.prompt-single-page .prompt-language-switch {
  display: flex;
  gap: 4px;
  padding: 8px 14px 0;
}
.prompt-single-page .prompt-language-tab {
  padding: 5px 10px;
  border: 1px solid var(--sx-line);
  border-radius: 7px;
  background: transparent;
  color: var(--sx-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.prompt-single-page .prompt-language-tab.is-active,
.prompt-single-page .prompt-language-tab:hover {
  border-color: var(--sx-orange);
  color: var(--sx-orange);
}
.prompt-single-page .prompt-language-content { display: none; }
.prompt-single-page .prompt-language-content.is-active { display: block; }
.prompt-single-page .prompt-detail-extra {
  padding: 28px 30px 34px;
  background: var(--sx-surface) !important;
  border-top: 1px solid var(--sx-line);
}
.prompt-single-page .prompt-detail-extra .prompt-content-body {
  max-width: 920px;
  margin: 0 auto;
}
.prompt-single-page .prompt-detail-extra .prompt-dual-box {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.prompt-single-page .prompt-detail-extra .prompt-single-tags {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.prompt-single-page .prompt-related-section {
  max-width: 920px;
  margin: 34px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--sx-line);
}
.prompt-single-page .prompt-related-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.prompt-single-page .prompt-related-heading h3 {
  margin: 0 !important;
  color: var(--sx-ink) !important;
  font-size: 22px !important;
}
.prompt-single-page .prompt-related-heading .prompt-detail-side-kicker { margin-bottom: 6px; }
.prompt-single-page .prompt-related-more { color: var(--sx-orange) !important; font-size: 12px; font-weight: 800; text-decoration: none !important; }
.prompt-single-page .prompt-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.prompt-single-page .prompt-related-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: var(--sx-surface-2);
  color: var(--sx-ink) !important;
  text-decoration: none !important;
}
.prompt-single-page .prompt-related-card:hover { border-color: var(--sx-orange); transform: translateY(-2px); }
.prompt-single-page .prompt-related-image { display: block; aspect-ratio: 1.35; background: var(--sx-surface-3); overflow: hidden; }
.prompt-single-page .prompt-related-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prompt-single-page .prompt-related-copy { display: flex; flex-direction: column; gap: 5px; padding: 11px; min-width: 0; }
.prompt-single-page .prompt-related-copy strong { overflow: hidden; color: var(--sx-ink); font-size: 13px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.prompt-single-page .prompt-related-copy small { color: var(--sx-muted); font-size: 11px; }
.prompt-single-page .prompt-related-model { align-self: start; max-width: 100%; overflow: hidden; color: var(--sx-orange); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.prompt-single-page .prompt-favorite-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  top: auto;
  z-index: 1200;
  background: var(--sx-ink) !important;
  color: var(--sx-bg) !important;
}
.prompt-single-page .prompt-detail-side {
  min-width: 0;
  padding: 30px 28px;
  background: var(--sx-surface) !important;
  border-left: 1px solid var(--sx-line);
}
.prompt-single-page .prompt-detail-side-block {
  padding: 0 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--sx-line);
}
.prompt-single-page .prompt-detail-side-block:last-child { margin-bottom: 0; border-bottom: 0; }
.prompt-single-page .prompt-detail-side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px;
}
.prompt-single-page .prompt-detail-side-tags > * { transform: scale(.92); transform-origin: left center; }
.prompt-single-page .prompt-detail-side-kicker {
  margin-bottom: 10px;
  color: var(--sx-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prompt-single-page .prompt-detail-side h2 {
  margin: 0 0 14px !important;
  color: var(--sx-ink) !important;
  font-size: 36px !important;
  line-height: 1.2 !important;
  word-break: break-word;
}
.prompt-single-page .prompt-detail-author {
  margin-bottom: 14px;
  color: var(--sx-orange);
  font-size: 13px;
  font-weight: 700;
}
.prompt-single-page .prompt-detail-side-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--sx-muted);
  font-size: 12px;
}
.prompt-single-page .prompt-detail-side-meta i { color: var(--sx-orange); margin-right: 4px; }
.prompt-single-page .prompt-detail-fields .prompt-info-list { gap: 0; }
.prompt-single-page .prompt-detail-fields .prompt-info-row { padding: 11px 0; border-bottom: 1px solid var(--sx-line); }
.prompt-single-page .prompt-detail-fields .prompt-info-row:last-child { border-bottom: 0; }
.prompt-single-page .prompt-detail-fields .value { color: var(--sx-ink-2); }
.prompt-single-page .prompt-source-link { color: var(--sx-orange) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.prompt-single-page .prompt-comments-box { margin-top: 22px; }
.prompt-pagebar .ellipsis {
  padding-left: 4px !important;
  padding-right: 4px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--sx-muted) !important;
  pointer-events: none;
}
@media (max-width: 820px) {
  .prompt-single-page .prompt-detail-layout { grid-template-columns: 1fr; }
  .prompt-single-page .prompt-detail-side { border-left: 0; border-top: 1px solid var(--sx-line); padding: 24px 20px; }
  .prompt-single-page .prompt-single-content { padding: 0 18px 24px !important; }
  .prompt-single-page .prompt-detail-media { min-height: 300px; padding: 14px; }
  .prompt-single-page .prompt-detail-extra { padding: 22px 18px 28px; }
  .prompt-single-page .prompt-detail-side h2 { font-size: 28px !important; }
  .prompt-single-page .prompt-gallery-stage { min-height: 250px; }
  .prompt-single-page .prompt-gallery-image { max-height: none; }
  .prompt-single-page .prompt-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .prompt-single-page .prompt-related-grid { grid-template-columns: 1fr; }
  .prompt-single-page .prompt-related-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .prompt-single-page .prompt-related-image { aspect-ratio: auto; height: 96px; }
  .prompt-single-page .prompt-related-copy { align-self: center; }
}

@media (max-width: 600px) {
  .prompt-single-page .prompt-gallery-stage { min-height: 240px; }
  .prompt-single-page .prompt-gallery-arrow { width: 34px; height: 34px; }
  .prompt-single-page .prompt-gallery-prev { left: 6px; }
  .prompt-single-page .prompt-gallery-next { right: 6px; }
  .prompt-single-page .prompt-gallery-zoom,
  .prompt-single-page .prompt-gallery-download { width: 32px; height: 32px; top: 8px; }
  .prompt-single-page .prompt-gallery-zoom { right: 8px; }
  .prompt-single-page .prompt-gallery-download { right: 46px; }
  .prompt-single-page .prompt-gallery-thumbs { padding-left: 2px; padding-right: 2px; }
  .prompt-image-lightbox { padding: 64px 12px 16px; }
  .prompt-image-lightbox img { max-width: calc(100vw - 24px); max-height: calc(100vh - 88px); }
  .prompt-image-lightbox-toolbar { top: 12px; gap: 3px; padding: 4px; }
  .prompt-image-lightbox-tool { width: 30px; height: 30px; }
  .prompt-image-lightbox-scale { min-width: 40px; font-size: 10px; }
  .prompt-image-lightbox-close { top: 12px; right: 10px; width: 34px; height: 34px; }
}