/* ===========================================================
   components.css · 知识卡 / 步骤 / 对比 / 大字页 / 提示块 / 图示
   =========================================================== */

/* —— 通用栅格 —— */
.grid{ display: grid; gap: var(--s3); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

/* —— 知识卡（点击展开） —— */
.kcard{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1);
  overflow: hidden; transition: box-shadow .2s, border-color .2s, transform .2s;
}
.kcard:hover{ box-shadow: var(--sh-2); border-color: #BFE3F8; }
.kcard[data-open="true"]{ border-color: var(--brand); box-shadow: var(--sh-2); }

.kcard-head{
  width: 100%; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); background: transparent; border: 0; text-align: left;
}
.kcard-head .idx{
  font-family: var(--font-code); font-weight: 700; font-size: var(--fs-sm);
  color: #fff; background: var(--brand); border-radius: 8px;
  min-width: 40px; height: 40px; display: grid; place-items: center; flex: none;
}
.kcard-head .ktitle{ font-size: var(--fs-lg); font-weight: 800; }
.kcard-head .kbrief{ margin-left: auto; color: var(--muted); font-size: var(--fs-sm); text-align: right; }
.kcard-head .chev{ flex: none; width: 22px; height: 22px; color: var(--muted); transition: transform .25s; }
.kcard[data-open="true"] .chev{ transform: rotate(180deg); color: var(--brand); }

