/* ============================================
   Uedu CodeLab 程式互動學院
   前綴：cl-（共用）、clh-（hero）、clp-（首頁／路徑）、clo-（課頁大綱）、clb-（區塊）、
         clt-（執行軌跡播放器）、clw-（概念小工具）、clk-（導覽）、clc-（小測驗）、cly-（實作）、clm-（我的學習）
   ============================================ */
:root {
    --cl-blue: #3C6F9A;
    --cl-blue-dk: #2d5578;
    --cl-blue-bg: rgba(60, 111, 154, 0.08);
    --cl-teal: #3C938A;
    --cl-teal-dk: #2d6e64;
    --cl-teal-bg: #e4f3f0;
    --cl-ink: #1e293b;
    --cl-muted: #64748b;
    --cl-line: #e2e8f0;
    --cl-gold: #C8A24B;
    --cl-red: #B5524C;
    --cl-red-bg: #fdf0ef;
    --cl-term: #1e293b;
    --cl-mono: Consolas, "Cascadia Mono", Menlo, "Courier New", monospace;
}

.cl-page { background: #f8fafc; color: var(--cl-ink); padding-bottom: 96px; min-height: 70vh; }
.cl-page a { color: var(--cl-blue); }
.cl-page code { color: #9b2c53; background: #f3f4f6; padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }

/* ---------- 按鈕：一律膠囊 ---------- */
.cl-btn {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 50rem; cursor: pointer;
    padding: 6px 18px; font-size: 14px; font-weight: 600; line-height: 1.4; border: 1px solid transparent;
    text-decoration: none !important; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s;
}
.cl-btn-sm { padding: 4px 12px; font-size: 12.5px; }
.cl-btn-primary { background: var(--cl-blue); color: #fff !important; }
.cl-btn-primary:hover { background: var(--cl-blue-dk); }
.cl-btn-soft { background: var(--cl-blue-bg); border-color: rgba(60, 111, 154, 0.4); color: var(--cl-blue) !important; }
.cl-btn-soft:hover { background: rgba(60, 111, 154, 0.18); color: var(--cl-blue-dk) !important; }
.cl-btn-ghost { background: #fff; border-color: #cbd2d9; color: #52606d !important; }
.cl-btn-ghost:hover { border-color: #9aa5b1; }
.cl-btn-text { background: none; border: none; color: var(--cl-blue) !important; padding-left: 4px; padding-right: 4px; }
.cl-btn-white { background: #fff; color: var(--cl-blue) !important; }
.cl-btn-white:hover { background: #eef4f9; }
.cl-btn:disabled, .cl-btn.is-disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 標籤 chips ---------- */
.cl-chip { display: inline-block; border-radius: 50rem; padding: 1px 10px; font-size: 0.72rem; font-weight: 700; line-height: 1.6; }
.cl-chip-interactive { background: var(--cl-teal-bg); color: var(--cl-teal-dk); }
.cl-chip-practice { background: rgba(60, 111, 154, .12); color: var(--cl-blue); }
.cl-chip-guide { background: #eef1f5; color: #52606d; }
.cl-chip-video { background: rgba(200, 162, 75, .15); color: #8a6a1f; }
.cl-chip-soon { background: #eef1f5; color: #7b8794; }
.cl-chip-ready { background: var(--cl-teal-bg); color: var(--cl-teal-dk); }
.cl-chip-done { background: var(--cl-teal); color: #fff; }

/* ---------- Hero（full-bleed） ---------- */
.clh-hero { color: #fff; padding: 34px 0 30px; border-radius: 0; }
.clh-hero.is-compact { padding: 24px 0 20px; }
.clh-crumb { font-size: 13px; opacity: .85; margin-bottom: 6px; }
.clh-crumb a { color: #fff !important; text-decoration: underline; }
.clh-kicker { font-size: .8rem; letter-spacing: 1px; font-weight: 700; opacity: .85; }
.clh-title { font-size: 1.85rem; font-weight: 700; margin: 4px 0 8px; color: #fff; }
.clh-sub { font-size: 1rem; opacity: .92; max-width: 760px; }
.clh-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 14px; }
.clh-meta .cl-chip { background: rgba(255, 255, 255, .2); color: #fff; }
.clh-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.clh-ring { position: relative; width: 76px; height: 76px; flex: 0 0 76px; }
.clh-ring svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.clh-ring circle { fill: none; stroke-width: 7; }
.clh-ring .clh-ring-bg { stroke: rgba(255, 255, 255, .25); }
.clh-ring .clh-ring-fg { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.clh-ring-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.clh-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- 首頁與軌道頁 ---------- */
.cl-section-h { font-size: 1.2rem; font-weight: 700; margin: 28px 0 12px; color: var(--cl-ink); }
.cl-section-sub { color: var(--cl-muted); font-size: 14px; margin: -6px 0 14px; }
.clp-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.clp-track { display: block; background: #fff; border: 1px solid var(--cl-line); border-radius: 14px; padding: 16px 18px; color: var(--cl-ink) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.clp-track:hover { border-color: var(--cl-blue); box-shadow: 0 0 0 3px rgba(60, 111, 154, .12); }
.clp-track.is-soon { opacity: .78; }
.clp-track-icon { font-size: 26px; line-height: 1; }
.clp-track-name { font-weight: 700; font-size: 1.05rem; margin: 8px 0 2px; }
.clp-track-tag { font-size: 13px; color: var(--cl-muted); min-height: 38px; }
.clp-track-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--cl-muted); }
.clp-spirit { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.clp-spirit-card { background: #fff; border: 1px solid var(--cl-line); border-radius: 14px; padding: 16px 18px; }
.clp-spirit-card i { font-size: 22px; color: var(--cl-teal); }
.clp-spirit-card h4 { font-size: 1rem; font-weight: 700; margin: 8px 0 4px; }
.clp-spirit-card p { font-size: 13.5px; color: var(--cl-muted); margin: 0; }

.clp-steps { list-style: none; padding: 0; margin: 0; position: relative; }
.clp-step { display: flex; gap: 14px; position: relative; padding-bottom: 12px; }
.clp-step::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px; background: var(--cl-line); }
.clp-step:last-child::after { display: none; }
.clp-dot { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid #cbd2d9; color: #52606d; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; position: relative; z-index: 1; }
.clp-step.is-done .clp-dot { background: var(--cl-teal); border-color: var(--cl-teal); color: #fff; }
.clp-step.is-started .clp-dot { border-color: var(--cl-blue); color: var(--cl-blue); box-shadow: 0 0 0 3px rgba(60, 111, 154, .15); }
.clp-step.is-soon .clp-dot { border-style: dashed; color: #9aa5b1; }
.clp-card { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--cl-line); border-radius: 12px; padding: 12px 16px; color: var(--cl-ink) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
a.clp-card:hover { border-color: var(--cl-blue); box-shadow: 0 0 0 3px rgba(60, 111, 154, .1); }
.clp-step.is-soon .clp-card { background: #fbfcfd; }
.clp-card-main { flex: 1 1 auto; min-width: 0; }
.clp-card-title { font-weight: 700; font-size: 15px; }
.clp-card-title small { color: var(--cl-muted); font-weight: 600; margin-right: 6px; }
.clp-card-sub { font-size: 13px; color: var(--cl-muted); margin-top: 2px; }
.clp-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--cl-muted); }
.clp-card-side { flex: 0 0 auto; text-align: right; }
.clp-status { font-size: 12.5px; color: var(--cl-muted); margin-bottom: 4px; min-height: 18px; }
.clp-bar { height: 4px; background: var(--cl-line); border-radius: 4px; overflow: hidden; width: 90px; margin-left: auto; }
.clp-bar > span { display: block; height: 100%; background: var(--cl-teal); width: 0; transition: width .3s; }

/* ---------- 課頁版面 ---------- */
.cl-body { padding-top: 24px; }
.cl-cols { display: flex; gap: 24px; align-items: flex-start; }
.clo-side { flex: 0 0 250px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; background: #fff; border: 1px solid var(--cl-line); border-radius: 12px; padding: 14px 12px; }
.clo-head { font-weight: 700; font-size: 13px; color: var(--cl-muted); margin: 0 6px 8px; letter-spacing: .5px; }
.clo-list { list-style: none; margin: 0; padding: 0; }
.clo-item a { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--cl-ink) !important; font-size: 13.5px; text-decoration: none !important; }
.clo-item a:hover { background: #f1f5f9; }
.clo-item.is-active a { background: var(--cl-blue-bg); color: var(--cl-blue) !important; font-weight: 600; }
.clo-tick { flex: 0 0 16px; color: #cbd2d9; margin-top: 2px; font-size: 14px; }
.clo-item.is-done .clo-tick { color: var(--cl-teal); }
.clo-item.is-prose .clo-tick { visibility: hidden; }
.clo-kind { margin-left: auto; font-style: normal; font-size: 11px; color: var(--cl-muted); white-space: nowrap; }
.clo-nav { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cl-line); }
.clo-nav .cl-btn { justify-content: center; }
.clo-related { margin-top: 12px; font-size: 13px; }
.clo-related a { display: block; padding: 2px 8px; }
.cl-main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 991px) {
    .cl-cols { flex-direction: column; align-items: stretch; }
    .clo-side { position: static; width: 100%; max-height: none; flex-basis: auto; }
}

/* ---------- 區塊 ---------- */
.clb { background: #fff; border: 1px solid var(--cl-line); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; scroll-margin-top: 80px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575px) { .clb { padding: 14px 14px; } .clh-title { font-size: 1.5rem; } .clh-ring { display: none; } }
.clb-h { font-size: 1.12rem; font-weight: 700; margin: 0 0 10px; color: var(--cl-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clb-h .cl-chip { font-size: .7rem; }
.clb-lead { color: #334155; font-size: 14.5px; margin-bottom: 12px; }
.clb-lead p:last-child { margin-bottom: 0; }
.clb-prose { font-size: 15px; line-height: 1.8; }
.clb-prose h2 { font-size: 1.25rem; font-weight: 700; margin: 4px 0 12px; }
.clb-prose h3 { font-size: 1.08rem; font-weight: 700; margin: 18px 0 8px; }
.clb-prose pre { background: var(--cl-term); color: #e2e8f0; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; overflow-x: auto; }
.clb-prose pre code { background: none; color: inherit; padding: 0; }
.clb-prose table { border-collapse: collapse; margin: 10px 0; font-size: 14px; display: block; max-width: 100%; overflow-x: auto; }
.clb-prose th, .clb-prose td { border: 1px solid var(--cl-line); padding: 6px 10px; }
.clb-prose th { background: #f8fafc; }
.clb-prose blockquote { border-left: 3px solid var(--cl-teal); background: var(--cl-teal-bg); margin: 10px 0; padding: 8px 14px; border-radius: 0 8px 8px 0; }
.clb-prose blockquote p:last-child { margin-bottom: 0; }
.clb-objectives { background: linear-gradient(149deg, rgba(60,111,154,.06), rgba(60,147,138,.06)); }
.clb-objectives ul { margin: 0; padding-left: 20px; }
.cl-lesson-end { text-align: center; padding: 16px 0 6px; }
.cl-lesson-end .cl-done-msg { color: var(--cl-teal-dk); font-weight: 700; margin-bottom: 10px; display: none; }
.cl-lesson-end.is-done .cl-done-msg { display: block; }

/* ---------- 執行軌跡播放器 ---------- */
.clt { outline: none; }
.clt:focus-visible { box-shadow: 0 0 0 3px rgba(60, 111, 154, .25); border-radius: 10px; }
.clt-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.clt-transport { display: flex; align-items: center; gap: 4px; }
.clt-ib { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #cbd2d9; background: #fff; color: #52606d; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; padding: 0; }
.clt-ib:hover { background: var(--cl-blue-bg); color: var(--cl-blue); border-color: rgba(60, 111, 154, .4); }
.clt-ib-play { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; }
.clt-ib-play:hover { background: var(--cl-blue-dk); color: #fff; }
.clt-speed { margin-left: 6px; border: 1px solid #cbd2d9; border-radius: 50rem; padding: 3px 10px; font-size: 12.5px; color: #52606d; background: #fff; }
.clt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.clt-body { display: grid; grid-template-columns: minmax(260px, 44%) 1fr; gap: 12px; }
@media (max-width: 991px) { .clt-body { grid-template-columns: 1fr; } }
.clt-code { border: 1px solid var(--cl-line); border-radius: 10px; overflow: hidden; min-width: 0; }
.clt-code .CodeMirror { height: auto; font-family: var(--cl-mono); font-size: 13.5px; line-height: 1.55; }
.clt-code .CodeMirror-scroll { max-height: 520px; }
.clt-code .CodeMirror-gutters { background: #f8fafc; border-right: 1px solid var(--cl-line); }
.clt-ptr { width: 16px; }
.clt-ptr-mark { color: var(--cl-red); font-size: 12px; padding-left: 3px; }
.clt-line-cur { background: #fff3c4 !important; }
.clt-line-prev { background: #fffbea !important; }
.clt-line-err { background: var(--cl-red-bg) !important; }
.clt-mem { position: relative; overflow: auto; background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 10px; min-height: 220px; max-height: 560px; padding: 10px; }
.clt-mem-inner { position: relative; display: flex; gap: 46px; align-items: flex-start; min-width: max-content; }
.clt-col { min-width: 180px; }
.clt-col-h { font-size: 11.5px; font-weight: 700; color: var(--cl-muted); letter-spacing: .5px; margin-bottom: 6px; }
.clt-frame { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 8px; transition: opacity .25s, border-color .25s; }
.clt-frame.is-top { border-color: var(--cl-blue); box-shadow: 0 0 0 2px rgba(60,111,154,.12); }
.clt-frame-h { font-family: var(--cl-mono); font-size: 12.5px; font-weight: 700; padding: 4px 10px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; border-radius: 8px 8px 0 0; color: #334155; }
.clt-frame.is-top .clt-frame-h { background: var(--cl-blue-bg); color: var(--cl-blue-dk); }
.clt-vars { border-collapse: collapse; font-family: var(--cl-mono); font-size: 13px; width: 100%; }
.clt-vars th { text-align: right; font-weight: 600; color: #475569; padding: 3px 8px 3px 10px; white-space: nowrap; border-right: 1px dashed #e2e8f0; }
.clt-vars td { padding: 3px 10px; white-space: nowrap; }
.clt-vars tr.is-ret th { color: var(--cl-teal-dk); }
.clt-vars tr.is-empty td { color: #94a3b8; font-style: italic; }
.clt-val { display: inline-block; min-width: 14px; border-radius: 4px; padding: 0 3px; }
.clt-val.v-str { color: #9b2c53; }
.clt-val.v-num { color: #1d4ed8; }
.clt-val.v-const { color: #7c3aed; }
.clt-ref { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cl-blue); vertical-align: middle; margin: 0 4px; }
.clt-obj { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 14px; display: table; transition: opacity .25s; font-family: var(--cl-mono); font-size: 13px; }
.clt-obj-h { font-size: 11px; color: var(--cl-muted); padding: 2px 8px; border-bottom: 1px solid #eef2f7; font-family: inherit; }
.clt-cells { display: flex; padding: 6px 8px 8px; gap: 0; }
.clt-cell { border: 1px solid #cbd5e1; margin-left: -1px; min-width: 34px; text-align: center; background: #fff; }
.clt-cell > i { display: block; font-style: normal; font-size: 10px; color: #94a3b8; border-bottom: 1px solid #eef2f7; padding: 0 4px; }
.clt-cell > .clt-val { padding: 3px 6px; }
.clt-obj-tuple .clt-cell:first-child { border-radius: 10px 0 0 10px; }
.clt-obj-tuple .clt-cell:last-child { border-radius: 0 10px 10px 0; }
.clt-obj-set .clt-cells { flex-wrap: wrap; gap: 4px; }
.clt-obj-set .clt-cell { border-style: dashed; border-radius: 12px; margin-left: 0; }
.clt-kv { border-collapse: collapse; margin: 6px 8px 8px; }
.clt-kv td { border: 1px solid #e2e8f0; padding: 3px 8px; white-space: nowrap; }
.clt-kv td.clt-kv-sep { color: #94a3b8; border-left: none; border-right: none; padding: 3px 2px; }
.clt-obj-plain { padding: 6px 10px; color: #334155; white-space: pre; }
.clt-obj-plain b { color: var(--cl-blue-dk); }
.clt-obj-more { color: #94a3b8; padding: 3px 6px; font-size: 11px; align-self: center; }
.clt-arrows { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.clt-arrows path { fill: none; stroke: var(--cl-blue); stroke-width: 1.6; opacity: .85; }
.clt-arrows path.is-hot { stroke: var(--cl-red); opacity: 1; stroke-width: 2; }
.is-new { animation: cltIn .35s ease; }
.is-changed { animation: cltFlash .9s ease; }
@keyframes cltIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cltFlash { 0% { background: #ffe08a; } 100% { background: transparent; } }
.clt-narr { display: none; margin-top: 10px; background: var(--cl-teal-bg); color: var(--cl-teal-dk); border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.clt-narr.is-on { display: flex; gap: 8px; align-items: flex-start; }
.clt-exc { display: none; margin-top: 10px; background: var(--cl-red-bg); color: var(--cl-red); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; font-family: var(--cl-mono); }
.clt-exc.is-on { display: block; }
.clt-console { margin-top: 10px; }
.clt-console-h, .clt-tabs { display: flex; gap: 4px; font-size: 12px; font-weight: 700; color: var(--cl-muted); margin-bottom: 4px; }
.clt-tab { border: none; background: none; color: var(--cl-muted); font-weight: 700; padding: 2px 10px; border-radius: 50rem; cursor: pointer; font-size: 12px; }
.clt-tab.is-on { background: var(--cl-blue-bg); color: var(--cl-blue); }
.clt-out { background: var(--cl-term); color: #e2e8f0; border-radius: 10px; padding: 10px 12px; font-family: var(--cl-mono); font-size: 13px; min-height: 44px; max-height: 220px; overflow: auto; white-space: pre-wrap; margin: 0; }
.clt-out .clt-out-new { background: rgba(255, 224, 138, .25); border-radius: 3px; }
.clt-out .clt-out-err { color: #fca5a5; }
.clt-out:empty::before { content: attr(data-empty); color: #64748b; }
.clt-stdin { margin-top: 10px; display: none; }
.clt-stdin.is-on { display: block; }
.clt-stdin label { font-size: 12px; font-weight: 700; color: var(--cl-muted); margin-bottom: 4px; display: block; }
.clt-stdin textarea, .clt-stdin input { width: 100%; font-family: var(--cl-mono); font-size: 13px; border: 1px solid #cbd2d9; border-radius: 8px; padding: 6px 10px; resize: vertical; }
.clt-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.clt-slider { flex: 1 1 200px; accent-color: var(--cl-teal); }
.clt-stepno { font-size: 13px; color: var(--cl-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clt-badge { font-size: 12px; border-radius: 50rem; padding: 1px 10px; display: none; }
.clt-badge.is-on { display: inline-block; }
.clt-badge-trunc { background: rgba(200, 162, 75, .18); color: #8a6a1f; }
.clt-badge-done { background: var(--cl-teal-bg); color: var(--cl-teal-dk); }
.clt-stale { display: none; margin-top: 8px; background: #fff7e0; border: 1px solid #f1d58a; color: #8a6a1f; border-radius: 8px; padding: 6px 12px; font-size: 13.5px; }
.clt.is-stale .clt-stale { display: block; }
.clt.is-stale .clt-mem, .clt.is-stale .clt-console { opacity: .55; }
.clt-loading { display: flex; justify-content: center; align-items: center; min-height: 300px; }
.clt-msg { font-size: 13px; color: var(--cl-muted); margin-left: 6px; }

/* ---------- 概念小工具 ---------- */
.clw { font-size: 14px; }
.clw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.clw-field { display: flex; align-items: center; gap: 8px; }
.clw-field label { font-weight: 700; font-size: 13px; color: #475569; margin: 0; min-width: 40px; }
.clw-field input[type=range] { accent-color: var(--cl-teal); width: 150px; }
.clw-field input[type=text], .clw-field input[type=number], .clw-input { border: 1px solid #cbd2d9; border-radius: 8px; padding: 4px 10px; font-family: var(--cl-mono); font-size: 13.5px; }
.clw-num { font-family: var(--cl-mono); font-weight: 700; color: var(--cl-blue); min-width: 28px; display: inline-block; text-align: center; }
.clw-code { font-family: var(--cl-mono); background: var(--cl-term); color: #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 14px; display: block; white-space: pre-wrap; margin: 8px 0; }
.clw-code .k { color: #7dd3fc; }
.clw-code .r { color: #fde68a; }
.clw-readout { font-family: var(--cl-mono); font-variant-numeric: tabular-nums; }
.clw-note { font-size: 12.5px; color: var(--cl-muted); margin-top: 8px; }
.clw-err { color: var(--cl-red); font-weight: 600; }
.clw-ok { color: var(--cl-teal-dk); font-weight: 600; }
.clw-cells { display: flex; flex-wrap: wrap; margin: 10px 0; }
.clw-cell { min-width: 40px; text-align: center; border: 1px solid #cbd5e1; margin-left: -1px; background: #fff; font-family: var(--cl-mono); transition: background .2s, color .2s; }
.clw-cell .i-pos, .clw-cell .i-neg { display: block; font-size: 10.5px; color: #94a3b8; padding: 0 4px; }
.clw-cell .i-pos { border-bottom: 1px solid #eef2f7; }
.clw-cell .i-neg { border-top: 1px solid #eef2f7; }
.clw-cell .v { display: block; padding: 6px 6px; font-size: 15px; }
.clw-cell.is-sel { background: var(--cl-teal-bg); }
.clw-cell.is-sel .v { color: var(--cl-teal-dk); font-weight: 700; }
.clw-cell .ord { display: block; font-size: 10px; color: var(--cl-teal-dk); min-height: 13px; }
.clw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.clw-chip { border: 1px solid #cbd2d9; background: #fff; color: #52606d; border-radius: 50rem; padding: 3px 12px; font-size: 13px; cursor: pointer; font-family: var(--cl-mono); }
.clw-chip:hover { border-color: var(--cl-blue); color: var(--cl-blue); }
.clw-chip.is-on { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; }
.clw-table { border-collapse: collapse; font-family: var(--cl-mono); font-size: 13.5px; margin: 8px 0; }
.clw-table th, .clw-table td { border: 1px solid #e2e8f0; padding: 5px 12px; text-align: center; }
.clw-table th { background: #f8fafc; font-weight: 700; }
.clw-table tr.is-sel td { background: var(--cl-teal-bg); font-weight: 700; }
.clw-table td.is-skip { color: #cbd2d9; }
.clw-table td.is-bad { color: var(--cl-red); }
.clw-table td.is-good { color: var(--cl-teal-dk); }
.clw-numline { position: relative; height: 54px; margin: 12px 6px; }
.clw-numline-axis { position: absolute; left: 0; right: 0; top: 24px; height: 2px; background: #cbd5e1; }
.clw-tick { position: absolute; top: 18px; width: 1px; height: 14px; background: #94a3b8; }
.clw-tick span { position: absolute; top: 16px; left: -10px; width: 20px; text-align: center; font-size: 10.5px; color: #64748b; font-family: var(--cl-mono); }
.clw-pt { position: absolute; top: 16px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--cl-teal); color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; transition: left .2s; }
.clw-stage { position: relative; background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 10px; padding: 14px; min-height: 120px; }
.clw-flow { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.clw-flow-node { border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 12px; font-family: var(--cl-mono); font-size: 13.5px; background: #fff; transition: background .25s, border-color .25s, color .25s; }
.clw-flow-node.is-lit { background: var(--cl-teal-bg); border-color: var(--cl-teal); color: var(--cl-teal-dk); font-weight: 700; }
.clw-flow-node.is-skip { opacity: .45; }
.clw-flow-node .step-no { float: right; font-size: 11px; color: var(--cl-teal-dk); }
.clw-ladder { display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.clw-rung { border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; padding: 6px 12px; transition: background .25s, border-color .25s; }
.clw-rung h5 { font-size: 12.5px; font-weight: 700; margin: 0 0 3px; color: #475569; }
.clw-rung .names { font-family: var(--cl-mono); font-size: 13px; }
.clw-rung.is-look { border-color: var(--cl-gold); background: #fffbea; }
.clw-rung.is-hit { border-color: var(--cl-teal); background: var(--cl-teal-bg); }
.clw-tok { display: inline-block; font-family: var(--cl-mono); font-size: 18px; padding: 4px 6px; margin: 2px; border-radius: 6px; transition: background .3s; }
.clw-tok.is-next { background: #fff3c4; box-shadow: 0 0 0 2px #f1d58a; }
.clw-tok.is-done { background: var(--cl-teal-bg); color: var(--cl-teal-dk); font-weight: 700; }
.clw-buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.clw-bucket { border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 8px; background: #fff; font-family: var(--cl-mono); font-size: 12.5px; min-height: 52px; transition: background .25s, border-color .25s; }
.clw-bucket i { font-style: normal; font-size: 10.5px; color: #94a3b8; display: block; }
.clw-bucket.is-hit { border-color: var(--cl-teal); background: var(--cl-teal-bg); }
.clw-bucket.is-miss { border-color: var(--cl-red); background: var(--cl-red-bg); }
.clw-boxes { position: relative; display: flex; gap: 60px; align-items: flex-start; padding: 8px 4px; min-height: 120px; }
.clw-names { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.clw-name { font-family: var(--cl-mono); font-weight: 700; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 3px 10px; }
.clw-objs { display: flex; flex-direction: column; gap: 10px; }
.clw-obj { font-family: var(--cl-mono); background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 10px; transition: background .3s; }
.clw-obj small { display: block; color: #94a3b8; font-size: 10.5px; }
.clw-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.clw-svg path { fill: none; stroke: var(--cl-blue); stroke-width: 1.6; }
.clw-mark { background: #fde68a; border-radius: 3px; padding: 0 1px; }
.clw-mark:nth-of-type(even) { background: #a7f3d0; }
.clw-regex-text { font-family: var(--cl-mono); font-size: 14px; background: #fff; border: 1px solid var(--cl-line); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; line-height: 1.8; }
.clw-venn { display: block; max-width: 360px; width: 100%; }
.clw-venn .region { fill: #fff; stroke: none; transition: fill .25s; }
.clw-venn .region.is-on { fill: #bfe3dd; }
.clw-venn circle.outline { fill: none; stroke: #64748b; stroke-width: 1.5; }
.clw-venn text { font-family: var(--cl-mono); font-size: 12px; fill: #1e293b; }
.clw-filebar { display: flex; font-family: var(--cl-mono); margin: 8px 0; }
.clw-filebar span { width: 24px; text-align: center; border: 1px solid #cbd5e1; margin-left: -1px; background: #fff; padding: 2px 0; }
.clw-filebar span.is-ptr { background: #fff3c4; box-shadow: inset 0 -3px 0 var(--cl-gold); }
.clw-filebar span.is-gone { color: #cbd2d9; text-decoration: line-through; }
.clw-filebar span.is-add { background: var(--cl-teal-bg); }

/* ---------- 導覽 ---------- */
.clk-steps { list-style: none; padding: 0; margin: 0; }
.clk-step { display: flex; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--cl-line); }
.clk-step:first-child { border-top: none; }
.clk-num { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #cbd2d9; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #52606d; background: #fff; }
.clk-step.is-current .clk-num { border-color: var(--cl-blue); color: var(--cl-blue); box-shadow: 0 0 0 3px rgba(60,111,154,.15); }
.clk-step.is-done .clk-num { background: var(--cl-teal); border-color: var(--cl-teal); color: #fff; }
.clk-body { flex: 1 1 auto; min-width: 0; }
.clk-title { font-size: 15px; font-weight: 700; margin: 4px 0 6px; cursor: pointer; }
.clk-step.is-locked .clk-title { color: #9aa5b1; }
.clk-step.is-locked .clk-detail { display: none; }
.clk-prose { font-size: 14.5px; line-height: 1.75; }
.clk-prose p:last-child { margin-bottom: 6px; }
.clk-term { background: var(--cl-term); border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-family: var(--cl-mono); font-size: 13px; color: #e2e8f0; white-space: pre-wrap; min-height: 40px; overflow-x: auto; }
.clk-term .ps1 { color: #5eead4; }
.clk-term .out { color: #94a3b8; }
.clk-caret { display: inline-block; width: 8px; height: 15px; background: #e2e8f0; vertical-align: text-bottom; animation: clkBlink 1s step-end infinite; }
@keyframes clkBlink { 50% { opacity: 0; } }
.clk-shot { max-width: 100%; border: 1px solid var(--cl-line); border-radius: 8px; margin: 6px 0; }
.clk-done { display: none; color: var(--cl-teal-dk); font-weight: 700; margin-top: 8px; }
.clb-walk.is-done .clk-done { display: block; }

/* ---------- 小測驗 ---------- */
.clc-q { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--cl-line); }
.clc-q:last-of-type { border-bottom: none; }
.clc-stem { font-weight: 600; margin-bottom: 8px; }
.clc-stem p:last-child { margin-bottom: 0; }
.clc-stem pre { background: var(--cl-term); color: #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 6px 0; }
.clc-stem pre code { background: none; color: inherit; }
.clc-opt { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--cl-line); border-radius: 8px; padding: 7px 12px; margin-bottom: 6px; cursor: pointer; transition: border-color .15s, background .15s; font-weight: 400; }
.clc-opt:hover { border-color: var(--cl-blue); }
.clc-opt input { margin-top: 5px; }
.clc-opt p { margin: 0; }
.clc-opt.is-correct { border-color: var(--cl-teal); background: var(--cl-teal-bg); }
.clc-opt.is-wrong { border-color: var(--cl-red); background: var(--cl-red-bg); }
.clc-opt.is-locked { cursor: default; }
.clc-explain { display: none; border-left: 3px solid var(--cl-gold); background: #fffbea; padding: 6px 12px; border-radius: 0 8px 8px 0; font-size: 14px; margin-top: 6px; }
.clc-explain.is-on { display: block; }
.clc-explain p:last-child { margin-bottom: 0; }
.clc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.clc-feedback { font-weight: 600; font-size: 14px; }
.clc-feedback.is-good { color: var(--cl-teal-dk); }
.clc-feedback.is-bad { color: var(--cl-red); }

/* ---------- 實作 ---------- */
.cly-editor { border: 1px solid var(--cl-line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.cly-editor .CodeMirror { height: auto; min-height: 120px; font-family: var(--cl-mono); font-size: 13.5px; }
.cly-editor .CodeMirror-scroll { min-height: 120px; max-height: 460px; }
.cly-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cly-result { display: none; margin-top: 12px; }
.cly-result.is-on { display: block; }
.cly-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 767px) { .cly-cols { grid-template-columns: 1fr; } }
.cly-h { font-size: 12px; font-weight: 700; color: var(--cl-muted); margin-bottom: 4px; }
.cly-pre { background: var(--cl-term); color: #e2e8f0; border-radius: 10px; padding: 10px 12px; font-family: var(--cl-mono); font-size: 13px; white-space: pre-wrap; margin: 0; min-height: 44px; max-height: 260px; overflow: auto; }
.cly-pre .diff { background: rgba(252, 165, 165, .25); display: block; }
.cly-pre .err { color: #fca5a5; }
.cly-verdict { margin-top: 10px; font-weight: 700; }
.cly-verdict.is-pass { color: var(--cl-teal-dk); }
.cly-verdict.is-fail { color: var(--cl-red); }
.cly-hints { margin-top: 8px; }
.cly-hint { border-left: 3px solid var(--cl-gold); background: #fffbea; padding: 6px 12px; border-radius: 0 8px 8px 0; font-size: 14px; margin-top: 6px; }
.cly-hint p:last-child { margin-bottom: 0; }

/* ---------- 我的學習 ---------- */
.clm-track { background: #fff; border: 1px solid var(--cl-line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.clm-track-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.clm-track-h h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.clm-bar { height: 10px; background: var(--cl-line); border-radius: 10px; overflow: hidden; margin: 12px 0 6px; }
.clm-bar > span { display: block; height: 100%; background: var(--cl-teal); width: 0; transition: width .4s; }
.clm-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--cl-muted); }
.clm-stats b { color: var(--cl-ink); font-size: 1.05rem; }
.clm-recent { list-style: none; margin: 10px 0 0; padding: 0; }
.clm-recent li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed var(--cl-line); font-size: 14px; }
.cl-notice { background: #fff; border: 1px dashed #cbd2d9; border-radius: 12px; padding: 12px 16px; color: #52606d; font-size: 14px; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
    .cl-page *, .cl-page *::before { transition: none !important; animation: none !important; }
}
.clt-kv td.clt-kv-def { color: var(--cl-blue-dk); font-weight: 600; }

/* ---------- 陪讀 AI 助教（右下角，沿用 Science 助教的版面） ---------- */
.clu-fab { position: fixed; right: 22px; bottom: 22px; z-index: 1050; border: none; border-radius: 50rem; padding: 12px 20px;
    background: linear-gradient(149deg, #3C6F9A, #3C938A); color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer;
    box-shadow: 0 4px 14px rgba(60, 111, 154, .35); display: inline-flex; align-items: center; gap: 6px; }
.clu-fab:hover { box-shadow: 0 4px 20px rgba(60, 111, 154, .55); }
.clu-fab.is-open { display: none; }
.clu-panel { position: fixed; right: 22px; bottom: 22px; z-index: 1051; width: 390px; max-width: calc(100vw - 32px);
    height: 600px; max-height: calc(100vh - 110px); background: #fff; border: 1px solid var(--cl-line); border-radius: 16px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .18); display: none; flex-direction: column; overflow: hidden; }
.clu-panel.is-open { display: flex; }
.clu-head { background: linear-gradient(149deg, #3C6F9A, #3C938A); color: #fff; padding: 11px 16px; font-size: 0.92rem;
    display: flex; justify-content: space-between; align-items: center; }
.clu-head-btns button { background: none; border: none; color: #fff; cursor: pointer; font-size: 0.95rem; margin-left: 8px; opacity: .85; }
.clu-head-btns button:hover { opacity: 1; }
.clu-msgs { flex: 1; overflow-y: auto; padding: 14px; background: #f8fafc; }
.clu-bubble { max-width: 90%; padding: 9px 13px; border-radius: 12px; margin-bottom: 10px; font-size: 0.87rem; line-height: 1.7; word-break: break-word; }
.clu-bubble.user { background: var(--cl-blue); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.clu-bubble.ai { background: #fff; border: 1px solid var(--cl-line); color: var(--cl-ink); border-bottom-left-radius: 4px; }
.clu-bubble.ai p, .clu-bubble.ai ul, .clu-bubble.ai ol, .clu-bubble.ai pre, .clu-bubble.ai table { margin: 0 0 8px; }
.clu-bubble.ai > :last-child { margin-bottom: 0; }
.clu-bubble.ai ul, .clu-bubble.ai ol { padding-left: 20px; }
.clu-bubble.ai code { background: #f1f5f9; border-radius: 4px; padding: 1px 5px; font-size: 0.8rem; color: #9b2c53; }
.clu-bubble.ai pre { background: var(--cl-term); color: #e2e8f0; border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 0.78rem; line-height: 1.6; }
.clu-bubble.ai pre code { background: none; color: inherit; padding: 0; }
.clu-bubble.ai a { color: var(--cl-blue); font-weight: 600; }
.clu-bubble.thinking { color: var(--cl-muted); }
.clu-bubble.err { background: var(--cl-red-bg); border: 1px solid #e8c5c2; color: var(--cl-red); }
.clu-chip { display: inline-block; background: var(--cl-teal-bg); border: 1px solid #bcd9d3; color: var(--cl-teal-dk);
    font-size: 0.76rem; font-weight: 700; padding: 4px 12px; border-radius: 50rem; margin: 0 0 10px; }
.clu-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; background: #fff; border-top: 1px solid #eef1f5; }
.clu-quick:empty { display: none; }
.clu-q { border: 1px solid rgba(60, 111, 154, .4); background: var(--cl-blue-bg); color: var(--cl-blue); border-radius: 50rem;
    padding: 3px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.clu-q:hover { background: rgba(60, 111, 154, .18); }
.clu-input { display: flex; gap: 8px; padding: 10px; background: #fff; }
.clu-input textarea { flex: 1; resize: none; border: 1px solid #cbd2d9; border-radius: 10px; padding: 7px 10px; font-size: 0.88rem; }
.clu-send { border: none; background: var(--cl-blue); color: #fff; border-radius: 50rem; padding: 0 16px; font-weight: 700; cursor: pointer; }
.clu-send:disabled { opacity: .55; cursor: not-allowed; }
.clu-note { font-size: 0.68rem; color: var(--cl-muted); padding: 0 12px 8px; background: #fff; }
.clb.is-pointed { border-color: var(--cl-teal); box-shadow: 0 0 0 3px rgba(60, 147, 138, .25); }
/* 寬螢幕：助教開啟時課程內容讓出右側空間，兩者並排 */
@media (min-width: 1440px) {
    .cl-page { transition: padding-right .25s ease; }
    body.cl-tutor-open .cl-page { padding-right: 420px; }
}
@media (max-width: 575px) {
    .clu-fab span { display: none; }
    .clu-fab { padding: 14px 16px; right: 14px; bottom: 14px; }
    .clu-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 80px); }
}

/* ---------- AI 素養軌：說法標註器（claim-tagger）與引用查證台（citation-checker） ---------- */
.clwa-chat { background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.clwa-who { display: block; font-size: 12px; font-weight: 700; color: var(--cl-muted); margin-bottom: 4px; }
.clwa-q { background: var(--cl-blue-bg); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px auto; max-width: 80%; width: fit-content; }
.clwa-bubble { background: #fff; border: 1px solid var(--cl-line); border-radius: 10px; padding: 10px 14px; line-height: 2; }
.clwa-sent { cursor: pointer; padding: 1px 2px; border-bottom: 3px solid transparent; transition: background .2s, border-color .2s; }
.clwa-sent:hover { background: #f1f5f9; }
.clwa-sent.is-fact { background: rgba(60, 111, 154, .10); border-bottom-color: var(--cl-blue); }
.clwa-sent.is-inference { background: rgba(200, 162, 75, .14); border-bottom-color: var(--cl-gold); }
.clwa-sent.is-opinion { background: rgba(82, 96, 109, .10); border-bottom-color: #52606d; }
.clwa-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: #475569; margin: 4px 0 10px; }
.clwa-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.clwa-key.is-fact i { background: var(--cl-blue); }
.clwa-key.is-inference i { background: var(--cl-gold); }
.clwa-key.is-opinion i { background: #52606d; }
.clwa-rows { list-style: none; counter-reset: clwa; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.clwa-row { counter-increment: clwa; position: relative; background: #fff; border: 1px solid var(--cl-line); border-radius: 10px; padding: 10px 12px 10px 40px; transition: border-color .2s; }
.clwa-row::before { content: counter(clwa); position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--cl-blue-bg); color: var(--cl-blue); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.clwa-row.is-right { border-color: var(--cl-teal); }
.clwa-row.is-wrong { border-color: var(--cl-red); }
.clwa-text { margin-bottom: 8px; }
.clwa-opts, .clwc-verdicts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clwa-opt, .clwc-v { border: 1px solid #cbd2d9; background: #fff; color: #52606d; border-radius: 50rem; padding: 3px 14px; font-size: 13px; cursor: pointer; }
.clwa-opt:hover:not(:disabled), .clwc-v:hover:not(:disabled) { border-color: var(--cl-blue); color: var(--cl-blue); }
.clwa-opt:disabled, .clwc-v:disabled { cursor: default; opacity: .55; }
.clwa-opt.is-on.is-fact { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; opacity: 1; }
.clwa-opt.is-on.is-inference { background: #8a6d1f; border-color: #8a6d1f; color: #fff; opacity: 1; }
.clwa-opt.is-on.is-opinion { background: #52606d; border-color: #52606d; color: #fff; opacity: 1; }
.clwc-v.is-on { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; opacity: 1; }
.clwa-opt.is-answer, .clwc-v.is-answer { box-shadow: 0 0 0 2px var(--cl-teal); opacity: 1; }
.clwa-fb, .clwc-fb { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: #334155; background: #f8fafc; border-radius: 8px; padding: 8px 10px; }
.clwa-bar { margin-top: 12px; }
.clwa-status { font-size: 13px; color: var(--cl-muted); }
.clwc-card { background: #fff; border: 1px solid var(--cl-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; transition: border-color .2s; }
.clwc-card.is-right { border-color: var(--cl-teal); }
.clwc-card.is-wrong { border-color: var(--cl-red); }
.clwc-head { display: flex; gap: 10px; align-items: flex-start; }
.clwc-no { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--cl-blue-bg); color: var(--cl-blue); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.clwc-ref { font-size: 13.5px; line-height: 1.65; word-break: break-word; }
.clwc-claim { margin: 8px 0 0 32px; padding: 8px 12px; background: rgba(200, 162, 75, .10); border-left: 3px solid var(--cl-gold); border-radius: 6px; font-size: 13.5px; }
.clwc-claim-k, .clwc-tools-k { font-size: 12px; font-weight: 700; color: var(--cl-muted); margin-right: 8px; }
.clwc-tools, .clwc-verdicts { margin: 8px 0 0 32px; }
.clwc-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; }
.clwc-link { white-space: nowrap; }
.clwc-opened { display: none; font-size: 12px; color: var(--cl-teal-dk); font-weight: 700; }
.clwc-card.is-opened .clwc-opened { display: inline; }
.clwc-fb { margin-left: 32px; }
.clwc-explain { margin-top: 4px; }
@media (max-width: 575px) {
    .clwc-claim, .clwc-tools, .clwc-verdicts, .clwc-fb { margin-left: 0; }
    .clwa-q { max-width: 100%; }
}

/* ---------- Git 互動模擬器（git-sim） ---------- */
.cgs-cmds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cgs-cmd { border: 1px solid #cbd2d9; background: #fff; color: #334155; border-radius: 50rem; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.cgs-cmd.is-git { font-family: var(--cl-mono); background: var(--cl-term); border-color: var(--cl-term); color: #e2e8f0; }
.cgs-cmd.is-git:hover { background: #334155; }
.cgs-cmd:not(.is-git):hover { border-color: var(--cl-blue); color: var(--cl-blue); }
.cgs-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 767px) { .cgs-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cgs-col { background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 12px; min-height: 150px; display: flex; flex-direction: column; }
.cgs-col.is-off { opacity: .55; }
.cgs-col-h { font-size: 12.5px; font-weight: 700; color: #475569; padding: 8px 10px; border-bottom: 1px solid var(--cl-line); }
.cgs-col-remote .cgs-col-h { color: var(--cl-blue-dk); }
.cgs-col-b { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cgs-card { background: #fff; border: 1px solid #cbd5e1; border-left-width: 4px; border-radius: 8px; padding: 5px 9px; font-family: var(--cl-mono); font-size: 12.5px; }
.cgs-card b { display: block; font-weight: 700; color: var(--cl-ink); }
.cgs-card small { font-family: inherit; font-size: 11px; color: var(--cl-muted); }
.cgs-card.s-untracked { border-left-color: #94a3b8; }
.cgs-card.s-modified { border-left-color: var(--cl-gold); }
.cgs-card.s-staged { border-left-color: var(--cl-blue); }
.cgs-card.s-clean { border-left-color: var(--cl-teal); }
.cgs-card.s-ignored { border-left-color: #e2e8f0; opacity: .5; text-decoration: line-through; }
.cgs-card.s-remote { border-left-color: var(--cl-blue-dk); }
.cgs-card.s-remote.is-tip { box-shadow: 0 0 0 2px rgba(60, 111, 154, .2); }
.cgs-card.is-new { animation: cltIn .4s ease; }
.cgs-empty { font-size: 12px; color: #94a3b8; text-align: center; padding: 14px 4px; }
.cgs-hist { font-family: var(--cl-mono); font-size: 11.5px; color: #475569; border-top: 1px dashed var(--cl-line); padding-top: 6px; margin-top: auto; }
.cgs-graph { margin-top: 12px; background: #fff; border: 1px solid var(--cl-line); border-radius: 12px; overflow-x: auto; padding: 4px 8px; min-height: 70px; }
.cgs-graph svg { display: block; }
.cgs-edge { fill: none; stroke: #94a3b8; stroke-width: 2.5; }
.cgs-edge.is-remote { stroke-dasharray: 5 4; }
.cgs-node { stroke: #fff; stroke-width: 3; }
.cgs-node.lane-0 { fill: var(--cl-blue); }
.cgs-node.lane-1 { fill: var(--cl-teal); }
.cgs-node.lane-2 { fill: var(--cl-gold); }
.cgs-node.is-remote { fill: #fff; stroke: var(--cl-blue); stroke-dasharray: 3 2; }
.cgs-node.is-merge { stroke: var(--cl-ink); stroke-width: 2; }
.cgs-id { font-family: var(--cl-mono); font-size: 10.5px; fill: #64748b; text-anchor: middle; }
.cgs-tag { font-family: var(--cl-mono); font-size: 11.5px; font-weight: 700; fill: var(--cl-teal-dk); }
.cgs-tag.is-head { fill: var(--cl-red); }
.cgs-tag.is-remote { fill: var(--cl-blue); }
.cgs-lower { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; margin-top: 10px; }
@media (max-width: 767px) { .cgs-lower { grid-template-columns: 1fr; } }
.cgs-term { background: var(--cl-term); color: #e2e8f0; border-radius: 10px; padding: 10px 12px; font-family: var(--cl-mono); font-size: 12.5px; height: 210px; overflow-y: auto; white-space: pre-wrap; }
.cgs-term .ps1 { color: #5eead4; }
.cgs-term .out { color: #cbd5e1; margin-bottom: 6px; }
.cgs-term .note { color: #94a3b8; margin-bottom: 6px; }
.cgs-missions { margin: 0; padding: 10px 12px 10px 30px; background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 10px; font-size: 13.5px; }
.cgs-missions li { margin-bottom: 6px; color: #64748b; }
.cgs-missions li.is-next { color: var(--cl-ink); font-weight: 700; }
.cgs-missions li.is-done { color: var(--cl-teal-dk); text-decoration: line-through; }
.cgs-missions li.is-done::marker { content: '✓  '; }

/* ---------- AI 素養軌：「下一個字」生成器（token-sampler）與連網判斷（search-sorter） ---------- */
.clwt-bubble { min-height: 64px; }
.clwt-tok { padding: 0 1px; border-bottom: 3px solid transparent; }
.clwt-tok.is-sure { border-bottom-color: var(--cl-teal); }
.clwt-tok.is-mid { border-bottom-color: var(--cl-gold); }
.clwt-tok.is-low { border-bottom-color: var(--cl-red); background: var(--cl-red-bg); }
.clwt-tok.is-fresh { animation: clwtIn .4s ease-out; }
@keyframes clwtIn { from { background: var(--cl-teal-bg); } }
.clwt-caret { color: var(--cl-teal); animation: clwtBlink 1s steps(2) infinite; margin-left: 1px; }
@keyframes clwtBlink { 50% { opacity: 0; } }
.clwa-key.is-sure i { background: var(--cl-teal); }
.clwa-key.is-mid i { background: var(--cl-gold); }
.clwa-key.is-low i { background: var(--cl-red); }
.clwt-panel { background: #fff; border: 1px solid var(--cl-line); border-radius: 12px; padding: 10px 14px; margin-bottom: 4px; min-height: 64px; }
.clwt-panel-h { font-weight: 700; font-size: 13.5px; color: #475569; margin-bottom: 6px; }
.clwt-bars { display: flex; flex-direction: column; gap: 5px; }
.clwt-bar { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 48px; align-items: center; gap: 10px; font-size: 13.5px; border-radius: 6px; padding: 2px 4px; transition: background .2s; }
.clwt-bar-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clwt-bar-track { height: 12px; background: #f1f5f9; border-radius: 6px; overflow: hidden; }
.clwt-bar-fill { display: block; height: 100%; background: var(--cl-blue); border-radius: 6px; transition: width .4s ease-out; }
.clwt-bar.is-other .clwt-bar-fill { background: #94a3b8; }
.clwt-bar-p { font-family: var(--cl-mono); font-variant-numeric: tabular-nums; text-align: right; color: #475569; }
.clwt-bar.is-chosen { background: var(--cl-teal-bg); font-weight: 700; }
.clwt-bar.is-chosen .clwt-bar-fill { background: var(--cl-teal); }
.clwt-summary { background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 10px; padding: 10px 14px; margin-top: 10px; font-size: 13.5px; line-height: 1.7; }
.clwt-sum-text { margin-top: 6px; color: #334155; }
.clwt-combo { margin-top: 6px; padding: 6px 10px; border-radius: 8px; }
.clwt-combo.is-ok { background: var(--cl-teal-bg); }
.clwt-combo.is-bad { background: var(--cl-red-bg); }
.clwt-hist { margin-top: 10px; font-size: 13.5px; }
.clwt-hist-h { font-weight: 700; color: #475569; margin-bottom: 4px; }
.clwt-hist-list { margin: 0; padding-left: 22px; }
.clwt-hist-list li { margin-bottom: 2px; }
.clwt-hist-q { color: var(--cl-muted); font-size: 12.5px; }
.clws-q { font-size: 14px; font-weight: 600; padding-top: 1px; }
.clws-row { margin-top: 6px; }
.clws-cond { display: inline-block; min-width: 72px; font-size: 12.5px; font-weight: 700; color: #475569; }
.clws-mark { font-size: 13px; margin-left: 4px; }
.clws-row .clwc-v.is-on { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; }
@media (max-width: 575px) {
    .clwt-bar { grid-template-columns: 76px 1fr 40px; gap: 6px; }
    .clws-row { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .clwt-caret, .clwt-tok.is-fresh { animation: none; }
    .clwt-bar-fill { transition: none; }
}

/* ---------- Docker 模擬器（container-sim，沿用 cgs- 版面） ---------- */
.ccs-cmds .cgs-cmd { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgs-cmd.is-shell { background: #0f3d38; border-color: #0f3d38; color: #ccfbf1; font-family: var(--cl-mono); }
.cgs-cmd.is-off, .cgs-cmd:disabled { opacity: .35; cursor: not-allowed; }
.ccs-layers { display: flex; gap: 2px; margin-top: 5px; flex-wrap: wrap; }
.ccs-layer { display: inline-block; color: #fff; font-size: 10px; font-family: var(--cl-mono); padding: 1px 5px; border-radius: 4px; }
.ccs-layer.is-pulling { animation: ccsPull .5s ease both; }
@keyframes ccsPull { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ccs-hub { border-left-color: var(--cl-blue-dk); }
.ccs-image { border-left-color: var(--cl-blue); }
.ccs-ct.s-running { border-left-color: var(--cl-teal); }
.ccs-ct.s-exited { border-left-color: #94a3b8; background: #f8fafc; }
.ccs-ct.s-created { border-left-color: var(--cl-blue); }
.ccs-ct.is-shell { box-shadow: 0 0 0 2px rgba(60, 147, 138, .35); }
.ccs-ct b { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ccs-badge { font-size: 10.5px; border-radius: 50rem; padding: 0 8px; font-weight: 700; }
.ccs-badge.b-running { background: var(--cl-teal-bg); color: var(--cl-teal-dk); }
.ccs-badge.b-exited { background: #eef1f5; color: #64748b; }
.ccs-badge.b-created { background: var(--cl-blue-bg); color: var(--cl-blue); }
.ccs-ct small, .ccs-vol small, .ccs-net small { display: block; }
.ccs-mount { color: var(--cl-blue-dk) !important; }
.ccs-fs { color: #8a6a1f !important; }
.ccs-in { color: var(--cl-teal-dk) !important; font-weight: 700; }
.ccs-vol { border-left-color: var(--cl-gold); }
.ccs-net { border-left-color: #6d597a; }
.ccs-browser { border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; background: #fff; font-size: 12px; }
.ccs-url { background: #eef1f5; padding: 3px 8px; font-family: var(--cl-mono); color: #475569; }
.ccs-page { padding: 10px 8px; min-height: 42px; color: #64748b; }
.ccs-browser.is-ok .ccs-page { color: var(--cl-ink); font-weight: 700; font-size: 14px; }
.ccs-browser.is-bad .ccs-page { color: var(--cl-red); }
.cgs-term .err { color: #fca5a5; margin-bottom: 6px; }
.ccs-term { font-size: 12px; white-space: pre; overflow-x: auto; }

/* ---------- AI 素養軌：判斷卡片（verdict-cards）、揭露產生器（disclosure-builder）、原文對照（source-compare） ---------- */
.clwv-body { font-size: 14px; line-height: 1.65; }
.clwv-tag { display: inline-block; background: var(--cl-blue-bg); color: var(--cl-blue); border: 1px solid rgba(60, 111, 154, .35); border-radius: 50rem; font-size: 12px; font-weight: 700; padding: 0 10px; margin-right: 8px; }
.clwd-scenario { background: rgba(200, 162, 75, .10); border-left: 3px solid var(--cl-gold); border-radius: 6px; padding: 8px 12px; font-size: 13.5px; line-height: 1.7; margin-bottom: 12px; }
.clwd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.clwd-field { margin-bottom: 12px; }
.clwd-field label, .clwd-label { display: block; font-weight: 700; font-size: 13.5px; color: #334155; margin-bottom: 4px; }
.clwd-input { width: 100%; border: 1px solid #cbd2d9; border-radius: 8px; padding: 6px 10px; font-size: 14px; font-family: inherit; }
.clwd-input:focus { outline: none; border-color: var(--cl-blue); box-shadow: 0 0 0 3px rgba(60, 111, 154, .15); }
.clwd-steps { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.clwd-step { font-weight: 400 !important; font-size: 13.5px !important; color: var(--cl-ink) !important; margin: 0 !important; display: inline-flex !important; align-items: center; gap: 4px; cursor: pointer; }
.clwd-side { position: sticky; top: 90px; }
.clwd-side-h { font-weight: 700; font-size: 13px; color: var(--cl-muted); margin: 0 0 6px; letter-spacing: .5px; }
.clwd-preview { background: #fff; border: 1px solid var(--cl-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.8; margin-bottom: 12px; min-height: 80px; }
.clwd-checks { list-style: none; padding: 0; margin: 0 0 8px; font-size: 13.5px; }
.clwd-checks li { padding: 3px 0; color: #475569; }
.clwd-checks li.is-ok { color: var(--cl-teal-dk); }
.clwd-tick { display: inline-block; width: 20px; font-weight: 700; }
.clwd-detail { margin-left: 20px; font-size: 12.5px; color: var(--cl-red); }
.clwd-msg { font-size: 13.5px; }
.clwd-example { margin-top: 10px; background: #f8fafc; border: 1px dashed #cbd2d9; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.8; }
.clwsc-lines { margin: 0; padding: 10px 12px 10px 32px; background: #fff; border: 1px solid var(--cl-line); border-radius: 10px; font-size: 13.5px; line-height: 1.7; }
.clwsc-lines li { padding: 3px 4px; border-radius: 6px; margin-bottom: 2px; transition: background .2s; }
.clwsc-lines li.is-cited { background: rgba(60, 111, 154, .07); }
.clwsc-lines li.is-focus { background: var(--cl-teal-bg); box-shadow: inset 3px 0 0 var(--cl-teal); }
.clwsc-card .clwc-verdicts { margin-left: 32px; }
.clwsc-card.is-focus { box-shadow: 0 0 0 3px rgba(60, 147, 138, .25); }
.clwsc-card { cursor: default; }
.clwsc-src { position: sticky; top: 90px; }
@media (max-width: 767px) {
    .clwd-grid { grid-template-columns: 1fr; }
    .clwd-side, .clwsc-src { position: static; }
}
@media (max-width: 575px) {
    .clwsc-card .clwc-verdicts { margin-left: 0; }
}

/* ---------- 雲端模擬器：cloud-stack／vm-vs-container／request-journey／autoscale／cost／deploy／dockerfile ---------- */
.ccl-stack-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin: 6px 0 8px; }
@media (max-width: 767px) { .ccl-stack-wrap { grid-template-columns: 1fr; } }
.ccl-stack { display: flex; flex-direction: column; gap: 4px; }
.ccl-layer { display: flex; justify-content: space-between; align-items: center; border-radius: 8px; padding: 7px 12px; font-size: 13.5px; transition: background .35s, color .35s; }
.ccl-layer em { font-style: normal; font-size: 12px; font-weight: 700; }
.ccl-layer.is-you { background: var(--cl-blue); color: #fff; }
.ccl-layer.is-prov { background: #e2e8f0; color: #475569; }
.ccl-side { background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.ccl-side h5 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.ccl-eg { color: var(--cl-teal-dk); font-weight: 600; }
.ccl-key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; }
.ccl-key.you { background: var(--cl-blue); }
.ccl-key.prov { background: #e2e8f0; }
.ccl-quiz { margin: 12px 0; background: #fff; border: 1px solid var(--cl-line); border-radius: 10px; padding: 10px 14px; }
.ccl-quiz-h { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.ccl-case { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--cl-line); font-size: 14px; }
.ccl-case-t { flex: 1 1 280px; }
.ccl-case-b { display: flex; gap: 4px; }
.clw-chip.is-wrong { background: var(--cl-red-bg); border-color: var(--cl-red); color: var(--cl-red); }
.cvc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
.cvc-col { background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.cvc-col h5 { font-size: 14px; font-weight: 700; margin: 0 0 4px; text-align: center; }
.cvc-apps { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; min-height: 96px; }
.cvc-unit { display: flex; flex-direction: column; gap: 2px; flex: 1 1 52px; max-width: 80px; }
.cvc-unit.is-boot { animation: cvcBoot .45s ease both; }
@keyframes cvcBoot { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cvc-b { border-radius: 6px; padding: 3px 4px; font-size: 11px; text-align: center; color: #fff; }
.cvc-b.app { background: var(--cl-teal); }
.cvc-b.lib { background: #7cc4b8; color: #0f3d38; }
.cvc-b.os { background: #e07a5f; }
.cvc-b.os.host { background: #c2410c; }
.cvc-b.hv { background: #6d597a; }
.cvc-b.engine { background: var(--cl-blue); }
.cvc-b.hw { background: #334155; }
.cvc-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 767px) { .cvc-bars, .cvc-grid { grid-template-columns: 1fr; } }
.cvc-bar-row b { font-size: 13px; }
.cvc-bar { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-top: 3px; }
.cvc-bar-l { width: 34px; color: #475569; }
.cvc-track { flex: 1; height: 12px; background: #eef1f5; border-radius: 6px; overflow: hidden; }
.cvc-fill { display: block; height: 100%; transition: width .4s ease; }
.cvc-fill.vm { background: #e07a5f; }
.cvc-fill.ct { background: var(--cl-teal); }
.cvc-bar-v { width: 64px; text-align: right; font-family: var(--cl-mono); }
.crj-stage { background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 12px; padding: 6px; overflow-x: auto; }
.crj-svg { width: 100%; min-width: 620px; height: auto; display: block; }
.crj-node { fill: #fff; stroke: #94a3b8; stroke-width: 1.5; }
.crj-node.is-off { stroke-dasharray: 4 3; opacity: .6; }
.crj-node.is-down { fill: var(--cl-red-bg); stroke: var(--cl-red); }
.crj-label { font-size: 13px; font-weight: 700; text-anchor: middle; fill: var(--cl-ink); }
.crj-sub { font-size: 10.5px; text-anchor: middle; fill: #64748b; }
.crj-toggle { font-size: 10.5px; text-anchor: middle; fill: var(--cl-blue); cursor: pointer; font-weight: 700; }
.crj-edge { stroke: #cbd5e1; stroke-width: 2; }
.crj-edge.is-off { stroke-dasharray: 4 4; opacity: .5; }
.crj-dot { fill: var(--cl-gold); stroke: #fff; stroke-width: 2; }
.crj-out { margin: 10px 0; }
.cas-manual { display: inline-flex; gap: 4px; }
.cas-farm { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; }
.cas-srv { border: 1px solid #cbd5e1; border-radius: 10px; padding: 6px 8px; background: #fff; transition: opacity .3s; }
.cas-srv.is-off { opacity: .35; border-style: dashed; }
.cas-srv b { font-size: 12.5px; display: block; }
.cas-srv small { font-size: 11px; color: #64748b; }
.cas-cpu { display: block; height: 8px; background: #eef1f5; border-radius: 4px; overflow: hidden; margin: 4px 0; }
.cas-cpu-fill { display: block; height: 100%; background: var(--cl-teal); transition: width .4s; }
.cas-cpu-fill.is-hot { background: var(--cl-red); }
.cas-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cas-stat { background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 10px; padding: 6px 12px; min-width: 110px; }
.cas-stat small { display: block; font-size: 11.5px; color: #64748b; }
.cas-stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.cas-stat.is-bad b { color: var(--cl-red); }
.cas-event { font-size: 13px; color: var(--cl-teal-dk); font-weight: 600; }
.cas-chart { margin: 10px 0; background: #fff; border: 1px solid var(--cl-line); border-radius: 10px; padding: 6px; }
.cas-svg { width: 100%; height: 110px; display: block; }
.cas-line-r { fill: none; stroke: var(--cl-red); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cas-line-s { fill: none; stroke: var(--cl-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cas-ref { stroke: #94a3b8; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cas-legend { display: flex; gap: 14px; font-size: 12px; color: #64748b; }
.cas-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 4px; vertical-align: middle; }
.cas-legend .r::before { background: var(--cl-red); }
.cas-legend .s::before { background: var(--cl-blue); }
.cas-legend .ref::before { background: #94a3b8; }
.cce-out { margin: 10px 0; }
.cdp-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.cdp-stage { border: 1px solid #cbd5e1; border-radius: 50rem; padding: 5px 14px; font-size: 13px; background: #fff; transition: background .3s, color .3s; }
.cdp-stage.s-run { background: #fff3c4; border-color: var(--cl-gold); }
.cdp-stage.s-ok { background: var(--cl-teal-bg); border-color: var(--cl-teal); color: var(--cl-teal-dk); font-weight: 700; }
.cdp-stage.s-fail { background: var(--cl-red-bg); border-color: var(--cl-red); color: var(--cl-red); font-weight: 700; }
.cdp-arrow { color: #94a3b8; }
.cdp-fleet { background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.cdp-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.cdp-row { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.cdp-srv { flex: 1 1 90px; border: 1px solid #cbd5e1; border-left: 4px solid var(--cl-teal); border-radius: 8px; background: #fff; padding: 6px 10px; transition: border-color .3s; }
.cdp-srv small { display: block; font-size: 11px; color: #64748b; }
.cdp-srv b { font-family: var(--cl-mono); font-size: 16px; }
.cdp-srv.is-old { border-left-color: #94a3b8; }
.cdp-srv.is-bug { border-left-color: var(--cl-red); }
.cdp-srv.is-green { border-left-color: #22c55e; background: #f0fdf4; }
.cdf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 991px) { .cdf-grid { grid-template-columns: 1fr; } }
.cdf-file-h { font-size: 12.5px; font-weight: 700; color: #475569; margin: 4px 0 6px; }
.cdf-palette { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cdf-pal { text-align: left; border: 1px dashed #94a3b8; background: #fff; border-radius: 8px; padding: 4px 10px; font-family: var(--cl-mono); font-size: 12.5px; cursor: pointer; }
.cdf-pal:hover { border-color: var(--cl-blue); color: var(--cl-blue); }
.cdf-file { background: var(--cl-term); border-radius: 10px; padding: 8px 10px; min-height: 120px; }
.cdf-file .cdf-file-h { color: #94a3b8; }
.cdf-line { display: flex; align-items: center; gap: 8px; color: #e2e8f0; font-family: var(--cl-mono); font-size: 12.5px; padding: 2px 0; }
.cdf-line code { background: none; color: inherit; padding: 0; font-size: inherit; flex: 1; }
.cdf-no { color: #64748b; width: 18px; text-align: right; }
.cdf-tools button { background: none; border: 1px solid #475569; color: #cbd5e1; border-radius: 4px; margin-left: 2px; font-size: 11px; cursor: pointer; padding: 0 5px; }
.cdf-tools button:hover { border-color: #e2e8f0; color: #fff; }
.cdf-layers { margin: 8px 0; }
.cdf-stack { display: flex; flex-direction: column; gap: 3px; }
.cdf-l { border-radius: 6px; padding: 4px 10px; font-size: 12.5px; font-family: var(--cl-mono); }
.cdf-l.k-base { background: #334155; color: #fff; }
.cdf-l.k-layer { background: var(--cl-teal); color: #fff; }
.cdf-l.k-meta { background: #fff; border: 1px dashed #cbd5e1; color: #64748b; }
.cdf-term { height: 170px; white-space: pre-wrap; }
.cdf-term .cmd { color: #5eead4; }
.cdf-right .cgs-cmds { margin-bottom: 8px; }

/* ---------- AI 素養軌：資料流向（data-flow） ---------- */
.clwf-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.clwf-switch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cbd2d9; background: #fff; color: #52606d; border-radius: 50rem; padding: 4px 14px 4px 6px; font-size: 13px; cursor: pointer; }
.clwf-knob { position: relative; width: 30px; height: 17px; border-radius: 17px; background: #cbd2d9; transition: background .2s; flex: 0 0 auto; }
.clwf-knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .2s; }
.clwf-switch.is-on { border-color: var(--cl-teal); color: var(--cl-teal-dk); font-weight: 700; }
.clwf-switch.is-on .clwf-knob { background: var(--cl-teal); }
.clwf-switch.is-on .clwf-knob::after { left: 15px; }
.clwf-hint { min-height: 18px; margin: 0 0 8px; }
.clwf-switch.is-muted { opacity: .45; text-decoration: line-through; }
.clwf-stage { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); gap: 40px; align-items: center; background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 12px; padding: 16px; }
.clwf-stage .clw-svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.clwf-col { position: relative; z-index: 1; }
.clwf-dests { display: flex; flex-direction: column; gap: 8px; }
.clwf-node { background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; transition: background .25s, border-color .25s, color .25s, opacity .25s; }
.clwf-node i { color: var(--cl-blue); font-size: 15px; }
.clwf-you { flex-direction: column; align-items: flex-start; }
.clwf-msg { background: var(--cl-blue-bg); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; color: #334155; }
.clwf-srv { flex-direction: column; text-align: center; justify-content: center; min-height: 90px; }
.clwf-sub { font-size: 11.5px; color: var(--cl-muted); }
.clwf-dest.is-on { background: var(--cl-teal-bg); border-color: var(--cl-teal); color: var(--cl-teal-dk); font-weight: 700; }
.clwf-dest.is-partial { background: rgba(200, 162, 75, .12); border-color: var(--cl-gold); border-style: dashed; color: #6b5416; font-weight: 700; }
.clwf-dest.is-off { opacity: .45; }
.clwf-path { fill: none; stroke-width: 2; }
.clwf-path.is-on { stroke: var(--cl-teal); }
.clwf-path.is-partial { stroke: var(--cl-gold); stroke-dasharray: 6 4; }
.clwf-path.is-off, .clwf-path.is-idle { stroke: #cbd5e1; stroke-dasharray: 3 5; }
.clwf-dot { position: absolute; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--cl-teal); box-shadow: 0 0 0 4px rgba(60, 147, 138, .25); transition: left .6s ease-in-out, top .6s ease-in-out; }
.clwf-list { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; }
.clwf-list li { padding: 4px 0 4px 12px; border-left: 3px solid #cbd5e1; margin-bottom: 4px; color: #475569; }
.clwf-list li.is-on { border-left-color: var(--cl-teal); color: var(--cl-ink); }
.clwf-list li.is-partial { border-left-color: var(--cl-gold); color: var(--cl-ink); }
@media (max-width: 575px) {
    .clwf-stage { gap: 18px; padding: 10px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1fr); }
    .clwf-node { font-size: 12px; padding: 6px; }
    .clwf-msg { display: none; }
}

/* ---------- AI 素養軌：作業分工（task-splitter） ---------- */
.clwk-rows .clwa-row.is-mid { border-color: var(--cl-gold); }
.clwk-core { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--cl-teal-dk); background: var(--cl-teal-bg); border-radius: 50rem; padding: 0 8px; vertical-align: 1px; }
.clwk-mid { color: #6b5416; font-weight: 600; }
.clwk-opt.is-on.is-self { background: var(--cl-teal); border-color: var(--cl-teal); color: #fff; opacity: 1; }
.clwk-opt.is-on.is-with { background: var(--cl-blue); border-color: var(--cl-blue); color: #fff; opacity: 1; }
.clwk-opt.is-on.is-ai { background: #52606d; border-color: #52606d; color: #fff; opacity: 1; }
.clwk-dist { display: flex; gap: 3px; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.clwk-seg { flex: 1 1 0; color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clwk-seg.is-self { background: var(--cl-teal); }
.clwk-seg.is-with { background: var(--cl-blue); }
.clwk-seg.is-ai { background: #52606d; }

/* ---------- Linux 終端機模擬器（linux-sim，沿用 cgs- 按鈕與終端機） ---------- */
.cls-cmds .cgs-cmd { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cls-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; margin-bottom: 12px; align-items: stretch; }
.cls-tree { border: 1px solid var(--cl-line); border-radius: 10px; background: #f8fafc; padding: 8px 10px; max-height: 420px; overflow: auto; min-width: 0; }
.cls-tree-b { font-family: var(--cl-mono); font-size: 12.5px; }
.cls-node { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; white-space: nowrap; transition: background-color .4s ease; }
.cls-node .cls-ic { width: 1.2em; text-align: center; flex: 0 0 auto; }
.cls-node .cls-nm { color: #334155; }
.cls-node.is-dir > .cls-nm { color: var(--cl-blue); font-weight: 700; }
.cls-node .cls-perm { color: #64748b; font-size: 11.5px; margin-left: 4px; }
.cls-node .cls-here { color: var(--cl-teal-dk); font-size: 11.5px; font-weight: 700; margin-left: 4px; font-family: inherit; }
.cls-node.is-cwd { background: rgba(60, 147, 138, 0.12); }
.cls-node.is-changed, .cls-node.is-new { background: rgba(255, 196, 0, 0.22); }
.cls-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cls-term { height: 230px; }
.cls-view:empty { display: none; }
.cls-file, .cls-pipe { border: 1px solid var(--cl-line); border-radius: 10px; padding: 8px 10px; background: #fff; min-width: 0; }
.cls-file pre, .cls-stage pre { margin: 0; font-family: var(--cl-mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; color: #1f2933; }
.cls-stage { border: 1px solid #d9e2ec; border-radius: 8px; padding: 6px 8px; background: #f8fafc; }
.cls-stage code { display: block; font-family: var(--cl-mono); font-size: 12.5px; color: var(--cl-blue); font-weight: 700; margin-bottom: 4px; }
.cls-arrow { text-align: center; color: var(--cl-teal-dk); font-family: var(--cl-mono); font-size: 12px; font-weight: 700; padding: 2px 0; }
.cls-nano { border-radius: 10px; overflow: hidden; background: var(--cl-term); color: #e2e8f0; font-family: var(--cl-mono); font-size: 12.5px; }
.cls-nano-h { background: #e2e8f0; color: #1f2933; padding: 3px 8px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.cls-nano-b { padding: 6px 8px; min-height: 120px; max-height: 220px; overflow: auto; white-space: pre-wrap; }
.cls-nano-b .is-hit { background: rgba(94, 234, 212, 0.25); }
.cls-nano-msg { text-align: center; color: #fde68a; padding: 2px 8px; min-height: 1.4em; }
.cls-nano-k { background: #1e293b; color: #94a3b8; padding: 4px 8px; font-size: 11.5px; white-space: pre-wrap; }
@media (max-width: 767px) {
    .cls-grid { grid-template-columns: 1fr; }
    .cls-tree { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .cls-node { transition: none; } }

/* ---------- AI 素養軌：迷你助手實驗室（assistant-lab） ---------- */
.clwl-mode { font-size: 13.5px; margin-bottom: 12px; line-height: 1.7; }
.clwl-badge { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 50rem; padding: 1px 10px; background: #e2e8f0; color: #475569; }
.clwl-badge.is-live { background: var(--cl-teal-bg); color: var(--cl-teal-dk); }
.clwl-prompt { font-size: 13.5px; line-height: 1.7; resize: vertical; }
.clwl-prompt[readonly] { background: #f8fafc; color: #475569; }
.clwl-elements { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; color: #475569; }
.clwl-q { font-weight: 700; margin-bottom: 6px; }
.clwl-ans { white-space: pre-wrap; background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; line-height: 1.75; margin-bottom: 8px; min-height: 38px; }
.clwl-wait { color: var(--cl-muted); }
.clwl-grades .clwc-v { font-size: 12.5px; }
.clwl-g.is-on.is-good, .clwl-g.is-on.is-held { background: var(--cl-teal); border-color: var(--cl-teal); color: #fff; }
.clwl-g.is-on.is-wrong, .clwl-g.is-on.is-miss { background: var(--cl-red); border-color: var(--cl-red); color: #fff; }
.clwl-hist { margin-top: 14px; overflow-x: auto; }
.clwl-table { font-family: inherit; width: 100%; }
.clwl-table td, .clwl-table th { font-size: 13px; }
.clwl-td-prompt { text-align: left !important; color: var(--cl-muted); }

/* ---------- JavaScript 軌跡（trace-player lang='js'） ---------- */
.clt-vars th .clt-closure { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 50rem; background: rgba(60, 147, 138, 0.14); color: var(--cl-teal-dk); font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.clt-vars tr.is-closure th { color: var(--cl-teal-dk); }
.clt-val.v-tdz { color: #94a3b8; font-style: italic; font-family: inherit; }

/* ---------- 網頁沙箱（web-sandbox） ---------- */
.cws-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cws-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.cws-tab { border: 1px solid #cbd2d9; background: #fff; color: #52606d; border-radius: 50rem; padding: 3px 12px; font-size: 12.5px; cursor: pointer; }
.cws-tab.is-on { background: var(--cl-teal); border-color: var(--cl-teal); color: #fff; }
.cws-acts { display: flex; gap: 6px; }
.cws-editor { border: 1px solid var(--cl-line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.cws-editor .CodeMirror { height: auto; min-height: 120px; max-height: 320px; font-size: 13px; }
.cws-editor .CodeMirror-scroll { max-height: 320px; }
.cws-ta { width: 100%; border: 0; font-family: var(--cl-mono); font-size: 13px; padding: 8px; }
.cws-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; margin-bottom: 12px; }
.cws-grid.no-dom { grid-template-columns: minmax(0, 1fr); }
.cws-left { min-width: 0; }
.cws-frame { border: 1px solid var(--cl-line); border-radius: 10px; overflow: hidden; background: #fff; margin-bottom: 8px; }
.cws-frame iframe { display: block; width: 100%; border: 0; background: #fff; }
.cws-console { height: 130px; }
.cws-console .warn { color: #fde68a; margin-bottom: 4px; }
.cws-dom { border: 1px solid var(--cl-line); border-radius: 10px; background: #f8fafc; padding: 8px 10px; max-height: 440px; overflow: auto; min-width: 0; }
.cws-tree { font-family: var(--cl-mono); font-size: 12px; }
.cws-node { padding: 1px 4px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .4s ease; }
.cws-node .cws-tag { color: var(--cl-blue); }
.cws-node .cws-val { color: var(--cl-teal-dk); }
.cws-node.is-text { color: #52606d; }
.cws-node.is-changed { background: rgba(255, 196, 0, 0.25); }
@media (max-width: 767px) { .cws-grid { grid-template-columns: 1fr; } .cws-dom { max-height: 260px; } }
@media (prefers-reduced-motion: reduce) { .cws-node { transition: none; } }

/* ---------- JavaScript 概念小工具：js-coercion（cjc-）、event-loop（cel-）、event-flow（cef-） ---------- */
.cjc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.cjc-slot { border: 2px solid #cbd2d9; background: #fff; border-radius: 50rem; padding: 3px 14px; font-family: var(--cl-mono); font-size: 13px; cursor: pointer; color: #334155; }
.cjc-slot.is-on { border-color: var(--cl-blue); color: var(--cl-blue); font-weight: 700; }
.cjc-hint { color: #64748b; font-size: 13px; }
.cjc-out { margin-top: 10px; }
.cjc-table { border-collapse: collapse; font-size: 13.5px; margin-bottom: 8px; }
.cjc-table th { text-align: left; font-family: var(--cl-mono); font-weight: 600; color: #475569; padding: 4px 14px 4px 0; white-space: nowrap; }
.cjc-table td { font-family: var(--cl-mono); padding: 4px 8px; border-radius: 6px; }
.cjc-table td.is-true { color: var(--cl-teal-dk); font-weight: 700; }
.cjc-table td.is-false { color: #c0392b; font-weight: 700; }
.cjc-table td.is-nan { color: #b45309; }
.cjc-h { font-weight: 700; font-size: 13.5px; margin: 6px 0 4px; }
.cjc-steps { margin: 0 0 6px; padding-left: 22px; font-size: 13.5px; }
.cjc-note { font-size: 13px; color: #475569; background: #f8fafc; border-left: 3px solid var(--cl-teal); padding: 6px 10px; border-radius: 6px; }
.clw-input.is-bad { border-color: #c0392b; }

.cel-title { font-weight: 700; margin-bottom: 8px; }
.cel-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.cel-stepno { color: #64748b; font-size: 13px; margin-left: 4px; }
.cel-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; }
.cel-code { margin: 0; background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 10px; padding: 8px 0; font-family: var(--cl-mono); font-size: 12.5px; overflow-x: auto; }
.cel-line { padding: 1px 10px; white-space: pre; border-left: 3px solid transparent; }
.cel-line.is-cur { background: rgba(255, 196, 0, 0.25); border-left-color: #d69e2e; }
.cel-ln { display: inline-block; width: 1.8em; color: #94a3b8; text-align: right; margin-right: 8px; }
.cel-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cel-panel { border: 1px solid var(--cl-line); border-radius: 10px; background: #fff; min-width: 0; }
.cel-panel.is-out { grid-column: 1 / -1; }
.cel-ph { font-size: 12px; font-weight: 700; color: #475569; padding: 5px 8px; border-bottom: 1px solid var(--cl-line); background: #f8fafc; border-radius: 10px 10px 0 0; }
.cel-panel.is-stack .cel-ph { color: var(--cl-blue); }
.cel-panel.is-micro .cel-ph { color: #7c3aed; }
.cel-panel.is-task .cel-ph { color: var(--cl-teal-dk); }
.cel-pb { padding: 6px 8px; min-height: 52px; display: flex; flex-direction: column; gap: 4px; }
.cel-item { font-family: var(--cl-mono); font-size: 12px; padding: 3px 8px; border-radius: 6px; background: #eef2f7; color: #1f2933; overflow-wrap: anywhere; }
.cel-panel.is-stack .cel-item.is-top { background: rgba(60, 111, 154, 0.16); font-weight: 700; }
.cel-panel.is-micro .cel-item { background: rgba(124, 58, 237, 0.1); }
.cel-panel.is-task .cel-item { background: rgba(60, 147, 138, 0.14); }
.cel-panel.is-out .cel-pb { background: var(--cl-term); border-radius: 0 0 10px 10px; min-height: 40px; }
.cel-log { font-family: var(--cl-mono); font-size: 12.5px; color: #e2e8f0; }
.cel-panel.is-out .cel-empty { color: #94a3b8; }
.cel-empty { color: #94a3b8; font-size: 12px; }
.cel-note { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(60, 147, 138, 0.08); border: 1px solid rgba(60, 147, 138, 0.3); font-size: 13.5px; }
.cel-time { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 50rem; background: #fff; border: 1px solid #cbd2d9; font-family: var(--cl-mono); font-size: 12px; }
@media (max-width: 767px) { .cel-grid { grid-template-columns: 1fr; } }

.cef-opts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-size: 13.5px; }
.cef-opt { margin: 0; cursor: pointer; }
.cef-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.cef-stage { display: flex; align-items: center; justify-content: center; padding: 8px; }
.cef-box { position: relative; border: 2px dashed #94a3b8; border-radius: 12px; padding: 30px 18px 18px; transition: background-color .3s ease, border-color .3s ease; }
.cef-outer { background: #f8fafc; width: 100%; max-width: 320px; }
.cef-inner { background: #fff; }
.cef-tag { position: absolute; top: 6px; left: 10px; font-family: var(--cl-mono); font-size: 12px; color: #475569; }
.cef-btn { display: block; margin: 0 auto; border: 2px solid var(--cl-blue); background: #fff; color: var(--cl-blue); border-radius: 50rem; padding: 6px 22px; font-weight: 700; cursor: pointer; transition: background-color .3s ease; }
.cef-box.is-lit { background: rgba(255, 196, 0, 0.3); border-color: #d69e2e; }
.cef-btn.is-lit { background: rgba(255, 196, 0, 0.6); }
.cef-side { min-width: 0; }
.cef-code { margin: 0 0 8px; background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 10px; padding: 8px 10px; font-family: var(--cl-mono); font-size: 12px; white-space: pre-wrap; }
.cef-log { height: 120px; }
.cef-deleg { border: 1px solid var(--cl-line); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.cef-list { margin: 4px 0 8px; padding-left: 20px; }
.cef-list li { cursor: pointer; padding: 2px 6px; border-radius: 6px; width: fit-content; }
.cef-list li.is-new { color: var(--cl-teal-dk); }
.cef-list li.is-hit { background: rgba(255, 196, 0, 0.35); }
.cef-dlog { margin-top: 6px; font-size: 13px; color: #475569; }
@media (max-width: 767px) { .cef-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cef-box, .cef-btn { transition: none; } }

/* ---------- C++ 記憶體畫面（trace-player：lang cpp） ---------- */
.clt-cvars th { vertical-align: top; }
.clt-cvars th .clt-vt { display: block; font-size: 10px; font-weight: 500; color: #94a3b8; text-align: right; line-height: 1.2; }
.clt-cvars td.clt-addr { font-size: 10.5px; color: #94a3b8; padding: 3px 6px 3px 2px; vertical-align: top; }
.clt-cvars td.clt-vv { vertical-align: top; }
.clt-cvars tr.is-ref th .clt-vn, .clt-cvars tr.is-self th .clt-vn { color: var(--cl-teal-dk); }
.clt-cframe.is-global .clt-frame-h { background: #fdf8ec; color: #7a5b13; }
.clt-val.v-ptr { color: #0e6a7a; }
.clt-val.v-ref { color: var(--cl-teal-dk); font-style: italic; }
.clt-val.v-cont { color: #475569; font-size: 12px; }
.clt-val.v-bad { color: var(--cl-red); }
.clt-val.v-raw { color: #cbd5e1; }
.clt-val.is-changed { background: #fff3c4; }
.clt-ref.is-refdot { background: var(--cl-teal); }
.clt-ref.is-bad { background: var(--cl-red); }
.clt-carr { padding: 2px 0 0; }
.clt-cell .clt-ax { display: block; font-size: 9px; color: #a0aec0; border-top: 1px dashed #eef2f7; padding: 0 3px; }
.clt-cell.is-raw { background: #f8fafc; border-style: dashed; }
.clt-crows { display: flex; flex-direction: column; gap: 3px; padding: 2px 0; }
.clt-crow { display: flex; align-items: center; gap: 4px; }
.clt-crow > b { font-size: 10px; font-weight: 600; color: #94a3b8; min-width: 22px; text-align: right; }
.clt-cobj { display: inline-block; vertical-align: top; }
.clt-cobj-h { font-size: 10.5px; color: #94a3b8; padding: 0 2px; }
.clt-cobj .clt-kv { margin: 0; }
.clt-cobj .clt-kv td { padding: 2px 6px; }
.clt-cobj .clt-kv td.clt-fk { color: #475569; }
.clt-cobj .clt-kv tr.is-base > td { background: #f8fafc; }
.clt-cblk .clt-obj-h .clt-addr { margin-left: 8px; color: #94a3b8; }
.clt-cblk > .clt-cobj, .clt-cblk > .clt-cmap { margin: 6px 8px 8px; }
.clt-cblk.is-freed { opacity: .6; border-style: dashed; border-color: var(--cl-red); }
.clt-freed-tag { color: var(--cl-red); margin-left: 8px; font-weight: 700; }
.clt-cmap td.clt-addr { font-size: 9.5px; color: #a0aec0; border: none; }
.clt-cnodes { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 8px 8px; }
.clt-cnode { border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px 6px; text-align: center; background: #fff; }
.clt-cnode > small { display: block; font-size: 9px; color: #a0aec0; }
.clt-clink { color: #94a3b8; font-size: 12px; }
.clt-cempty { color: #94a3b8; font-size: 12px; font-style: italic; }
.clt-arrows path.is-ref { stroke: var(--cl-teal); stroke-dasharray: 5 3; }
.clt-arrows path.is-bad { stroke: var(--cl-red); stroke-dasharray: 2 3; }
.clt-cvars td.clt-vv > .clt-carr, .clt-cvars td.clt-vv > .clt-crows { margin-bottom: 12px; }
.clt.is-cpp .clt-body { grid-template-columns: minmax(240px, 36%) 1fr; }
@media (max-width: 991px) { .clt.is-cpp .clt-body { grid-template-columns: 1fr; } }
.clt.is-cpp .clt-mem { max-height: 640px; }
.clt.is-java .clt-body, .clt.is-php .clt-body { grid-template-columns: minmax(240px, 36%) 1fr; }
@media (max-width: 991px) { .clt.is-java .clt-body, .clt.is-php .clt-body { grid-template-columns: 1fr; } }
/* Java：長字串截短顯示（完整內容在 title），避免變數欄把物件欄擠出畫面 */
.clt.is-java .clt-vars .clt-val.v-str, .clt.is-php .clt-vars .clt-val.v-str { display: inline-block; max-width: 13em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.clt-cvars th .clt-vt { max-width: 96px; overflow: hidden; text-overflow: ellipsis; margin-left: auto; }
.clt-cvars td.clt-addr { font-size: 10px; }

/* ---------- cpp-thread-sim（多執行緒模擬器） ---------- */
.cts-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; font-size: 13.5px; }
.cts-opt { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cts-acts { display: flex; gap: 8px; margin-bottom: 10px; }
.cts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(200px, 1.1fr); gap: 10px; align-items: start; }
@media (max-width: 991px) { .cts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .cts-grid { grid-template-columns: 1fr; } }
.cts-lane { border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.cts-lane.is-run { border-color: var(--cl-blue); }
.cts-lane.is-wait { border-color: var(--cl-gold); background: #fffbeb; }
.cts-lane.is-done { opacity: .7; }
.cts-lane.is-new { opacity: .55; border-style: dashed; }
.cts-lane-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 13.5px; }
.cts-st { font-size: 11.5px; color: var(--cl-muted); text-align: right; }
.cts-lane.is-wait .cts-st { color: #8a6514; font-weight: 700; }
.cts-code { margin: 0; padding: 0 0 0 4px; list-style: none; font-family: var(--cl-mono); font-size: 11.5px; max-height: 210px; overflow: auto; }
.cts-code li { padding: 1px 6px; border-radius: 4px; color: #475569; white-space: normal; }
.cts-code li.is-past { color: #b6c0cc; }
.cts-code li.is-pc { background: #fff3c4; color: var(--cl-ink); font-weight: 700; }
.cts-regs { font-family: var(--cl-mono); font-size: 12px; color: var(--cl-teal-dk); min-height: 1em; }
.cts-step { align-self: flex-start; }
.cts-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cts-mem-h { font-size: 11.5px; font-weight: 700; color: var(--cl-muted); letter-spacing: .5px; }
.cts-mem { display: flex; flex-direction: column; gap: 6px; }
.cts-cell { display: flex; justify-content: space-between; align-items: center; border: 1px solid #cbd5e1; border-radius: 8px; padding: 4px 10px; background: #fff; font-family: var(--cl-mono); font-size: 13px; }
.cts-cell b { color: var(--cl-blue-dk); font-size: 15px; }
.cts-expect { font-size: 12px; color: var(--cl-muted); }
.cts-result { font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.cts-result.is-ok { background: var(--cl-teal-bg); color: var(--cl-teal-dk); }
.cts-result.is-bad { background: var(--cl-red-bg); color: var(--cl-red); }
.cts-out { margin: 0; min-height: 2.2em; background: var(--cl-term); color: #e2e8f0; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; white-space: pre-wrap; }
.cts-log { margin: 0; padding: 6px 10px 6px 26px; max-height: 190px; overflow: auto; background: #f8fafc; border: 1px solid var(--cl-line); border-radius: 8px; font-size: 12px; }
.cts-log li { margin-bottom: 2px; color: #475569; }
.cts-log li.cts-log-A b { color: var(--cl-blue-dk); }
.cts-log li.cts-log-B b { color: #9b2c53; }
.cts-log li.cts-log-main b { color: var(--cl-teal-dk); }

/* ---------- SQL 軌：左欄這一步的中間結果、右欄資料庫的表格 */
.clt.is-sql .clt-body { grid-template-columns: minmax(260px, 40%) 1fr; }
@media (max-width: 991px) { .clt.is-sql .clt-body { grid-template-columns: 1fr; } }
.clt.is-sql .clt-mem-inner { flex-direction: column; gap: 14px; min-width: 0; }
.clt.is-sql .clt-mem-inner > .clt-col { width: 100%; min-width: 0; }
.clt.is-sql .clt-sql-step, .clt.is-sql .clt-sql-table { max-width: 100%; }
.clt.is-sql .clt-sql-wrap { max-width: 100%; overflow-x: auto; }
.clt-sql-step { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 10px; }
.clt-sql-step.is-err { border-color: var(--cl-red); background: var(--cl-red-bg); }
.clt-sql-ph { font-size: 13px; font-weight: 700; color: var(--cl-blue-dk); margin-bottom: 6px; }
.clt-sql-step.is-err .clt-sql-ph { color: var(--cl-red); }
.clt-sql-wrap { overflow-x: auto; }
.clt-sql-tbl { border-collapse: collapse; font-family: var(--cl-mono); font-size: 12.5px; background: #fff; }
.clt-sql-tbl th { background: #f1f5f9; color: #334155; font-weight: 700; text-align: left; padding: 3px 8px; border: 1px solid #e2e8f0; white-space: nowrap; }
.clt-sql-tbl td { padding: 3px 8px; border: 1px solid #e2e8f0; white-space: nowrap; max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
.clt-sql-tbl .is-num { text-align: right; }
.clt-sql-tbl td.is-null { color: #94a3b8; font-style: italic; }
.clt-sql-tbl tr.is-drop td { color: #94a3b8; text-decoration: line-through; background: #f8fafc; }
.clt-sql-tbl tr.is-new td { background: #e4f3f0; }
.clt-sql-tbl tr.is-upd td { background: #fff3c4; }
.clt-sql-tbl tr.is-del td { background: var(--cl-red-bg); color: var(--cl-red); text-decoration: line-through; }
.clt-sql-tbl tr.is-hit td { background: var(--cl-blue-bg); }
.clt-sql-g0 td { box-shadow: inset 4px 0 0 #3C6F9A; }
.clt-sql-g1 td { box-shadow: inset 4px 0 0 #3C938A; }
.clt-sql-g2 td { box-shadow: inset 4px 0 0 #C8A24B; }
.clt-sql-g3 td { box-shadow: inset 4px 0 0 #B5524C; }
.clt-sql-g4 td { box-shadow: inset 4px 0 0 #7c8ba1; }
.clt-sql-g5 td { box-shadow: inset 4px 0 0 #8a6d3b; }
.clt-sql-tbl tr[class*="clt-sql-g"] td + td { box-shadow: none; }
.clt-sql-pk { color: var(--cl-gold); margin-right: 3px; font-size: 11px; }
.clt-sql-fk { color: var(--cl-teal); margin-right: 2px; }
.clt-sql-more, .clt-sql-empty { font-size: 12px; color: var(--cl-muted); margin-top: 4px; }
.clt-sql-table { margin-bottom: 12px; }
.clt-sql-table.is-touched .clt-sql-name { color: var(--cl-blue-dk); }
.clt-sql-cap { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.clt-sql-name { font-family: var(--cl-mono); font-weight: 700; font-size: 13px; color: #334155; }
.clt-sql-eng { font-size: 11px; color: var(--cl-muted); border: 1px solid var(--cl-line); border-radius: 50rem; padding: 0 7px; }
.clt-sql-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.clt-sql-flag { font-size: 11.5px; border-radius: 50rem; padding: 1px 9px; background: var(--cl-blue-bg); color: var(--cl-blue-dk); }
.clt-sql-flag.is-tx { background: #fff3c4; color: #8a6d3b; }

/* ---------- php-web：模擬瀏覽器＋PHP 伺服器 */
.cpw-browser { border: 1px solid var(--cl-line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.cpw-bar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: #f1f5f9; border-bottom: 1px solid var(--cl-line); }
.cpw-btn { border: 1px solid #cbd2d9; background: #fff; color: #52606d; border-radius: 50rem; padding: 2px 10px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.cpw-btn:hover { border-color: #3C6F9A; color: #3C6F9A; }
.cpw-go { border-color: rgba(60, 111, 154, 0.4); color: #3C6F9A; background: rgba(60, 111, 154, 0.08); font-weight: 600; }
.cpw-addr { flex: 1 1 auto; min-width: 0; border: 1px solid #cbd2d9; border-radius: 50rem; padding: 3px 12px; font-family: var(--cl-mono); font-size: 12.5px; color: #1f2933; }
.cpw-frame { border: 0; border-radius: 0; margin: 0; position: relative; }
.cpw-frame.is-busy::after { content: '請求中…'; position: absolute; right: 10px; top: 8px; font-size: 12px; color: #3C6F9A; background: rgba(255, 255, 255, 0.9); padding: 2px 8px; border-radius: 50rem; }
.cpw-info { border: 1px solid var(--cl-line); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; background: #f8fafc; }
.cpw-ptabs { margin-bottom: 8px; }
.cpw-pbody .note { color: #64748b; font-size: 12.5px; margin-top: 6px; }
.cpw-pre { margin: 0; background: var(--cl-term); color: #e2e8f0; border-radius: 8px; padding: 8px 10px; font-family: var(--cl-mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; }
.cpw-kv { border-collapse: collapse; font-family: var(--cl-mono); font-size: 12.5px; }
.cpw-kv td { border: 1px solid var(--cl-line); padding: 3px 10px; background: #fff; }
.cpw-kv td.k { font-weight: 700; color: #3C6F9A; }
.cpw-hist { margin-bottom: 10px; }
.cpw-hlist { margin: 0; padding-left: 22px; font-family: var(--cl-mono); font-size: 12.5px; color: #334155; }
.cpw-hlist li { margin-bottom: 3px; word-break: break-all; }
.cpw-hlist li b { color: #3C6F9A; }
.cpw-hlist li.s3 { color: #8a5a00; }
.cpw-hlist li.s4, .cpw-hlist li.s5 { color: #b91c1c; }
.cpw-ck { color: #0f766e; }
@media (max-width: 575px) { .cpw-bar { flex-wrap: wrap; } .cpw-addr { flex-basis: 100%; order: 5; } }

/* ---------- 多語言範例（演算法軌）：語言分頁 */
.cl-langbar { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 8px; background: #f1f5f9; border: 1px solid var(--cl-line); border-radius: 50rem; }
.cl-langtab { border: 0; background: transparent; color: #52606d; border-radius: 50rem; padding: 3px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cl-langtab:hover { color: var(--cl-blue); }
.cl-langtab.is-on { background: var(--cl-blue); color: #fff; }
.clb-tryit .cl-langbar { margin-bottom: 6px; }

/* ---------- 演算法視覺化（algo-viz.js） */
.clt-viz { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; border-bottom: 1px solid var(--cl-line); background: #fbfdff; }
.cav-panel { flex: 1 1 280px; min-width: 0; background: #fff; border: 1px solid var(--cl-line); border-radius: 10px; padding: 8px 10px; overflow-x: auto; }
.cav-panel.cav-vars { flex: 0 1 auto; }
.cav-title { font-size: 12.5px; font-weight: 700; color: var(--cl-muted); margin-bottom: 6px; }
.cav-none { color: var(--cl-muted); font-size: 13px; padding: 4px 0; }
.cav-note { color: var(--cl-muted); font-size: 12px; margin-top: 4px; font-family: var(--cl-mono); }
/* 陣列 */
.cav-row, .cav-ptrs { display: flex; gap: 3px; }
.cav-cell, .cav-ptrcell { flex: 0 0 auto; min-width: 34px; text-align: center; }
.cav-cell { position: relative; border: 2px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 2px 3px 0; transition: border-color .15s, background-color .15s; }
.cav-val { font-family: var(--cl-mono); font-size: 13px; font-weight: 700; color: var(--cl-ink); white-space: nowrap; }
.cav-idx { font-size: 10.5px; color: #94a3b8; font-family: var(--cl-mono); }
.cav-cell.is-out { opacity: .35; }
.cav-cell.is-done { background: var(--cl-teal-bg); border-color: #8cc9bf; }
.cav-cell.is-changed { background: #fff6d6; }
.cav-ptrcell { min-height: 18px; display: flex; flex-direction: column; align-items: center; }
.cav-ptr { font-size: 11px; font-weight: 700; font-family: var(--cl-mono); white-space: nowrap; line-height: 1.25; }
.cav-array.is-bars .cav-cell { display: flex; flex-direction: column; justify-content: flex-end; height: 120px; border-color: transparent; background: transparent; padding: 0; }
.cav-array.is-bars .cav-bar { width: 100%; background: #9fb8cf; border-radius: 4px 4px 0 0; transition: height .2s; }
.cav-array.is-bars .cav-cell.is-done .cav-bar { background: #7cc4b8; }
.cav-array.is-bars .cav-cell.is-changed .cav-bar { background: #e0b54a; }
.cav-array.is-bars .cav-cell.is-out .cav-bar { background: #d7dee6; }
.cav-array.is-bars .cav-cell.is-done, .cav-array.is-bars .cav-cell.is-changed { background: transparent; }
.cav-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--cl-muted); font-family: var(--cl-mono); margin-bottom: 2px; }
/* 表格 */
.cav-grid { border-collapse: collapse; font-family: var(--cl-mono); font-size: 12.5px; }
.cav-grid td, .cav-grid th { border: 1px solid #dbe3ea; min-width: 28px; height: 26px; text-align: center; padding: 0 4px; }
.cav-grid th { background: #f1f5f9; color: var(--cl-muted); font-weight: 600; }
.cav-grid td.is-cur { background: var(--cl-blue); color: #fff; font-weight: 700; }
.cav-grid td.is-row { background: var(--cl-blue-bg); }
.cav-grid td.is-changed { background: #fff6d6; }
.cav-grid.is-board td { width: 30px; height: 30px; font-size: 15px; }
.cav-grid td.is-queen { color: var(--cl-red); font-weight: 700; }
/* SVG：樹、圖、遞迴樹 */
.cav-svgwrap { overflow-x: auto; }
.cav-svg { display: block; width: 100%; height: auto; }
.cav-edge { stroke: #b6c2cf; stroke-width: 1.5; }
.cav-node circle { fill: #fff; stroke: var(--cl-blue); stroke-width: 2; }
.cav-node text { font-family: var(--cl-mono); font-size: 12px; font-weight: 700; fill: var(--cl-ink); }
.cav-node.is-ptr circle { fill: var(--cl-blue); }
.cav-node.is-ptr > text:not(.cav-tag):not(.cav-sub) { fill: #fff; }
.cav-node.is-visited circle { fill: var(--cl-teal-bg); stroke: var(--cl-teal); }
.cav-node.is-root circle { stroke-width: 3; }
.cav-tag { font-size: 10.5px !important; fill: var(--cl-red) !important; }
.cav-sub { font-size: 10px !important; font-weight: 400 !important; fill: #94a3b8 !important; }
.cav-call rect { fill: #fff; stroke: #b6c2cf; stroke-width: 1.5; }
.cav-call text { font-family: var(--cl-mono); font-size: 12px; fill: var(--cl-ink); }
.cav-call.is-active rect { fill: var(--cl-blue); stroke: var(--cl-blue); }
.cav-call.is-active text { fill: #fff; font-weight: 700; }
.cav-call.is-done rect { fill: var(--cl-teal-bg); stroke: var(--cl-teal); }
.cav-call .cav-ret { font-size: 11px; fill: var(--cl-teal-dk); font-weight: 700; }
.cav-graph .cav-gedge { stroke: #c4ced8; stroke-width: .7; }
.cav-graph .cav-gedge.is-on { stroke: var(--cl-teal); stroke-width: 1.4; }
.cav-graph .cav-w { font-family: var(--cl-mono); font-size: 3.4px; fill: #64748b; }
.cav-gnode circle { fill: #fff; stroke: #94a3b8; stroke-width: .8; }
.cav-gnode text { font-family: var(--cl-mono); font-size: 4.2px; font-weight: 700; fill: var(--cl-ink); }
.cav-gnode .cav-gdist { font-size: 3.6px; fill: var(--cl-red); }
.cav-gnode.is-visited circle { fill: var(--cl-teal-bg); stroke: var(--cl-teal); }
.cav-gnode.is-frontier circle { fill: #fff6d6; stroke: #C8A24B; }
.cav-gnode.is-done circle { fill: #7cc4b8; stroke: var(--cl-teal-dk); }
.cav-gnode.is-cur circle { fill: var(--cl-blue); stroke: var(--cl-blue-dk); stroke-width: 1.2; }
.cav-gnode.is-cur text:not(.cav-gdist) { fill: #fff; }
.cav-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--cl-muted); margin-top: 4px; }
.cav-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #94a3b8; margin-right: 4px; vertical-align: -1px; }
.cav-lg.is-cur i { background: var(--cl-blue); border-color: var(--cl-blue-dk); }
.cav-lg.is-frontier i { background: #fff6d6; border-color: #C8A24B; }
.cav-lg.is-visited i { background: var(--cl-teal-bg); border-color: var(--cl-teal); }
/* 鏈結串列、雜湊桶 */
.cav-lrow, .cav-brow { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; margin: 4px 0; padding-top: 14px; }
.cav-lhead, .cav-bidx { font-family: var(--cl-mono); font-size: 12px; font-weight: 700; color: var(--cl-blue); white-space: nowrap; }
.cav-bidx { min-width: 22px; text-align: right; color: #94a3b8; }
.cav-brow { padding-top: 0; }
.cav-brow.is-cur .cav-bidx { color: var(--cl-blue); }
.cav-lnode { position: relative; font-family: var(--cl-mono); font-size: 12.5px; font-weight: 700; border: 2px solid #cbd5e1; border-radius: 6px; padding: 2px 8px; background: #fff; white-space: nowrap; }
.cav-lnode.is-ptr { background: var(--cl-blue-bg); }
.cav-ltag { position: absolute; left: 0; top: -15px; font-size: 10.5px; white-space: nowrap; color: var(--cl-red); }
.cav-lnull { position: relative; font-family: var(--cl-mono); font-size: 12px; color: #94a3b8; }
.cav-larrow { color: #94a3b8; }
.cav-bempty { color: #cbd5e1; }
/* 字典、數字變數 */
.cav-kv { border-collapse: collapse; font-family: var(--cl-mono); font-size: 12.5px; }
.cav-kv th, .cav-kv td { border: 1px solid #dbe3ea; padding: 2px 10px; }
.cav-kv th { background: #f1f5f9; color: var(--cl-muted); font-weight: 600; }
.cav-kv tr.is-cur td { background: var(--cl-blue-bg); font-weight: 700; }
.cav-kv tr.is-changed td { background: #fff6d6; }
.cav-vars { display: flex; flex-wrap: wrap; gap: 8px; }
.cav-var { border: 1px solid var(--cl-line); border-radius: 8px; padding: 4px 12px; text-align: center; min-width: 70px; }
.cav-var.is-changed { background: #fff6d6; }
.cav-vlabel { font-size: 11.5px; color: var(--cl-muted); }
.cav-vval { font-family: var(--cl-mono); font-size: 18px; font-weight: 700; color: var(--cl-blue); }
@media (prefers-reduced-motion: reduce) { .cav-cell, .cav-array.is-bars .cav-bar { transition: none; } }
.cav-panel.is-wide { flex-basis: 100%; }