/* AI 图鉴 A–G 共用间距规范。只管理页面骨架和同类卡片，不干预各模块 Demo 的内容高度。 */
:root{
  --pattern-page-max:1240px;
  --pattern-content-max:1176px;
  --pattern-page-gutter:32px;
  --pattern-page-gutter-mobile:16px;
  --pattern-content-inset:64px;
  --pattern-section-gap:20px;
  --pattern-section-gap-mobile:16px;
  --pattern-card-x:28px;
  --pattern-card-y:24px;
  --pattern-card-radius:16px;
}

.modnav .in,header.top,.layout,.modfoot .in{max-width:var(--pattern-page-max)}
/* 顶部介绍与下方互动模块标题共用同一条左、右对齐线。 */
header.top{padding:34px 8px 14px}
.layout{gap:var(--pattern-section-gap);padding:14px var(--pattern-page-gutter) 40px}
.modfoot .in{padding:22px var(--pattern-page-gutter) 44px}

.entry-overview,.selector-section,.knowledge-section,.checklist-section,.practice-section,
.md-overview,.md-selector,.md-matrix-section,.md-checklist,.md-practice{
  width:calc(100% - var(--pattern-content-inset));
  max-width:var(--pattern-content-max);
  box-sizing:border-box;
  margin-top:0;
  margin-right:auto;
  margin-bottom:var(--pattern-section-gap);
  margin-left:auto;
}

/* 一级卡片之间统一留 20px；互动区不再额外叠加底部内边距。 */
body .experience-section{
  width:100%;
  box-sizing:border-box;
  margin-bottom:var(--pattern-section-gap) !important;
  padding-bottom:0 !important;
}
body .practice-section,body .md-practice{
  gap:var(--pattern-section-gap) !important;
}

/* 一级内容模块统一使用大圆角。提高选择器优先级并固定取值来源，
   避免后加载的全站黑白主题把通用 --radius 重置成 3px。 */
body .experience-section .layout,
body .entry-overview,body .selector-section,body .knowledge-section,body .checklist-section,body .practice-card,
body .md-overview,body .md-selector,body .md-matrix-section,body .md-checklist,body .md-practice-card{
  border-radius:var(--pattern-card-radius) !important;
}

/* 卡片内部存在分栏底色时也要沿外轮廓裁切，保证四个圆角都清晰。 */
body .experience-section .layout,
body .entry-overview,body .selector-section,body .knowledge-section,body .checklist-section,body .practice-card,
body .md-overview,body .md-selector,body .md-matrix-section,body .md-checklist,body .md-practice-card{
  overflow:hidden;
}

/* 入口与推荐结果统一使用彩色 emoji 字体，避免符号被渲染成黑白字形。 */
body .experience-section .entry .em-ico,
body .recommendation .rank,
body .md-recommendation .rank{
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important;
  font-style:normal !important;
}

.overview-head,.md-overview-head{gap:32px;padding:25px var(--pattern-card-x) 22px}
.selector-head,.md-section-head{padding:23px var(--pattern-card-x) 17px}
.knowledge-section,.md-matrix-section{padding:var(--pattern-card-y) var(--pattern-card-x)}
.checklist-section,.md-checklist{padding:23px var(--pattern-card-x)}
.practice-card,.md-practice-card{padding:22px 24px}
.info{padding:22px 26px}
.card .hd{padding:14px 17px}
.list{padding:7px}
.entry{padding:8px 11px}

@media(max-width:900px){
  :root{--pattern-content-inset:32px}
  .entry-overview,.selector-section,.knowledge-section,.checklist-section,.practice-section,
  .md-overview,.md-selector,.md-matrix-section,.md-checklist,.md-practice{
    margin-right:var(--pattern-page-gutter-mobile);
    margin-left:var(--pattern-page-gutter-mobile);
  }
}

@media(max-width:620px){
  header.top{padding:28px var(--pattern-page-gutter-mobile) 12px}
  .layout{gap:var(--pattern-section-gap-mobile);padding:12px var(--pattern-page-gutter-mobile) 32px}
  .modfoot .in{padding:20px var(--pattern-page-gutter-mobile) 36px}
  .entry-overview,.selector-section,.knowledge-section,.checklist-section,.practice-section,
  .md-overview,.md-selector,.md-matrix-section,.md-checklist,.md-practice{
    margin-bottom:var(--pattern-section-gap-mobile);
  }
  body .experience-section{margin-bottom:var(--pattern-section-gap-mobile) !important}
  body .practice-section,body .md-practice{gap:var(--pattern-section-gap-mobile) !important}
  .overview-head,.md-overview-head{gap:20px;padding:20px 18px}
  .selector-head,.md-section-head,.selector-form,.selector-result,.md-selector-form,.md-selector-result{
    padding-right:18px;
    padding-left:18px;
  }
  .knowledge-section,.md-matrix-section,.checklist-section,.md-checklist{padding:20px 18px}
  .practice-card,.md-practice-card{padding:19px 18px}
}

/* A–G 共用内容比例：以「等待过程」页验证后的 6:4 版式为基准。
   工作台、选型器与底部实践模块使用同一条分栏线，避免页面间宽度跳动。 */
body .selector-head,
body .md-selector .md-section-head{
  border-bottom:1px solid var(--line);
}

body .selector-result,
body .md-selector-result{
  border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(58,52,255,.045) 0%,var(--paper) 48%);
}

body .recommendation,
body .md-recommendation{
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(11,11,13,.035);
}

/* “组合方案 / 常见反例”合并为一张完整卡片，以实线竖向分割。 */
body .practice-section,
body .md-practice{
  gap:0 !important;
  border:1px solid var(--line);
  border-radius:var(--pattern-card-radius) !important;
  background:var(--paper);
  overflow:hidden;
}

body .practice-card,
body .md-practice-card{
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:var(--paper);
}

body .practice-card:last-child,
body .md-practice-card:last-child{
  background:linear-gradient(180deg,rgba(58,52,255,.045) 0%,var(--paper) 48%);
}

@media(min-width:901px){
  body .experience-section .layout,
  body .selector-layout,
  body .md-selector-layout,
  body .practice-section,
  body .md-practice{
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  }

  body .practice-card:first-child,
  body .md-practice-card:first-child{
    border-right:1px solid var(--line) !important;
  }
}

@media(max-width:900px){
  body .selector-result,
  body .md-selector-result{
    border-left:0;
    border-top:1px solid var(--line);
  }

  body .practice-section,
  body .md-practice{
    grid-template-columns:1fr;
  }

  body .practice-card:first-child,
  body .md-practice-card:first-child{
    border-bottom:1px solid var(--line) !important;
  }
}