.kcard-body{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.kcard[data-open="true"] .kcard-body{ grid-template-rows: 1fr; }
.kcard-body > .inner{ overflow: hidden; }
.kcard-body .pad{ padding: 0 var(--s4) var(--s4) calc(var(--s4) + 56px); }
.kcard-body ul{ list-style: none; display: grid; gap: 10px; }
.kcard-body li{ position: relative; padding-left: 26px; color: var(--ink-2); font-size: var(--fs-body); }
.kcard-body li::before{ content: ""; position: absolute; left: 6px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.kcard-body li b{ color: var(--ink); }
.kcard-body li.red::before{ background: var(--accent); }

/* —— 步骤 / 时间轴 —— */
.steps{ list-style: none; display: grid; gap: var(--s3); counter-reset: st; }
.steps li{
  position: relative; padding: var(--s4) var(--s4) var(--s4) 84px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.steps li::before{
  counter-increment: st; content: counter(st, decimal-leading-zero);
  position: absolute; left: var(--s4); top: var(--s4);
  font-family: var(--font-code); font-weight: 700; font-size: var(--fs-lg);
  color: var(--brand-700); background: var(--brand-soft);
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
}
.steps li b{ display: block; font-size: var(--fs-lg); margin-bottom: 4px; }
.steps li span{ color: var(--muted); }

/* —— 对比（A/B） —— */
.compare{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.compare .col{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); box-shadow: var(--sh-1); }
.compare .col.hi{ border-color: var(--brand); box-shadow: var(--sh-2); }
.compare .col h4{ display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); }
.compare .col h4 .tag{ font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-ink); }
.compare .col.red h4 .tag{ background: var(--accent-soft); color: #991B1B; }
.compare .col p{ margin: 0; }

/* —— 大字焦点页 —— */
.bigslide{
  margin: var(--s4) 0; padding: clamp(28px, 5vw, 64px);
  border-radius: var(--r-lg); background:
    radial-gradient(900px 380px at 12% -10%, var(--brand-soft), transparent 70%),
    var(--surface-2);
  border: 1px solid #D8EBFB;
}
.bigslide .lead{ font-size: var(--fs-sm); font-weight: 800; letter-spacing: .1em; color: var(--brand-700); }
.bigslide .huge{ font-size: clamp(24px, 3.4vw, 38px); font-weight: 900; line-height: 1.2; margin: 8px 0 14px; }
.bigslide .huge em{ font-style: normal; color: var(--accent); }
.bigslide p{ margin: 0; font-size: var(--fs-lg); color: var(--ink-2); }

/* —— 提示块 —— */
.callout{
  display: flex; gap: var(--s3); padding: var(--s4);
  border-radius: var(--r); border: 1px solid #D8EBFB; background: var(--brand-soft);
  margin: var(--s4) 0;
}
.callout .ic{ flex: none; width: 30px; height: 30px; color: var(--brand-700); }
.callout .tx b{ display: block; margin-bottom: 4px; }
.callout .tx{ font-size: var(--fs-body); color: var(--brand-ink); }
.callout.red{ background: var(--accent-soft); border-color: #FBCFE8; }
.callout.red .ic,.callout.red .tx{ color: #991B1B; }
.callout.ok{ background: #E9FBF3; border-color: #BBF7DC; }
.callout.ok .ic,.callout.ok .tx{ color: #065F46; }

/* —— 代码块 —— */
.codebox{
  margin: var(--s4) 0; border-radius: var(--r); overflow: hidden;
  border: 1px solid #16324A; background: #0B2239; box-shadow: var(--sh-2);
}
.codebox .bar{ display: flex; align-items: center; gap: 8px; padding: 10px var(--s3); background: #0E2B47; }
.codebox .bar i{ width: 11px; height: 11px; border-radius: 50%; background: #FF6058; }
.codebox .bar i:nth-child(2){ background: #FFBD2E; }
.codebox .bar i:nth-child(3){ background: #28C840; }
.codebox .bar b{ margin-left: 8px; color: #9FD0F0; font-size: var(--fs-sm); font-weight: 600; }
.codebox .bar button{ margin-left: auto; background: #1C4266; color: #CFE7FA; border: 0; border-radius: 8px; padding: 5px 12px; font-size: 14px; }
.codebox .bar button:hover{ background: #245580; }
.codebox pre{ margin: 0; padding: var(--s4); overflow-x: auto; }
.codebox code{ background: none; border: 0; padding: 0; color: #DCEBFB; font-size: 16px; line-height: 1.7; }
.codebox .cm{ color: #7FA6C6; }
.codebox .hl{ color: #7EE0A9; }
.codebox .rd{ color: #FF9A8B; }

/* —— 标签 / 胶囊 —— */
.chips{ display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s3) 0; }
.chip{
  font-size: var(--fs-sm); font-weight: 600; padding: 8px 16px; border-radius: var(--r-full);
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink-2);
}
.chip.b{ background: var(--brand-soft); border-color: #C7E6FA; color: var(--brand-ink); }
.chip.r{ background: var(--accent-soft); border-color: #FBD0D0; color: #991B1B; }

/* —— 名词小卡（概念速览用） —— */
.termlist{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s3); }
.term{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); }
.term b{ display: block; font-size: var(--fs-lg); }
.term small{ display: block; color: var(--brand-700); font-family: var(--font-code); font-size: 14px; margin-bottom: 4px; }
.term span{ color: var(--muted); }

/* —— 图注 —— */
.fignote{ text-align: center; color: var(--muted); font-size: var(--fs-sm); margin-top: -6px; }

/* —— 数据表（数据库/对照表） —— */
.dtable-wrap{ margin: var(--s4) 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); background: var(--surface); }
.dtable{ width: 100%; border-collapse: collapse; min-width: 520px; }
.dtable caption{ text-align: left; padding: var(--s3) var(--s4) 0; font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.dtable caption span{ display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); margin-top: 4px; }
.dtable th{
  text-align: left; padding: 14px var(--s4); white-space: nowrap;
  background: var(--brand-soft); color: var(--brand-ink); font-size: var(--fs-sm); font-weight: 800;
  border-bottom: 1px solid #CDE9FB;
}
.dtable td{
  padding: 14px var(--s4); border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--fs-body); white-space: nowrap;
}
.dtable tbody tr:last-child td{ border-bottom: 0; }
.dtable tbody tr:nth-child(even) td{ background: var(--surface-2); }
.dtable tbody tr:hover td{ background: var(--brand-soft); }
.dtable tfoot td{ padding: 12px var(--s4); color: var(--muted); font-size: var(--fs-sm); background: var(--surface-2); }

/* —— 图示容器 —— */
.figure{ margin: var(--s4) 0; padding: var(--s4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.figure svg{ width: 100%; height: auto; }

/* —— 步骤 / 对比里的子列表 —— */
.steps .sub, .compare .sub{ list-style: none; margin-top: 12px; display: grid; gap: 9px; }
.steps .sub li, .compare .sub li{ position: relative; padding-left: 24px; color: var(--ink-2); font-size: var(--fs-body); }
.steps .sub li::before, .compare .sub li::before{
  content: ""; position: absolute; left: 4px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
}
.compare .col.red .sub li::before{ background: var(--accent); }
.compare .col.hi .sub li::before{ background: var(--brand); }

/* —— 已学标记按钮 —— */
.foot-row{ display: flex; justify-content: center; margin-top: var(--s6); }
.markdone{
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2);
  font-size: var(--fs-body); font-weight: 700;
}
.markdone:hover{ border-color: var(--brand); color: var(--brand-700); transform: translateY(-2px); }
.markdone.on{ background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.markdone svg{ width: 20px; height: 20px; }

/* —— 互动演示（13 课：HTML / CSS / JS） —— */
.demo{ margin: var(--s4) 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: var(--s4); }
.demo-stage{ display: grid; place-items: center; padding: var(--s4) 0; }
.demo-card{
  width: min(440px, 100%); background: #fff; border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: var(--s4); text-align: center;
  transition: background .35s, border-color .35s, border-radius .35s, transform .25s, box-shadow .35s;
}
.demo-card .dc-title{ margin: 0 0 8px; font-size: var(--fs-h3); }
.demo-card .dc-text{ margin: 0 0 var(--s3); color: var(--muted); }
.demo-card .dc-btn{
  padding: 10px 24px; border-radius: var(--r-full); border: 1px solid var(--brand);
  background: var(--brand); color: #fff; font-weight: 700; transition: background .3s;
}
.demo-card.pulse-once{ transform: scale(1.05); box-shadow: var(--sh-3); }

.demo-card.css-a{ background: var(--brand-soft); border-color: var(--brand); }
.demo-card.css-a .dc-title{ color: var(--brand-700); }
.demo-card.css-b{ background: #E9FBF3; border-color: #10B981; border-radius: 28px; }
.demo-card.css-b .dc-title{ color: #065F46; }
.demo-card.css-b .dc-btn{ background: #10B981; border-color: #10B981; }
.demo-card.css-c{ background: #0B2239; border-color: #0B2239; }
.demo-card.css-c .dc-title{ color: #7EE0A9; }
.demo-card.css-c .dc-text{ color: #9FD0F0; }

.demo-controls{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: var(--s3); }
.demo-btn{
  padding: 9px 18px; border-radius: var(--r-full); border: 1px solid var(--line-strong);
  background: #fff; font-weight: 700; font-size: var(--fs-sm);
}
.demo-btn:hover{ border-color: var(--brand); color: var(--brand-700); }
.demo-btn.ghost{ color: var(--muted); }
.demo-hint{ text-align: center; color: var(--muted); font-size: var(--fs-sm); margin: var(--s3) 0 0; }

/* 演示：左效果 右代码 */
.demo-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s4); align-items: start; }
.demo-code{ display: grid; gap: var(--s3); }
.code-item{ border: 1px solid #16324A; border-radius: var(--r); overflow: hidden; background: #0B2239; transition: box-shadow .2s, border-color .2s; }
.code-item .code-tag{ padding: 8px 14px; background: #0E2B47; color: #9FD0F0; font-family: var(--font-code); font-size: 13px; font-weight: 700; }
.code-item pre{ margin: 0; padding: var(--s3) var(--s4); overflow-x: auto; }
.code-item code{ background: none; border: 0; padding: 0; color: #DCEBFB; font-family: var(--font-code); font-size: 13px; line-height: 1.75; white-space: pre; }
.code-item.is-active{ border-color: var(--brand); box-shadow: 0 0 0 2px rgba(14,165,233,.3); }
.code-item.flash{ box-shadow: 0 0 0 3px rgba(220,38,38,.4); }
@media (max-width: 900px){ .demo-grid{ grid-template-columns: 1fr; } }

/* —— 首页：开发流程 —— */
.flow{ list-style: none; margin: var(--s5) 0; }
.flow-step{ position: relative; padding: 0 0 var(--s5) 78px; }
.flow-step::before{ content: ""; position: absolute; left: 26px; top: 52px; bottom: 4px; width: 2px; background: var(--line-strong); }
.flow-step:last-child{ padding-bottom: 0; }
.flow-step:last-child::before{ display: none; }
.fs-no{
  position: absolute; left: 0; top: 0; width: 54px; height: 54px; border-radius: 16px;
  background: var(--brand); color: #fff; font-family: var(--font-code); font-size: 19px; font-weight: 800;
  display: grid; place-items: center; box-shadow: var(--sh-2);
}
.fs-body > b{ font-size: var(--fs-h4); }
.fs-body > p{ color: var(--muted); margin: 4px 0 12px; }
.fs-chs{ display: flex; flex-wrap: wrap; gap: 8px; }
.fs-chs a, .fs-chs span{
  font-size: var(--fs-sm); padding: 5px 13px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-2);
}
.fs-chs a:hover{ border-color: var(--brand); color: var(--brand-700); background: var(--brand-soft); }
.fs-chs span.lock{ color: var(--muted); border-style: dashed; background: var(--surface-2); }

/* —— AI 对话窗口（00 课） —— */
.chatdemo{ margin: var(--s4) 0; }
.chat-window{ border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--sh-2); }
.chat-bar{ display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0E2B47; }
.chat-bar i{ width: 10px; height: 10px; border-radius: 50%; background: #FF6058; }
.chat-bar i:nth-child(2){ background: #FFBD2E; }
.chat-bar i:nth-child(3){ background: #28C840; }
.chat-bar span{ margin-left: 8px; color: #9FD0F0; font-size: 13px; font-weight: 700; font-family: var(--font-code); }
.chat-body{ padding: var(--s4); display: grid; gap: 12px; max-height: 440px; overflow: auto; background: var(--surface-2); }
.chat-body:empty{ display: none; }
.bubble{ max-width: 90%; padding: 10px 14px; border-radius: 14px; font-size: var(--fs-body); line-height: 1.65; }
.bubble.user{ justify-self: end; background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.bubble.ai{ justify-self: start; background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble.ai .mini{ display: grid; gap: 6px; margin-top: 8px; }
.bubble.ai .mini span{ display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: var(--fs-sm); }
.bubble.ai .mini span::before{ content: "✓"; color: var(--ok); font-weight: 800; }
.bubble pre{ margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #0B2239; color: #DCEBFB; font-family: var(--font-code); font-size: 13px; line-height: 1.7; overflow: auto; white-space: pre; }
.bubble .file{ display: inline-flex; align-items: center; gap: 6px; margin: 10px 6px 0 0; padding: 4px 11px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-ink); font-size: 12px; font-family: var(--font-code); }
.bubble .chat-done{ margin: 10px 0 0; color: var(--ok); font-weight: 700; }
.typing::after{ content: "▋"; color: var(--brand); margin-left: 2px; animation: blink 1s steps(1) infinite; }
.chat-foot{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: #fff; }
.cf-input{ flex: 1; color: var(--muted); font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: var(--r-full); padding: 8px 14px; }
.cf-replay{ border: 1px solid var(--line-strong); background: #fff; border-radius: var(--r-full); padding: 7px 15px; font-size: var(--fs-sm); font-weight: 700; }
.cf-replay:hover{ border-color: var(--brand); color: var(--brand-700); }

/* —— 代码前后对照 —— */
.codepair{ margin: var(--s4) 0; }
.cp-title{ font-size: var(--fs-h4); font-weight: 800; margin-bottom: var(--s3); }
.cp-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }
@media (max-width: 900px){ .cp-grid{ grid-template-columns: 1fr; } }
.code-panel{ border: 1px solid #16324A; border-radius: var(--r); overflow: hidden; background: #0B2239; }
.code-panel .code-tag{ padding: 9px 14px; font-family: var(--font-code); font-size: 13px; font-weight: 700; }
.code-panel.before .code-tag{ background: #FEE2E2; color: #991B1B; }
.code-panel.after .code-tag{ background: var(--brand-soft); color: var(--brand-ink); }
.code-panel.plain .code-tag{ background: #123253; color: #CFE7FA; }
.code-panel pre{ margin: 0; padding: var(--s3) var(--s4); overflow: auto; max-height: 430px; }
.code-panel code{ background: none; border: 0; padding: 0; color: #DCEBFB; font-family: var(--font-code); font-size: 13px; line-height: 1.75; white-space: pre; }
.cp-note{ margin-top: var(--s3); color: var(--muted); font-size: var(--fs-sm); }