/* ═══ Buddylala Course SEO Extension Styles ═══ */
/* Checklist */
.checklist{background:#f7fafc;border-radius:12px;padding:1.25rem 1.5rem;margin:1.25rem 0;border:1px solid #edf2f7}
.checklist-title{font-weight:800;color:#1a365d;margin:0 0 .8rem;font-size:.95rem;display:flex;align-items:center;gap:.45rem}
.checklist ul{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding-left:1.8rem;margin-bottom:.55rem;line-height:1.7}
.checklist li::before{content:'';position:absolute;left:0;top:.35em;width:14px;height:14px;border:2px solid #cbd5e0;border-radius:4px;background:#fff}
.checklist li strong{color:#1a365d}
/* Steps */
.steps{counter-reset:step;margin:1.25rem 0;padding:0;list-style:none}
.steps>li{counter-increment:step;position:relative;padding-left:3rem;margin-bottom:1.1rem;min-height:2rem}
.steps>li::before{content:counter(step);position:absolute;left:0;top:.1em;width:2.1rem;height:2.1rem;border-radius:50%;background:linear-gradient(135deg,#ed8936,#f6ad55);color:#fff;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.steps>li strong{color:#1a365d}
/* Prompt / code example box */
.prompt-box{background:#1a365d;border-radius:12px;padding:1.25rem 1.4rem;margin:1.25rem 0;color:#e2e8f0}
.prompt-box .prompt-label{font-size:.68rem;font-weight:800;letter-spacing:.1em;color:#f6ad55;text-transform:uppercase;display:block;margin-bottom:.6rem}
.prompt-box code,.prompt-box .prompt-text{display:block;background:rgba(255,255,255,.08);border-radius:8px;padding:.9rem 1.1rem;font-family:ui-monospace,Menlo,monospace;font-size:.85rem;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.prompt-box .prompt-result{margin-top:.7rem;font-size:.85rem;color:#a0aec0;line-height:1.7}
.prompt-box .prompt-result b{color:#68d391}
/* Compare table */
.cmp-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.cmp-table th{background:#1a365d;color:#fff;padding:.8rem 1rem;text-align:left;font-weight:700}
.cmp-table td{padding:.75rem 1rem;border-bottom:1px solid #edf2f7;vertical-align:top;line-height:1.65}
.cmp-table tr:nth-child(even) td{background:#f7fafc}
.cmp-table tr:last-child td{border-bottom:none}
@media(max-width:640px){.cmp-table{display:block;overflow-x:auto;white-space:nowrap}}
/* Mistakes (wrong vs right) */
.mistakes{margin:1.25rem 0}
.mistake-item{display:flex;gap:.9rem;margin-bottom:.8rem;border-radius:10px;overflow:hidden}
.mistake-item .bad,.mistake-item .good{padding:.8rem 1rem;font-size:.88rem;line-height:1.65;flex:1}
.mistake-item .bad{background:#fff5f5;border-left:4px solid #e53e3e;color:#742a2a}
.mistake-item .good{background:#f0fff4;border-left:4px solid #38a169;color:#22543d}
.mistake-item .tag{font-weight:800;font-size:.68rem;letter-spacing:.08em;display:block;margin-bottom:.3rem;opacity:.75}
@media(max-width:640px){.mistake-item{flex-direction:column}}
/* Key takeaways */
.key-points{background:linear-gradient(135deg,#ebf8ff,#e6fffa);border-radius:12px;padding:1.25rem 1.5rem;margin:1.25rem 0;border-left:4px solid #2b6cb0}
.key-points .kp-title{font-weight:800;color:#2b6cb0;margin:0 0 .7rem;font-size:.95rem}
.key-points ul{margin:0;padding-left:1.2rem}
.key-points li{margin-bottom:.45rem}
/* Chapter divider */
.chapter-divider{display:flex;align-items:center;gap:1rem;margin:3rem 0 1.5rem;color:#a0aec0;font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.chapter-divider::before,.chapter-divider::after{content:'';flex:1;height:1px;background:#e2e8f0}
/* Extend learning links */
.extend-learning{background:#f7fafc;border:1px solid #edf2f7;border-radius:14px;padding:1.5rem 1.75rem;margin:2.5rem 0 1.5rem}
.extend-learning h3{margin:0 0 .9rem;font-size:1rem;color:#1a365d;display:flex;align-items:center;gap:.5rem}
.extend-learning h3 svg{width:18px;height:18px}
.extend-learning .el-group{margin-bottom:1rem}
.extend-learning .el-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:#718096;text-transform:uppercase;margin-bottom:.45rem;display:block}
.extend-learning ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.5rem}
.extend-learning li{margin:0}
.extend-learning a{color:#2b6cb0;text-decoration:none;font-size:.9rem;padding:.15rem 0;display:inline-block;transition:color .2s}
.extend-learning a:hover{color:#ed8936}
@media(max-width:640px){.extend-learning ul{grid-template-columns:1fr}}


/* ═══ Course spec + personal progress card (DL.AI sidebar meta style) ═══ */
.course-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem; background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; }
.course-spec .item { display: flex; flex-direction: column; gap: .2rem; }
.course-spec .k { font-size: .72rem; color: #718096; letter-spacing: .05em; }
.course-spec .v { font-size: .95rem; font-weight: 700; color: #1a365d; }
.course-spec .v.ok { color: #38a169; }
.course-spec .v.doing { color: #ed8936; }

/* ═══ Desktop 兩欄：sticky 大綱 sidebar（DL.AI lesson syllabus 模式）═══ */
@media (min-width: 1100px) {
  .content.has-sidebar {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .content.has-sidebar .toc.toc-sticky {
    position: sticky;
    top: 80px;
    margin-bottom: 0;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .content.has-sidebar .toc.toc-sticky ol {
    grid-template-columns: 1fr;
  }
  .content.has-sidebar .article-col {
    max-width: 760px;
    min-width: 0;
    padding-bottom: 3.5rem; /* 浮動章節導航列緩衝 */
  }
}
@media (max-width: 1099px) {
  .content.has-sidebar { display: block; }
  .content.has-sidebar .article-col { padding-bottom: 3.5rem; }
}

/* ═══ TOC scrollspy + 已讀 ✓ ═══ */
.toc a.read::before { content: '\2713 '; color: #38a169; font-weight: 700; }
.toc ol li a.active {
  color: #ed8936 !important; font-weight: 700;
  background: #fff7ed; border-radius: 6px;
  padding: .1rem .4rem; margin: 0 -.4rem;
}

/* ═══ 浮動章節導航列（DL.AI < > 箭嘴對應）═══ */
.chapnav {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%) translateY(140%);
  display: flex; align-items: center; gap: .6rem; z-index: 9000;
  background: #1a365d; color: #fff; padding: .5rem .7rem; border-radius: 99px;
  box-shadow: 0 10px 30px rgba(26,54,93,.35);
  transition: transform .3s ease, opacity .3s ease; opacity: 0;
}
.chapnav.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.chapnav button {
  background: transparent; border: none; color: #fff; font-size: .85rem; font-weight: 600;
  padding: .35rem .7rem; border-radius: 99px; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.chapnav button:hover:not(:disabled) { background: rgba(255,255,255,.15); }
.chapnav button:disabled { opacity: .35; cursor: default; }
.chapnav .cn-next { background: #ed8936; }
.chapnav .cn-next:hover:not(:disabled) { filter: brightness(1.08); background: #ed8936; }
.chapnav .cn-pos { font-size: .78rem; opacity: .8; min-width: 3.2rem; text-align: center; }
@media (max-width: 640px) {
  .chapnav { bottom: .7rem; }
  .chapnav button { font-size: .8rem; padding: .3rem .5rem; }
}

/* ═══ 「✓ 你會學到」卡（DL.AI What you'll learn 對應）═══ */
.learn-card {
  background: #fff7ed; border: 1px solid #fbd38d; border-left: 4px solid #ed8936;
  border-radius: 10px; padding: 1rem 1.25rem; margin: 1.25rem 0;
}
.learn-card .lc-title {
  font-weight: 800; color: #c05621; font-size: .95rem; margin-bottom: .5rem;
  letter-spacing: .02em;
}
.learn-card p { margin: 0 0 .4rem; font-weight: 700; color: #7b341e; font-size: .92rem; }
.learn-card ul { margin: .25rem 0 0; padding-left: 0; list-style: none; }
.learn-card li {
  position: relative; padding-left: 1.5rem; margin-bottom: .35rem;
  font-size: .97rem; line-height: 1.7;
}
.learn-card li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: #38a169; font-weight: 800;
}

/* ═══ Code block（markdown fenced 修復還原）═══ */
pre.code-block {
  background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: .85rem 1rem; margin: 1rem 0; overflow-x: auto;
  font-size: .9rem; line-height: 1.6; color: #2d3748;
}
pre.code-block code { background: none; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ═══ 完課區塊 rail：闊度同 .content container（1180/2rem padding）完全齊平、整條居中 ═══ */
.course-footer-rail { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.course-footer-rail .course-nav { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.course-footer-rail .faq-section { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.course-footer-rail .cta-box { max-width: none; margin-left: 0; margin-right: 0; }

/* ═══ 行動計劃卡：同延伸學習視覺配對（消滅分散感）═══ */
.action-plan {
  background: #f7fafc; border: 1px solid #edf2f7; border-radius: 14px;
  padding: 1.5rem 1.75rem; margin: 1.5rem 0 2rem;
}
.action-plan > h3 {
  margin: 0 0 1rem; font-size: 1.05rem; color: #1a365d;
  display: flex; align-items: center; gap: .5rem;
}
.action-plan > h3::before { content: '\1F4C5'; font-size: 1rem; } /* 📅 */
.action-plan .checklist {
  background: transparent; border: none; padding: 0; margin: 0 0 1.1rem;
}
.action-plan .checklist:last-of-type { margin-bottom: 0; }
.action-plan .callout-summary { margin-bottom: 0; }

/* ═══ 完課賀語 banner（rail 闊版）— 保持原 navy 漸層視覺 ═══ */
.course-footer-rail .completion-banner {
  margin: 0; padding: 1.5rem 1.75rem; border-radius: 12px;
  background: linear-gradient(135deg, #1a365d, #2c5282); color: #fff;
}
.course-footer-rail .completion-banner strong { color: #f6ad55; }

/* ═══ 規格卡：置於目錄/正文之上、橫跨兩欄（grid 全寬列）═══ */
.content > .course-spec { grid-column: 1 / -1; margin: 1rem 0 0; }

/* ═══ 回到頂部掣：rail 最尾（CTA 之後、footer 之前）— ghost pill、品牌 navy+橙 ═══ */
.back-to-top {
  display: flex; width: -moz-fit-content; width: fit-content;
  align-items: center; gap: .5rem;
  margin: 1.75rem auto 2.5rem; padding: .7rem 1.6rem;
  min-height: 44px; /* 觸控目標 */
  font: 600 .9rem/1 inherit; color: #1a365d;
  background: #fff; border: 1.5px solid rgba(26, 54, 93, .9); border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.back-to-top svg { color: #ed8936; flex: none; }
.back-to-top:hover { border-color: #ed8936; color: #ed8936; transform: translateY(-2px); }
.back-to-top:focus-visible { outline: 2px solid #ed8936; outline-offset: 2px; }
.back-to-top:active { transform: translateY(0); }
@media (max-width: 640px) {
  .back-to-top { display: flex; width: 100%; justify-content: center; }
}