/* ====================================================
   摄状元®AI创影 - 移动端统一修复 (FINAL)
   职责：配色修正 + 间距紧凑 + Header修复 + 菜单下拉
   替代：mobile-fix-v3.css / v4.css / v5.css
   ==================================================== */

/* ══ 0. 定义缺失的CSS变量别名（修复内联样式引用） ══ */
:root {
  --color-text-secondary: #4A4A5A;
  --color-text-muted: #8A8A9A;
  --color-text-primary: #1A1A2E;
  --color-primary: #C41E3A;
  --color-primary-dark: #9B1830;
  --color-gold: #D4A017;
  --font-size-lg: 18px;
}

/* ══ 1. 全局重置：清除旧patch的!important污染 ══ */
.site-header {
  overflow: visible !important;
  max-height: none !important;
}
.header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: static !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.logo, .header-actions, .mobile-menu-toggle, .main-nav {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* ══ 2. 配色修正：确保文字清晰可读 ══ */
body {
  color: #1A1A2E;
  background: #fff;
}
p, span, li, td, th, label {
  color: inherit;
}
.feature-card p,
.advantage-card p,
.creation-card p,
.course-card p,
.partner-card p {
  color: #4A4A5A !important;
}
.feature-card h3,
.advantage-card h3,
.creation-card h3,
.course-card h3 {
  color: #1A1A2E !important;
}

/* ══ 3. 间距紧凑化：section间距大幅缩减 ══ */
.section, .section-alt, .section-dark {
  padding: 24px 0 !important;
}
.section-header {
  margin-bottom: 16px !important;
}
.section-header h2 {
  font-size: 1.2rem !important;
  margin-bottom: 6px !important;
}
.section-header .subtitle {
  font-size: 0.8rem !important;
  margin-bottom: 8px !important;
}
.section-header .divider {
  margin-bottom: 0 !important;
}

/* ══ 4. Container ══ */
.container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ══ 5. Hero ══ */
.hero {
  padding: 60px 12px 16px !important;
  min-height: auto !important;
}
.hero-content {
  padding: 0 !important;
}
.hero-content h1 {
  font-size: 1.35rem !important;
  margin-bottom: 8px !important;
}
.hero-content .slogan {
  font-size: 0.85rem !important;
  margin-bottom: 8px !important;
}
.hero-content .description {
  font-size: 0.8rem !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
}
.hero-buttons {
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
.hero-buttons .btn,
.hero-buttons .btn-lg {
  width: 100% !important;
  max-width: 260px !important;
  padding: 10px 20px !important;
  font-size: 0.85rem !important;
  min-height: 40px !important;
}

/* ══ 6. Header（移动端核心修复） ══ */
.site-header {
  height: 56px !important;
  background: #0a0a0f !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-header.scrolled {
  background: #0a0a0f !important;
}
.header-inner {
  height: 56px !important;
  padding: 0 10px !important;
  gap: 0 !important;
}

/* Logo */
.logo {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  padding: 0 4px !important;
}
.logo-text {
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* Header Actions（登录/注册按钮） */
.header-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 56px !important;
}
.header-btn {
  font-size: 11px !important;
  padding: 5px 8px !important;
  white-space: nowrap !important;
  min-height: auto !important;
}
.header-btn-partner {
  display: none !important;
}
.header-btn-balance {
  display: none !important;
}

/* 汉堡菜单 */
.mobile-menu-toggle {
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 0 !important;
}
.mobile-menu-toggle span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 2px !important;
  margin: 2px 0 !important;
}

/* 导航菜单：向下展开 */
.main-nav {
  position: fixed !important;
  top: 56px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  max-height: calc(100vh - 56px) !important;
  background: rgba(10,10,15,0.98) !important;
  transform: translateY(-110%) !important;
  transition: transform 0.3s ease !important;
  overflow-y: auto !important;
  padding: 12px 0 !important;
  z-index: 998 !important;
}
.main-nav.szy-nav-open,
.main-nav.mobile-open,
.main-nav.open {
  transform: translateY(0) !important;
}
.nav-list {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 16px !important;
  gap: 0 !important;
}
.nav-item {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.nav-item > a {
  display: block !important;
  padding: 12px 0 !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  background: none !important;
}
.nav-item.active > a {
  color: #F0C040 !important;
}
.nav-item .submenu {
  position: static !important;
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
  border-left: 3px solid rgba(196,30,58,0.3) !important;
  padding-left: 12px !important;
  margin: 0 0 0 12px !important;
}
.nav-item.submenu-open .submenu {
  display: block !important;
}
.nav-item .submenu li a {
  font-size: 13px !important;
  padding: 8px 12px !important;
  color: rgba(255,255,255,0.7) !important;
  background: none !important;
}
body.nav-open {
  overflow: hidden !important;
}

/* ══ 7. Feature Cards ══ */
.features-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.feature-card {
  padding: 14px 12px !important;
}
.feature-icon {
  font-size: 1.8em !important;
  margin-bottom: 6px !important;
}
.feature-card h3 {
  font-size: 0.95rem !important;
  margin-bottom: 4px !important;
}
.feature-card p {
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
}

/* ══ 8. Page Banner ══ */
.page-banner {
  padding: 60px 12px 16px !important;
}
.page-banner h1 {
  font-size: 1.2rem !important;
  margin-bottom: 6px !important;
}
.page-banner p {
  font-size: 0.8rem !important;
}
.page-banner .breadcrumb {
  margin-top: 8px !important;
}

/* ══ 9. Workflow ══ */
.workflow-steps {
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
}
.workflow-step {
  padding: 6px 0 !important;
  width: 100% !important;
  max-width: 260px !important;
}
.workflow-step-icon {
  width: 40px !important;
  height: 40px !important;
  font-size: 18px !important;
}
.workflow-step-title {
  font-size: 13px !important;
}
.workflow-step-desc {
  font-size: 11px !important;
}
.workflow-arrow {
  transform: rotate(90deg) !important;
  padding: 2px 0 !important;
  font-size: 16px !important;
}

/* ══ 10. Advantage Cards ══ */
.advantages-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.advantage-card {
  padding: 14px 12px !important;
}
.advantage-card::before {
  display: none !important;
}
.adv-icon { font-size: 24px !important; }
.adv-title { font-size: 0.9rem !important; }
.adv-subtitle { font-size: 0.75rem !important; }

/* ══ 11. Creation Grid ══ */
.creation-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.creation-card {
  padding: 12px 10px !important;
}
.creation-icon { font-size: 24px !important; }
.creation-title { font-size: 0.85rem !important; }
.creation-desc { font-size: 0.75rem !important; }

/* ══ 12. Stats ══ */
.stats-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.stat-card {
  padding: 12px !important;
}
.stat-number {
  font-size: 1.5rem !important;
}
.stat-label {
  font-size: 0.75rem !important;
}

/* ══ 13. CTA Banner ══ */
.cta-banner {
  padding: 20px 14px !important;
  border-radius: 12px !important;
}
.cta-banner h2 {
  font-size: 1.15rem !important;
  margin-bottom: 8px !important;
}
.cta-banner p {
  font-size: 0.8rem !important;
  margin-bottom: 12px !important;
}

/* ══ 14. Partner Grid ══ */
.partner-grid {
  grid-template-columns: 1fr !important;
}
.partner-card {
  padding: 16px !important;
}

/* ══ 15. Task Cards ══ */
.task-hall-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.task-card {
  padding: 12px !important;
}

/* ══ 16. News ══ */
.news-list {
  gap: 10px !important;
}
.news-item {
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px !important;
}
.news-item .news-date {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  align-items: center !important;
  min-width: auto !important;
  padding: 4px 8px !important;
}
.news-item .news-date .day {
  font-size: 1.1rem !important;
}
.news-item .news-date .month {
  font-size: 0.7rem !important;
}
.news-item .news-info h3 {
  font-size: 0.9rem !important;
}
.news-item .news-info p {
  font-size: 0.8rem !important;
}

/* ══ 17. Cases Grid ══ */
.cases-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.course-card .course-body {
  padding: 10px !important;
}
.course-card .course-body h3 {
  font-size: 0.85rem !important;
}

/* ══ 18. Asset Showcase ══ */
.asset-showcase {
  flex-direction: column !important;
  gap: 16px !important;
}
.asset-entry-grid {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.asset-entry-item {
  padding: 10px !important;
}

/* ══ 19. Register Banner ══ */
.register-banner {
  padding: 14px !important;
}
.register-banner-content {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.register-banner-left h3 {
  font-size: 0.95rem !important;
}
.register-banner-left p {
  font-size: 0.8rem !important;
}
.register-banner-actions {
  width: 100% !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.register-benefits {
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.benefit-item {
  font-size: 0.75rem !important;
}

/* ══ 20. Buttons ══ */
.btn {
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  min-height: 38px !important;
}
.btn-lg {
  padding: 10px 20px !important;
  font-size: 0.85rem !important;
}
.btn-sm {
  min-height: 32px !important;
}

/* ══ 21. Footer ══ */
.site-footer {
  padding: 24px 0 16px !important;
}
.footer-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.footer-brand .footer-slogan {
  font-size: 0.8rem !important;
}
.footer-brand .footer-tech {
  font-size: 0.65rem !important;
  word-break: break-all !important;
}
.footer-links h4 {
  font-size: 0.85rem !important;
  margin-bottom: 6px !important;
}
.footer-links a {
  font-size: 0.8rem !important;
}
.footer-links li {
  margin-bottom: 3px !important;
}
.footer-bottom {
  margin-top: 8px !important;
  padding-top: 8px !important;
}
.footer-bottom p {
  font-size: 10px !important;
}
.footer-disclaimer {
  font-size: 9px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

/* ══ 22. Form ══ */
.form-row {
  flex-direction: column !important;
  gap: 0 !important;
}
.form-group input,
.form-group select,
.form-group textarea {
  font-size: 16px !important;
}

/* ══ 23. Modal ══ */
.modal-box {
  padding: 16px !important;
  width: 94% !important;
  max-height: 88vh !important;
}

/* ══ 24. Animation override ══ */
.fade-in-up, .fade-in-up.visible,
.animate-in, .animate-in.visible {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ══ 25. Inline style overrides ══ */
.section[style*="linear-gradient"] {
  padding: 24px 0 !important;
}
.section[style*="linear-gradient"] .features-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.section[style*="linear-gradient"] .feature-card {
  padding: 14px 12px !important;
}
.section[style*="linear-gradient"] h2 {
  font-size: 1.2rem !important;
}
.section[style*="linear-gradient"] p[style*="font-size:1.1em"],
.section[style*="linear-gradient"] p[style*="font-size:1.05em"] {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
}
.section[style*="FFF5F5"] {
  padding: 24px 0 !important;
}
.section[style*="FFF5F5"] div[style*="font-size:2em"] {
  font-size: 1.3em !important;
}
.section[style*="FFF5F5"] div[style*="font-size:0.85em"] {
  font-size: 0.7rem !important;
}
h2[style*="font-size:2.2em"] {
  font-size: 1.2rem !important;
}
div[style*="font-size:2.5em"] {
  font-size: 1.8em !important;
}

/* ══ 26. Scrollbar & overflow ══ */
html, body {
  overflow-x: hidden;
}

/* ══ 27. About ══ */
.about-content p {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

/* ══ 28. Music player ══ */
.music-player-section {
  padding: 16px 12px !important;
}
.music-player-section h2 {
  font-size: 1.1rem !important;
}

/* ══ 29. ECO / Partners ══ */
.eco-hero {
  padding: 28px 0 !important;
}
.eco-hero h1 {
  font-size: 1.2rem !important;
}
.eco-step {
  padding: 12px !important;
}

/* ══ 30. Audience tags ══ */
.audience-tags {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px !important;
}
.audience-tag {
  font-size: 0.7rem !important;
  padding: 3px 8px !important;
}

/* ══ 31. User dropdown ══ */
.header-user-menu {
  position: relative !important;
}
.user-dropdown {
  right: -40px !important;
  min-width: 140px !important;
}

/* ══ 32. Back to top ══ */
.back-to-top {
  bottom: 50px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
}

/* ══ 33. 小屏手机 (<=480px) ══ */
@media (max-width: 480px) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .section, .section-alt, .section-dark {
    padding: 20px 0 !important;
  }
  .section-header {
    margin-bottom: 12px !important;
  }
  .section-header h2 {
    font-size: 1.05rem !important;
  }
  .hero {
    padding: 56px 10px 12px !important;
  }
  .hero-content h1 {
    font-size: 1.2rem !important;
  }
  .hero-content .description {
    font-size: 0.75rem !important;
  }
  .site-header {
    height: 50px !important;
  }
  .header-inner {
    height: 50px !important;
    padding: 0 8px !important;
  }
  .logo {
    height: 50px !important;
  }
  .logo-text {
    font-size: 12px !important;
  }
  .header-actions {
    height: 50px !important;
    gap: 3px !important;
  }
  .header-btn {
    font-size: 10px !important;
    padding: 4px 6px !important;
  }
  .mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
  }
  .main-nav {
    top: 50px !important;
  }
  .page-banner {
    padding: 54px 10px 12px !important;
  }
  .page-banner h1 {
    font-size: 1.05rem !important;
  }
  .feature-card {
    padding: 12px 10px !important;
  }
  .feature-card h3 {
    font-size: 0.85rem !important;
  }
  .feature-card p {
    font-size: 0.75rem !important;
  }
  .creation-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-grid {
    gap: 8px !important;
  }
  .stat-card {
    padding: 10px !important;
  }
  .stat-number {
    font-size: 1.3rem !important;
  }
  .cta-banner {
    padding: 16px 10px !important;
  }
  .cta-banner h2 {
    font-size: 1rem !important;
  }
  .section[style*="FFF5F5"] div[style*="font-size:2em"] {
    font-size: 1.1em !important;
  }
}

/* ══ 34. 平板端 (768-1023px) ══ */
@media (min-width: 768px) and (max-width: 1023px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .creation-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .task-hall-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .partner-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .section, .section-alt, .section-dark {
    padding: 32px 0 !important;
  }
}

/* ══ 35. 超小屏 (<=360px) 兜底 ══ */
@media (max-width: 360px) {
  .hero-content h1 {
    font-size: 1.1rem !important;
  }
  .section-header h2 {
    font-size: 0.95rem !important;
  }
  .logo-text {
    font-size: 11px !important;
  }
  .header-btn {
    font-size: 9px !important;
    padding: 3px 5px !important;
  }
}