/* 2026-08-13 · Codex · 旧专题教程统一浅色磨砂：课程、GPT Image、Suno 及通用教程组件。 · CHG-20260813-SITE-SURFACE-V3-BATCH3-SPECIAL-TUTORIALS */
body.site-surface--tutorial {
  min-height: 100vh;
  color: var(--site-ink);
  background:
    radial-gradient(circle at 12% 5%, rgba(124, 92, 255, .13), transparent 27rem),
    radial-gradient(circle at 90% 12%, rgba(236, 72, 153, .09), transparent 25rem),
    linear-gradient(180deg, #f8f7fa 0%, #f2f0f5 100%) !important;
  background-attachment: fixed !important;
}

body.site-surface--tutorial :is(h1, h2, h3, h4, .title, .section-title) {
  color: var(--site-ink) !important;
}

body.site-surface--tutorial .nav-logo img {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

body.site-surface--tutorial .nav-dropdown.is-active .nav-dropdown-toggle {
  color: #6547f5 !important;
  background: rgba(111, 82, 255, .10) !important;
}

body.site-surface--tutorial .menu-section-title {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial .mobile-menu-panel a {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial .mobile-menu-backdrop {
  pointer-events: auto !important;
}

body.site-surface--tutorial .mobile-menu-btn span {
  background: var(--site-ink) !important;
}

body.site-surface--tutorial #mobileMenu.mobile-menu-overlay {
  z-index: 1200 !important;
  color: var(--site-ink) !important;
  background: rgba(250, 249, 252, .98) !important;
}

body.site-surface--tutorial #mobileMenu :is(a, .mobile-menu-close) {
  color: var(--site-ink) !important;
}

body.site-surface--tutorial #mobileMenu .mobile-menu-close {
  z-index: 1201 !important;
}

body.site-surface--tutorial :is(footer, .footer) {
  color: var(--site-ink-3) !important;
  background: rgba(255, 255, 255, .66) !important;
  border-color: var(--site-line) !important;
}

body.site-surface--tutorial :is(.mobile-menu-panel, .ai-support-dialog, .ai-support-quick, .ai-support-input) {
  color: var(--site-ink) !important;
  background: rgba(250, 249, 252, .97) !important;
  border-color: var(--site-line) !important;
  box-shadow: var(--site-shadow-hover) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  backdrop-filter: blur(22px) !important;
}

body.site-surface--tutorial :is(.mobile-menu-overlay, .ai-support-backdrop) {
  background: rgba(52, 43, 78, .28) !important;
}

body.site-surface--tutorial :is(
  .hero,
  .filter-bar,
  .resource-card,
  .showcase-card,
  .modal-box,
  .detail-panel,
  .empty-state,
  .loading-state
) {
  color: var(--site-ink) !important;
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  box-shadow: var(--site-shadow) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}

body.site-surface--tutorial :is(.hero p, .resource-card p, .detail-panel p, .empty-state p) {
  color: var(--site-ink-2) !important;
}

/* 通用教程资源库 */
body.site-surface--tutorial .hero {
  background:
    radial-gradient(circle at 88% 16%, rgba(216, 70, 160, .13), transparent 18rem),
    linear-gradient(135deg, rgba(111, 82, 255, .11), rgba(255, 255, 255, .88)) !important;
  border-color: rgba(111, 82, 255, .15) !important;
}

body.site-surface--tutorial :is(.filter-bar, .resource-card, .showcase-card) {
  color: var(--site-ink) !important;
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  box-shadow: var(--site-shadow) !important;
}

body.site-surface--tutorial :is(.filter-search input, .filter-category select, .tag-chip) {
  color: var(--site-ink-2) !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(60, 52, 78, .14) !important;
}

body.site-surface--tutorial .filter-category label {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial .filter-category select option {
  color: var(--site-ink) !important;
  background: #fff !important;
}

body.site-surface--tutorial :is(.filter-search button, .tag-chip.active, .btn-detail, .detail-actions .primary) {
  color: #fff !important;
  background: var(--site-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(111, 82, 255, .20) !important;
}

body.site-surface--tutorial .tag-chip:hover {
  color: #6547f5 !important;
  background: rgba(111, 82, 255, .08) !important;
  border-color: rgba(111, 82, 255, .20) !important;
}

body.site-surface--tutorial .card-preview {
  --card-bg: linear-gradient(135deg, #eee9ff, #f8ecf5) !important;
  --card-fade: #f8ecf5 !important;
  background: var(--card-bg) !important;
}

body.site-surface--tutorial .resource-card:nth-child(6n+1) .card-preview { --card-bg: linear-gradient(135deg, #e9e3ff, #f3f0ff) !important; --card-fade: #f3f0ff !important; }
body.site-surface--tutorial .resource-card:nth-child(6n+2) .card-preview { --card-bg: linear-gradient(135deg, #f8e6f1, #fff2f8) !important; --card-fade: #fff2f8 !important; }
body.site-surface--tutorial .resource-card:nth-child(6n+3) .card-preview { --card-bg: linear-gradient(135deg, #e5f3ff, #f1f8ff) !important; --card-fade: #f1f8ff !important; }
body.site-surface--tutorial .resource-card:nth-child(6n+4) .card-preview { --card-bg: linear-gradient(135deg, #f0e8ff, #faefff) !important; --card-fade: #faefff !important; }
body.site-surface--tutorial .resource-card:nth-child(6n+5) .card-preview { --card-bg: linear-gradient(135deg, #e7f6ef, #f3fbf7) !important; --card-fade: #f3fbf7 !important; }
body.site-surface--tutorial .resource-card:nth-child(6n+6) .card-preview { --card-bg: linear-gradient(135deg, #fff0e4, #fff8f1) !important; --card-fade: #fff8f1 !important; }

body.site-surface--tutorial .showcase-card .card-cover {
  background-color: #f3f0ff !important;
}

body.site-surface--tutorial .showcase-card .card-cover[style*="linear-gradient"] {
  background-image: linear-gradient(135deg, #e9e3ff, #f8ecf5) !important;
}

body.site-surface--tutorial :is(.card-preview .preview-text, .card-info h3, .card-title) {
  color: var(--site-ink) !important;
}

body.site-surface--tutorial :is(.card-info, .card-body) {
  color: var(--site-ink) !important;
  background: transparent !important;
}

body.site-surface--tutorial :is(.card-info .card-desc, .card-desc, .card-meta, .tier-label) {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial :is(.card-lock-icon, .detail-close, .video-player-close) {
  color: #6547f5 !important;
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(111, 82, 255, .17) !important;
}

body.site-surface--tutorial :is(.detail-overlay, .modal-overlay, .video-player-modal) {
  background: rgba(52, 43, 78, .30) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

body.site-surface--tutorial :is(.detail-panel, .modal-box, .video-player-container) {
  color: var(--site-ink) !important;
  background: rgba(250, 249, 252, .98) !important;
  border-color: var(--site-line) !important;
  box-shadow: var(--site-shadow-hover) !important;
}

body.site-surface--tutorial :is(.detail-title, .prompt-title, .guide-title, .modal-title) {
  color: var(--site-ink) !important;
  text-shadow: none !important;
}

body.site-surface--tutorial :is(.detail-desc, .guide-content, .guide-content p, .loading-spinner p, .video-player-error, .video-player-loading) {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial :is(.resource-tabs, .detail-header) {
  border-color: var(--site-line) !important;
}

body.site-surface--tutorial :is(.tab-btn, .copy-btn-highlight, .btn-copy) {
  color: #6547f5 !important;
  background: rgba(111, 82, 255, .08) !important;
  border-color: rgba(111, 82, 255, .17) !important;
}

body.site-surface--tutorial .tab-btn.active {
  color: #fff !important;
  background: var(--site-gradient) !important;
  border-color: transparent !important;
}

body.site-surface--tutorial :is(.pdf-main-container, .info-sidebar, .prompt-highlight-box, .prompt-content, .guide-box) {
  color: var(--site-ink) !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: var(--site-line) !important;
  box-shadow: none !important;
}

body.site-surface--tutorial .prompt-header {
  background: rgba(111, 82, 255, .06) !important;
  border-color: var(--site-line) !important;
}

body.site-surface--tutorial .prompt-content {
  color: #3f3a49 !important;
}

body.site-surface--tutorial :is(.card-badge.vip, .tier-label.vip) {
  color: #6547f5 !important;
  background: rgba(111, 82, 255, .12) !important;
  border-color: rgba(111, 82, 255, .18) !important;
}

body.site-surface--tutorial :is(input, select, textarea) {
  color: var(--site-ink) !important;
  background: rgba(255, 255, 255, .84) !important;
  border-color: rgba(60, 52, 78, .14) !important;
}

body.site-surface--tutorial :is(input, textarea)::placeholder {
  color: var(--site-ink-3) !important;
}

body.site-surface--tutorial :is(.tag-chip.active, .tab-btn.active, .btn-retry, .handoff-btn) {
  color: #fff !important;
  background: var(--site-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 26px rgba(111, 82, 255, .22) !important;
}

/* 课程播放页 */
body.site-surface--tutorial :is(.course-banner, .player-wrap, .course-intro, .syllabus) {
  color: var(--site-ink) !important;
  background: var(--site-panel-strong) !important;
  border: 1px solid var(--site-line) !important;
  box-shadow: var(--site-shadow) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}

body.site-surface--tutorial .course-banner {
  background:
    radial-gradient(circle at 14% 18%, rgba(111, 82, 255, .17), transparent 22rem),
    radial-gradient(circle at 88% 80%, rgba(216, 70, 160, .12), transparent 24rem),
    rgba(255, 255, 255, .82) !important;
}

body.site-surface--tutorial :is(.course-banner p, .course-intro p, .syllabus p, .player-placeholder) {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial :is(.course-stats, .course-stats span, .course-stats .stat-icon) {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial :is(.player-wrap video, .player-placeholder) {
  background: linear-gradient(135deg, rgba(111, 82, 255, .08), rgba(216, 70, 160, .06)) !important;
}

body.site-surface--tutorial :is(.syllabus-item, .lesson-item, .skeleton, .skeleton-line) {
  color: var(--site-ink-2) !important;
  background: rgba(111, 82, 255, .07) !important;
  border-color: var(--site-line) !important;
}

body.site-surface--tutorial :is(.notice-bar, .intro-label, .mobile-syllabus-toggle, .stat-highlight) {
  color: #6547f5 !important;
  background: rgba(111, 82, 255, .10) !important;
  border-color: rgba(111, 82, 255, .18) !important;
}

/* GPT Image 2 提示词库 */
body.site-surface--tutorial .i2lib-hero {
  color: var(--site-ink) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(216, 70, 160, .17), transparent 18rem),
    linear-gradient(135deg, rgba(111, 82, 255, .13), rgba(255, 255, 255, .88)) !important;
  border-color: rgba(111, 82, 255, .16) !important;
  box-shadow: var(--site-shadow) !important;
}

body.site-surface--tutorial :is(.i2lib-hero p.lead, .i2lib-hero .kv-item, .i2lib-card-desc, .i2lib-card-meta) {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial .i2lib-hero .kv-item {
  background: rgba(255, 255, 255, .66) !important;
  border-color: var(--site-line) !important;
}

body.site-surface--tutorial :is(.i2lib-hero .highlight, .i2lib-hero strong) {
  color: #6547f5 !important;
}

body.site-surface--tutorial :is(.i2lib-hero-cta, .i2lib-cat-chip.active, .i2lib-btn-use, .i2lib-lb-btn.primary) {
  color: #fff !important;
  background: var(--site-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 28px rgba(111, 82, 255, .24) !important;
}

body.site-surface--tutorial :is(.i2lib-filter, .i2lib-card, .i2lib-lightbox-content) {
  color: var(--site-ink) !important;
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  box-shadow: var(--site-shadow) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
}

body.site-surface--tutorial :is(.i2lib-search input, .i2lib-card-prompt) {
  color: var(--site-ink) !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(60, 52, 78, .13) !important;
}

body.site-surface--tutorial .i2lib-btn-copy {
  color: #6547f5 !important;
  background: rgba(111, 82, 255, .09) !important;
  border-color: rgba(111, 82, 255, .18) !important;
}

body.site-surface--tutorial .i2lib-cat-chip {
  color: var(--site-ink-2) !important;
  background: rgba(255, 255, 255, .76) !important;
  border-color: var(--site-line) !important;
}

body.site-surface--tutorial .i2lib-card-cover {
  background: linear-gradient(135deg, rgba(111, 82, 255, .08), rgba(216, 70, 160, .06)) !important;
}

body.site-surface--tutorial :is(.i2lib-badge-diff, .i2lib-badge-ratio) {
  color: #fff !important;
  background: rgba(111, 82, 255, .86) !important;
}

body.site-surface--tutorial .i2lib-lightbox {
  background: rgba(52, 43, 78, .76) !important;
}

/* Suno 教程 */
body.site-surface--tutorial .st-topbar {
  color: var(--site-ink) !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: var(--site-line) !important;
  box-shadow: 0 10px 30px rgba(43, 35, 68, .07) !important;
  -webkit-backdrop-filter: saturate(150%) blur(20px) !important;
  backdrop-filter: saturate(150%) blur(20px) !important;
}

body.site-surface--tutorial :is(.st-topbar-back, .st-topbar-title) {
  color: var(--site-ink) !important;
}

body.site-surface--tutorial .st-topbar-cta {
  color: #fff !important;
  background: var(--site-gradient) !important;
  box-shadow: 0 9px 24px rgba(111, 82, 255, .22) !important;
}

body.site-surface--tutorial .st-hero {
  color: var(--site-ink) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(216, 70, 160, .14), transparent 17rem),
    linear-gradient(135deg, rgba(111, 82, 255, .13), rgba(255, 255, 255, .88)) !important;
  border-color: rgba(111, 82, 255, .16) !important;
  box-shadow: var(--site-shadow) !important;
}

body.site-surface--tutorial :is(.st-hero h1, .st-section h2, .st-card-title, .st-song-name, .st-faq-q, .st-cta h3) {
  color: var(--site-ink) !important;
}

body.site-surface--tutorial :is(.st-hero-sub, .st-section-sub, .st-card p, .st-mode-desc, .st-steps li span, .st-song-prompt, .st-song-oss-note, .st-faq-a, .st-cta p, .st-notice) {
  color: var(--site-ink-2) !important;
}

body.site-surface--tutorial :is(.st-hero-tag, .st-mode-name, .st-tag, .st-prompt-label, .st-dont, .st-do, .st-card strong) {
  color: var(--site-ink) !important;
}

body.site-surface--tutorial :is(.st-hero-tag, .st-card, .st-mode-card, .st-song-item, .st-faq-item, .st-faq-q, .st-cta, .st-tag) {
  background: var(--site-panel) !important;
  border-color: var(--site-line) !important;
  box-shadow: var(--site-shadow) !important;
}

body.site-surface--tutorial :is(.st-prompt, .st-notice) {
  color: var(--site-ink-2) !important;
  background: rgba(111, 82, 255, .08) !important;
  border-color: rgba(111, 82, 255, .16) !important;
}

body.site-surface--tutorial :is(.st-section-num, .st-step-num) {
  color: #fff !important;
  background: var(--site-gradient) !important;
}

body.site-surface--tutorial :is(.st-mode-price, .st-song-group-title, .hl, .st-prompt strong) {
  color: #6547f5 !important;
}

body.site-surface--tutorial .st-mode-card.active {
  background: rgba(111, 82, 255, .09) !important;
  border-color: rgba(111, 82, 255, .22) !important;
}

body.site-surface--tutorial .st-cta-btn-secondary {
  color: #6547f5 !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(111, 82, 255, .17) !important;
}

@media (max-width: 768px) {
  body.site-surface--tutorial {
    background:
      radial-gradient(circle at 12% 3%, rgba(124, 92, 255, .10), transparent 20rem),
      linear-gradient(180deg, #f8f7fa 0%, #f2f0f5 100%) !important;
    background-attachment: scroll !important;
  }

  body.site-surface--tutorial :is(.course-banner, .player-wrap, .course-intro, .syllabus, .i2lib-filter, .i2lib-card, .st-card, .st-mode-card) {
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    box-shadow: 0 10px 28px rgba(43, 35, 68, .07) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-surface--tutorial *,
  body.site-surface--tutorial *::before,
  body.site-surface--tutorial *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}