/* AI 沙龙三页统一视觉：同一二级导航、留白、字体、组件尺度。 */
:root {
  --salon-ink: #111d35;
  --salon-muted: #60718a;
  --salon-blue: #2864e8;
  --salon-soft: #edf4ff;
  --salon-line: #dbe5f2;
  --salon-bg: #f6f8fc;
  --salon-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body { font-family: var(--salon-font) !important; background: var(--salon-bg) !important; color: var(--salon-ink); }

/* 详细教程 / 课程讲演：改成和活动申请相同的平面二级导航。 */
.workshop-section-nav {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--salon-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.workshop-section-brand { display: none !important; }
.workshop-section-links {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  gap: 2rem !important;
  width: min(1160px, calc(100% - 3.5rem)) !important;
  margin: 0 auto !important;
}
.workshop-section-links a {
  position: relative !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: .55rem !important;
  min-height: 58px !important;
  padding: 0 .25rem !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--salon-muted) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.workshop-section-links a:hover,
.workshop-section-links a.is-active { color: var(--salon-blue) !important; }
.workshop-section-links a.is-active { border-bottom-color: var(--salon-blue) !important; }
.workshop-section-links a > svg { width: 18px !important; height: 18px !important; flex: 0 0 auto !important; color: inherit !important; }
.workshop-section-links b { color: inherit !important; font-size: .9rem !important; font-weight: 750 !important; }
.workshop-section-links small { display: none !important; }

/* 活动申请：删掉左右重复信息，控制为两行标题，并让两列真正等高。 */
.sub-nav { background: #fff !important; border-bottom-color: var(--salon-line) !important; }
.sub-nav-inner { width: min(1160px, calc(100% - 3.5rem)) !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; }
.sub-tab { min-height: 58px !important; padding: 0 .25rem !important; font-size: .9rem !important; }
.hero { padding-top: 4.2rem !important; }
.hero-grid { align-items: stretch !important; gap: 3rem !important; }
.hero-grid > :first-child { display: flex !important; min-height: 500px !important; flex-direction: column !important; justify-content: center !important; }
.hero-grid h1 { max-width: 650px !important; margin: 1.1rem 0 1.25rem !important; font-size: clamp(2.35rem, 3.4vw, 3.45rem) !important; line-height: 1.16 !important; letter-spacing: -.045em !important; }
.hero-desc { max-width: 570px !important; margin-bottom: 1.8rem !important; font-size: 1rem !important; line-height: 1.85 !important; }
.hero-info { display: none !important; }
.event-card { position: static !important; display: flex !important; height: 100% !important; min-height: 500px !important; flex-direction: column !important; border-radius: 24px !important; }
.event-details { flex: 1 !important; }
.event-card-footer { margin-top: auto !important; }

/* 课程讲演：去掉“首卡放大”的临时拼接感，统一成三张等权课程卡。 */
main:has(.course-grid) { width: min(1160px, calc(100% - 3.5rem)) !important; max-width: none !important; margin: 0 auto !important; padding: 3.25rem 0 5rem !important; }
.intro { grid-template-columns: minmax(0, 1.7fr) minmax(250px, .6fr) !important; gap: 2.5rem !important; padding: 2.8rem !important; border: 1px solid var(--salon-line) !important; border-radius: 24px !important; background: #fff !important; box-shadow: 0 20px 45px rgba(31, 62, 108, .08) !important; }
.intro h1 { max-width: 780px !important; font-size: clamp(2.35rem, 4.2vw, 4.1rem) !important; line-height: 1.08 !important; letter-spacing: -.045em !important; }
.intro p { max-width: 720px !important; color: var(--salon-muted) !important; font-size: 1rem !important; line-height: 1.8 !important; }
.course-count { border-color: var(--salon-line) !important; }
.course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.25rem !important; margin-top: 1.5rem !important; }
.course-card,
.course-card:first-child { grid-column: auto !important; grid-row: auto !important; min-height: 0 !important; border: 1px solid var(--salon-line) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 16px 36px rgba(31, 62, 108, .07) !important; }
.course-card .card-body { padding: 1.6rem !important; }
.course-card h2 { color: var(--salon-ink) !important; font-size: 1.25rem !important; line-height: 1.35 !important; }
.course-card p { color: var(--salon-muted) !important; line-height: 1.75 !important; }
.course-card .btn { border-radius: 11px !important; background: var(--salon-blue) !important; box-shadow: none !important; }

/* 详细教程：把旧的紫黑侧栏和多层大框收束为清晰的课程工作区。 */
.obsidian-tutorial { background: var(--salon-bg) !important; font-family: var(--salon-font) !important; }
.tutorial-course-bar { width: min(1160px, calc(100% - 3.5rem)) !important; min-height: 58px !important; margin: 1.5rem auto 0 !important; padding: .45rem !important; border: 1px solid var(--salon-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; }
.tutorial-course-bar > span { color: var(--salon-muted) !important; font-size: .78rem !important; }
.tutorial-course-tabs { gap: .5rem !important; }
.tutorial-course-tab { min-height: 42px !important; padding: .65rem 1rem !important; border: 1px solid var(--salon-line) !important; border-radius: 10px !important; background: #fff !important; color: var(--salon-muted) !important; box-shadow: none !important; }
.tutorial-course-tab.active { border-color: var(--salon-blue) !important; background: var(--salon-blue) !important; color: #fff !important; }
.tutorial-shell { display: grid !important; grid-template-columns: 270px minmax(0, 1fr) !important; gap: 1.5rem !important; width: min(1160px, calc(100% - 3.5rem)) !important; min-height: 0 !important; margin: 1.5rem auto 5rem !important; }
.tutorial-sidebar { position: sticky !important; top: 92px !important; width: auto !important; height: auto !important; max-height: calc(100vh - 116px) !important; padding: 1.35rem !important; border: 1px solid var(--salon-line) !important; border-radius: 20px !important; background: #fff !important; color: var(--salon-ink) !important; box-shadow: 0 14px 32px rgba(31, 62, 108, .06) !important; }
.tutorial-brand { padding: 0 0 1.1rem !important; border-bottom: 1px solid var(--salon-line) !important; color: var(--salon-ink) !important; }
.tutorial-brand-mark { border-radius: 12px !important; background: var(--salon-blue) !important; box-shadow: none !important; }
.tutorial-brand small { color: var(--salon-muted) !important; }
.progress { margin: 1rem 0 !important; border: 1px solid var(--salon-line) !important; background: var(--salon-soft) !important; color: var(--salon-muted) !important; }
.progress b { color: var(--salon-blue) !important; }
.tutorial-nav { gap: .2rem !important; }
.tutorial-nav a { padding: .78rem .7rem !important; border-radius: 9px !important; color: var(--salon-muted) !important; font-size: .82rem !important; }
.tutorial-nav a:hover { background: var(--salon-soft) !important; color: var(--salon-blue) !important; }
.tutorial-nav a span { color: var(--salon-blue) !important; }
.tutorial-sidebar-note { border-color: var(--salon-line) !important; color: #8a9ab0 !important; }
.tutorial-content { width: auto !important; max-width: none !important; padding: 0 !important; border: 1px solid var(--salon-line) !important; border-radius: 20px !important; background: #fff !important; overflow: hidden !important; }
.tutorial-content .hero { margin: 0 !important; padding: 3rem !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; }
.tutorial-content .hero h1 { max-width: 800px !important; margin: 1rem 0 !important; font-size: clamp(2.35rem, 4vw, 3.9rem) !important; line-height: 1.08 !important; letter-spacing: -.045em !important; }
.tutorial-content .lead { max-width: 760px !important; color: var(--salon-muted) !important; font-size: 1rem !important; line-height: 1.85 !important; }
.eyebrow, .chapter-no { color: var(--salon-blue) !important; }
.hero-actions a { border-radius: 11px !important; box-shadow: none !important; }
.hero-actions .primary { background: var(--salon-blue) !important; }
.hero-actions .secondary { background: var(--salon-soft) !important; color: var(--salon-blue) !important; }
.tutorial-content .hero > img,
.obsidian-tutorial figure img { border-color: var(--salon-line) !important; border-radius: 14px !important; box-shadow: none !important; }
.chapter { margin: 0 !important; padding: 3.5rem 3rem !important; border-top: 1px solid var(--salon-line) !important; border-bottom: 0 !important; }
.chapter h2 { font-size: clamp(1.8rem, 3vw, 2.5rem) !important; }
.chapter p { color: #495b75 !important; font-size: 1rem !important; line-height: 1.85 !important; }
.statement { border-left-color: var(--salon-blue) !important; border-radius: 0 14px 14px 0 !important; background: #14213d !important; }
.three-points div { border-color: var(--salon-line) !important; border-radius: 14px !important; }
.three-points b { color: var(--salon-blue) !important; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-grid > :first-child, .event-card { min-height: 0 !important; }
  .event-card { height: auto !important; }
  .course-grid { grid-template-columns: 1fr 1fr !important; }
  .tutorial-shell { grid-template-columns: 1fr !important; }
  .tutorial-sidebar { position: static !important; max-height: none !important; }
}

@media (max-width: 680px) {
  .workshop-section-links, .sub-nav-inner { justify-content: space-between !important; gap: .35rem !important; width: calc(100% - 2rem) !important; }
  .workshop-section-links a > svg, .sub-tab svg, .sub-tab .badge, .sub-tab span[style*="border-radius:999px"] { display: none !important; }
  .workshop-section-links a, .sub-tab { min-height: 50px !important; font-size: .78rem !important; }
  .hero { padding-top: 2.5rem !important; }
  .hero-grid h1 { font-size: 2.35rem !important; }
  main:has(.course-grid), .tutorial-course-bar, .tutorial-shell { width: calc(100% - 2rem) !important; }
  .intro { grid-template-columns: 1fr !important; padding: 1.5rem !important; }
  .course-grid { grid-template-columns: 1fr !important; }
  .tutorial-course-bar { display: block !important; }
  .tutorial-course-tabs { margin-top: .5rem !important; }
  .tutorial-content .hero, .chapter { padding: 2rem 1.35rem !important; }
}