/* v03 學研社 (academy) — 課程社群版型 */
/* 佈局 DNA：固定左側欄導覽＋story 課程圓圈列＋帶進度條的課卡流，企業教育感單藍。 */
/* 變體軸：主藍 hue ±15°、story 圓圈改方圓、左欄改頂欄。 */

/* ============================================================
   雙模式色彩架構（Radix 12 階 primitive → semantic 雙層）
   --lx-n-* 藍墨中性、--lx-b-* 主色藍；l=淺 d=深
   1–2 頁底 · 3–5 元件底 · 6–8 邊框 · 9–10 實色 · 11 次要字 · 12 主文字
   ============================================================ */
:root {
  /* 藍墨中性 12 階 — 淺 */
  --lx-n-l1: #ffffff;  --lx-n-l2: #f7f9fc;  --lx-n-l3: #eef3fa;  --lx-n-l4: #e9eff7;
  --lx-n-l5: #e4ebf5;  --lx-n-l6: #dfe7f2;  --lx-n-l7: #c7d3e5;  --lx-n-l8: #adbad1;
  --lx-n-l9: #93a1bd;  --lx-n-l10: #76839e; --lx-n-l11: #5a6580; --lx-n-l12: #17233c;
  /* 藍墨中性 12 階 — 深 */
  --lx-n-d1: #0f1826;  --lx-n-d2: #182234;  --lx-n-d3: #1f2b40;  --lx-n-d4: #233047;
  --lx-n-d5: #28354d;  --lx-n-d6: #2c3a54;  --lx-n-d7: #394a68;  --lx-n-d8: #4f607c;
  --lx-n-d9: #65758f;  --lx-n-d10: #7c8ba6; --lx-n-d11: #93a1bd; --lx-n-d12: #e7eefb;
  /* 主色藍 12 階 — 淺 */
  --lx-b-l1: #f4f8fd;  --lx-b-l2: #e7f0fb;  --lx-b-l3: #d3e4f7;  --lx-b-l4: #c1d8f3;
  --lx-b-l5: #afccf0;  --lx-b-l6: #9dc0ec;  --lx-b-l7: #5f95d9;  --lx-b-l8: #477dc9;
  --lx-b-l9: #2f65b9;  --lx-b-l10: #2a5aa5; --lx-b-l11: #234f95; --lx-b-l12: #122a4f;
  /* 主色藍 12 階 — 深 */
  --lx-b-d1: #0b1524;  --lx-b-d2: #0f1f38;  --lx-b-d3: #132949;  --lx-b-d4: #173359;
  --lx-b-d5: #1c3e68;  --lx-b-d6: #204878;  --lx-b-d7: #295a97;  --lx-b-d8: #3066b4;
  --lx-b-d9: #3672d1;  --lx-b-d10: #4d86df; --lx-b-d11: #7aa7e8; --lx-b-d12: #cfe0f8;
  /* 輔色實色（金／綠／金字）成對 l+d */
  --lx-gold-l: #e8b931;  --lx-gold-d: #f0c94f;
  --lx-gold-ink-l: #8a6a0f; --lx-gold-ink-d: #e8c34d;
  --lx-ok-l: #1a8f60;  --lx-ok-d: #37d38f;

  /* 圓角語言 5–6px */
  --lx-r-sm: 5px;
  --lx-r: 6px;
  --lx-r-pill: 999px;

  /* 字體：Plus Jakarta 風幾何無襯線 */
  --lx-font: "Plus Jakarta Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --lx-base: 16px;

  --lx-gap: 20px;
  --lx-pad: 20px;
  --lx-rail-w: 232px;
}

/* ---- semantic：淺色（預設）---- */
:root {
  --lx-primary: var(--lx-b-l9);
  --lx-primary-dk: var(--lx-b-l11);
  --lx-ink: var(--lx-n-l12);
  --lx-accent: var(--lx-gold-l);
  --lx-accent-ink: var(--lx-gold-ink-l);
  --lx-bg: var(--lx-n-l2);
  --lx-surface: var(--lx-n-l1);
  --lx-surface-2: var(--lx-n-l3);
  --lx-line: var(--lx-n-l6);
  --lx-line-strong: var(--lx-n-l7);
  --lx-text: var(--lx-n-l12);
  --lx-muted: var(--lx-n-l11);
  --lx-ok: var(--lx-ok-l);
  --lx-shadow: 0 4px 16px rgba(7, 20, 46, .07);
  --lx-shadow-sm: 0 1px 5px rgba(7, 20, 46, .06);
}
/* @check text=#17233c bg=#f7f9fc muted=#5a6580 primary=#2f65b9 btntext=#ffffff mode=light */

/* ---- semantic：深色 ---- */
[data-mode="dark"] {
  --lx-primary: var(--lx-b-d9);
  --lx-primary-dk: var(--lx-b-d11);
  --lx-ink: var(--lx-n-d12);
  --lx-accent: var(--lx-gold-d);
  --lx-accent-ink: var(--lx-gold-ink-d);
  --lx-bg: var(--lx-n-d1);
  --lx-surface: var(--lx-n-d2);
  --lx-surface-2: var(--lx-n-d3);
  --lx-line: var(--lx-n-d6);
  --lx-line-strong: var(--lx-n-d7);
  --lx-text: var(--lx-n-d12);
  --lx-muted: var(--lx-n-d11);
  --lx-ok: var(--lx-ok-d);
  --lx-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  --lx-shadow-sm: 0 1px 6px rgba(0, 0, 0, .4);
}
/* @check text=#e7eefb bg=#0f1826 muted=#93a1bd primary=#3672d1 btntext=#ffffff mode=dark */

/* ---- 未手動切換時跟隨系統 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --lx-primary: var(--lx-b-d9);
    --lx-primary-dk: var(--lx-b-d11);
    --lx-ink: var(--lx-n-d12);
    --lx-accent: var(--lx-gold-d);
    --lx-accent-ink: var(--lx-gold-ink-d);
    --lx-bg: var(--lx-n-d1);
    --lx-surface: var(--lx-n-d2);
    --lx-surface-2: var(--lx-n-d3);
    --lx-line: var(--lx-n-d6);
    --lx-line-strong: var(--lx-n-d7);
    --lx-text: var(--lx-n-d12);
    --lx-muted: var(--lx-n-d11);
    --lx-ok: var(--lx-ok-d);
    --lx-shadow: 0 6px 22px rgba(0, 0, 0, .5);
    --lx-shadow-sm: 0 1px 6px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--lx-font);
  font-size: var(--lx-base);
  line-height: 1.65;
  color: var(--lx-text);
  background: var(--lx-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--lx-font); font-weight: 700; line-height: 1.3; margin: 0 0 .5em; color: var(--lx-ink); }
a { color: var(--lx-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ===== 左側欄導覽 ===== */
.lx-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--lx-rail-w);
  background: var(--lx-surface); border-right: 1px solid var(--lx-line);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; z-index: 40;
}
.lx-rail-brand { font-weight: 800; font-size: 21px; color: var(--lx-ink); padding: 4px 10px 18px; letter-spacing: -.01em; }
.lx-rail-brand em { font-style: normal; color: var(--lx-primary); }
.lx-rail-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--lx-r); color: var(--lx-muted); font-weight: 600; font-size: 15px;
}
.lx-rail-link:hover { background: var(--lx-surface-2); text-decoration: none; }
.lx-rail-link.lx-on { background: var(--lx-primary); color: #fff; }
.lx-rail-link .lx-ico { width: 20px; text-align: center; }
.lx-rail-foot { margin-top: auto; padding: 10px 12px; font-size: 12px; color: var(--lx-muted); }

/* 晝夜切換：軌道滑鈕（本套識別式樣） */
.lx-rail-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--lx-r); color: var(--lx-muted); font-weight: 700; font-size: 13px; background: var(--lx-surface-2); border: 1px solid var(--lx-line); cursor: pointer; font-family: var(--lx-font); width: 100%; margin-top: 8px; }
.lx-rail-toggle:hover { border-color: var(--lx-primary); color: var(--lx-primary); }
.lx-tgl-txt::after { content: "夜間模式"; }
[data-mode="dark"] .lx-tgl-txt::after { content: "日間模式"; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .lx-tgl-txt::after { content: "日間模式"; } }
.lx-tgl-knob { width: 38px; height: 20px; border-radius: 999px; background: var(--lx-n-l7); position: relative; flex: none; transition: background .15s; }
.lx-tgl-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
[data-mode="dark"] .lx-tgl-knob { background: var(--lx-primary); }
[data-mode="dark"] .lx-tgl-knob::after { left: 20px; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .lx-tgl-knob { background: var(--lx-primary); } :root:not([data-mode="light"]) .lx-tgl-knob::after { left: 20px; } }

/* 主內容區 */
.lx-main { margin-left: var(--lx-rail-w); padding: 24px 26px 60px; max-width: 1080px; }
.lx-stack { display: flex; flex-direction: column; gap: var(--lx-gap); }

/* ===== 卡片 ===== */
.lx-card { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-r); box-shadow: var(--lx-shadow-sm); padding: var(--lx-pad); }
.lx-card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lx-muted); margin-bottom: 12px; }
.lx-sec-h { font-size: 22px; margin: 8px 0 14px; }

/* ===== 招牌：story 課程圓圈列 ===== */
.lx-stories { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 8px; }
.lx-story { text-align: center; flex: none; width: 76px; }
.lx-story-ring {
  width: 66px; height: 66px; margin: 0 auto 6px; border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--lx-primary) var(--deg, 270deg), var(--lx-line) 0);
}
.lx-story-ring > span {
  width: 100%; height: 100%; border-radius: 50%; background: var(--lx-surface-2);
  display: grid; place-items: center; font-size: 26px; border: 2px solid var(--lx-surface);
}
.lx-story-ring.lx-done { background: var(--lx-ok); }
.lx-story-name { font-size: 12px; color: var(--lx-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 課程卡（含進度條） ===== */
.lx-course-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lx-gap); }
.lx-course { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lx-course-cover { height: 110px; background: linear-gradient(125deg, #2f65b9, #07142e); position: relative; }
.lx-course-cover.lx-cv2 { background: linear-gradient(125deg, #1e9e6a, #07142e); }
.lx-course-cover.lx-cv3 { background: linear-gradient(125deg, #e8b931, #b07908); }
.lx-course-lv { position: absolute; left: 12px; bottom: 10px; background: rgba(255,255,255,.92); color: #122a4f; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--lx-r-pill); }
.lx-course-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lx-course-h { font-size: 16px; margin: 0; }
.lx-course-meta { color: var(--lx-muted); font-size: 12px; }
.lx-progress { height: 7px; background: var(--lx-surface-2); border-radius: var(--lx-r-pill); overflow: hidden; margin-top: auto; }
.lx-progress-fill { height: 100%; background: var(--lx-primary); border-radius: var(--lx-r-pill); }
.lx-progress-cap { display: flex; justify-content: space-between; font-size: 12px; color: var(--lx-muted); }

/* ===== 工具表單卡 ===== */
.lx-form-h { display: flex; align-items: center; gap: 10px; }
.lx-form-badge { width: 42px; height: 42px; border-radius: var(--lx-r); background: var(--lx-surface-2); color: var(--lx-primary); display: grid; place-items: center; font-size: 21px; }
.lx-field { margin-bottom: 14px; }
.lx-label { display: block; font-weight: 700; font-size: 13px; color: var(--lx-ink); margin-bottom: 6px; }
.lx-input, .lx-select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm);
  background: var(--lx-surface); color: var(--lx-text); font: inherit;
}
.lx-input:focus, .lx-select:focus { outline: none; border-color: var(--lx-primary); box-shadow: 0 0 0 3px rgba(47,101,185,.16); }
.lx-radios { display: flex; flex-wrap: wrap; gap: 14px; }
.lx-radios label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; cursor: pointer; }
.lx-radios input { accent-color: var(--lx-primary); width: 16px; height: 16px; }
.lx-btnbar { display: flex; gap: 10px; margin-top: 4px; }
.lx-btn { font-family: var(--lx-font); font-weight: 700; border: none; cursor: pointer; padding: 11px 20px; border-radius: var(--lx-r-sm); font-size: 15px; }
.lx-btn-main { background: var(--lx-primary); color: #fff; flex: 1; }
.lx-btn-main:hover { background: var(--lx-primary-dk); }
.lx-btn-soft { background: var(--lx-surface-2); color: var(--lx-primary); border: 1px solid var(--lx-line); }

/* ===== 結果貼文卡 ===== */
.lx-post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lx-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--lx-surface-2); border: 2px solid var(--lx-primary); display: grid; place-items: center; font-size: 20px; flex: none; }
.lx-post-who { flex: 1; min-width: 0; }
.lx-post-name { font-weight: 700; font-size: 16px; color: var(--lx-ink); }
.lx-post-meta { color: var(--lx-muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lx-post-tag { background: var(--lx-surface-2); color: var(--lx-primary); font-weight: 700; padding: 1px 9px; border-radius: var(--lx-r-sm); }
.lx-post-serial { font-variant-numeric: tabular-nums; }
.lx-post-text { margin: 4px 0 12px; }
.lx-result-box { border: 1px solid var(--lx-line); border-top: 3px solid var(--lx-accent); border-radius: var(--lx-r-sm); padding: 12px 14px; margin-bottom: 12px; background: var(--lx-surface-2); }
.lx-result-box b { color: var(--lx-primary-dk); }
.lx-stars { color: var(--lx-accent); font-size: 17px; letter-spacing: 2px; }
.lx-stars .lx-off { color: var(--lx-line); }
.lx-acts { display: flex; gap: 4px; border-top: 1px solid var(--lx-line); padding-top: 10px; margin-top: 12px; }
.lx-act { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: var(--lx-muted); font: inherit; font-weight: 600; font-size: 14px; padding: 7px 12px; border-radius: var(--lx-r-sm); }
.lx-act:hover { background: var(--lx-surface-2); color: var(--lx-primary); }
.lx-act.lx-hot { color: #d0453c; }

/* ===== 平台數據統計卡 ===== */
.lx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lx-stat { border-left: 3px solid var(--lx-primary); padding: 4px 0 4px 14px; }
.lx-stat:nth-child(2) { border-color: var(--lx-accent); }
.lx-stat:nth-child(3) { border-color: var(--lx-ok); }
.lx-stat-n { font-weight: 800; font-size: 25px; color: var(--lx-ink); }
.lx-stat-l { font-size: 12px; color: var(--lx-muted); }

/* ===== 熱門排行 ===== */
.lx-rank { list-style: none; margin: 0; padding: 0; counter-reset: lxrk; }
.lx-rank li { counter-increment: lxrk; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lx-line); }
.lx-rank li:last-child { border-bottom: none; }
.lx-rank li::before { content: counter(lxrk, decimal-leading-zero); font-weight: 800; font-size: 14px; color: var(--lx-primary); width: 26px; }
.lx-rank .lx-rk-t { flex: 1; font-weight: 600; font-size: 14px; }
.lx-rank .lx-rk-n { font-size: 12px; color: var(--lx-muted); }

/* ===== 文章卡 ===== */
.lx-article-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lx-gap); }
.lx-article { display: flex; flex-direction: column; gap: 8px; }
.lx-article-cover { height: 110px; border-radius: var(--lx-r-sm); background: linear-gradient(125deg, #2f65b9, #6a9ae0); }
.lx-article-cover.lx-av2 { background: linear-gradient(125deg, #07142e, #2f65b9); }
.lx-article-cover.lx-av3 { background: linear-gradient(125deg, #e8b931, #e88a31); }
.lx-article-kick { color: var(--lx-accent-ink); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.lx-article-h { font-size: 16px; margin: 0; }
.lx-article-ex { color: var(--lx-muted); font-size: 13px; margin: 0; }

/* ===== 文章內文排版 ===== */
.lx-prose { line-height: 1.8; }
.lx-prose h2 { font-size: 22px; margin-top: 1.5em; padding-bottom: 6px; border-bottom: 2px solid var(--lx-surface-2); }
.lx-prose h3 { font-size: 18px; margin-top: 1.2em; color: var(--lx-primary-dk); }
.lx-prose p { margin: .8em 0; }
.lx-tbox { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lx-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.lx-prose th, .lx-prose td { border: 1px solid var(--lx-line); padding: 9px 12px; text-align: left; }
.lx-prose th { background: var(--lx-primary); color: #fff; font-weight: 700; }
.lx-prose blockquote { margin: 1em 0; padding: 12px 16px; background: var(--lx-surface-2); border-left: 4px solid var(--lx-primary); color: var(--lx-ink); border-radius: 0 var(--lx-r-sm) var(--lx-r-sm) 0; }
.lx-faq { border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm); margin: 8px 0; }
.lx-faq summary { cursor: pointer; padding: 12px 14px; font-weight: 700; list-style: none; color: var(--lx-ink); }
.lx-faq summary::-webkit-details-marker { display: none; }
.lx-faq summary::before { content: "Q."; color: var(--lx-primary); font-weight: 800; margin-right: 8px; }
.lx-faq[open] { border-color: var(--lx-primary); }
.lx-faq-a { padding: 0 14px 12px 38px; color: var(--lx-muted); }

/* ===== 工具牆 ===== */
.lx-toolwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lx-gap); }
.lx-tool { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.lx-tool:hover { border-color: var(--lx-primary); box-shadow: var(--lx-shadow); }
.lx-tool-ic { width: 44px; height: 44px; border-radius: var(--lx-r-sm); background: var(--lx-surface-2); display: grid; place-items: center; font-size: 21px; flex: none; }
.lx-tool-nm { font-weight: 700; font-size: 15px; color: var(--lx-ink); }
.lx-tool-ds { color: var(--lx-muted); font-size: 12px; }

/* ===== 麵包屑 ===== */
.lx-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--lx-muted); font-size: 13px; padding: 0 0 16px; }
.lx-crumbs .lx-sep { opacity: .45; }

/* ===== 分頁 ===== */
.lx-pager { display: flex; gap: 6px; justify-content: center; padding: 6px 0; }
.lx-pager a { min-width: 36px; height: 36px; padding: 0 10px; display: grid; place-items: center; border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm); font-weight: 700; color: var(--lx-text); background: var(--lx-surface); }
.lx-pager a.lx-on { background: var(--lx-primary); color: #fff; border-color: var(--lx-primary); }

/* ===== 16:9 影片 ===== */
.lx-video { position: relative; border-radius: var(--lx-r); overflow: hidden; }
.lx-video-ratio { aspect-ratio: 16 / 9; background: linear-gradient(125deg, #0d1f3f, #07142e); }
.lx-video-play { position: absolute; inset: 0; display: grid; place-items: center; }
.lx-video-btn { width: 62px; height: 62px; border-radius: var(--lx-r); background: var(--lx-accent); display: grid; place-items: center; box-shadow: var(--lx-shadow); }
.lx-video-btn::before { content: ""; margin-left: 3px; border-left: 19px solid #0f1d38; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.lx-video-cap { position: absolute; left: 14px; bottom: 12px; color: #fff; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.55); }

/* ===== 圖片網格 2×2 ===== */
.lx-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lx-grid4 div { aspect-ratio: 3 / 2; border-radius: var(--lx-r-sm); }
.lx-grid4 div:nth-child(1) { background: linear-gradient(125deg, #2f65b9, #6a9ae0); }
.lx-grid4 div:nth-child(2) { background: linear-gradient(125deg, #07142e, #2f65b9); }
.lx-grid4 div:nth-child(3) { background: linear-gradient(125deg, #e8b931, #e88a31); }
.lx-grid4 div:nth-child(4) { background: linear-gradient(125deg, #1e9e6a, #0f5f42); }

/* ===== footer ===== */
.lx-foot { border-top: 1px solid var(--lx-line); background: var(--lx-surface); margin-top: 28px; padding: 26px 0 0; }
.lx-foot-cols { display: flex; flex-wrap: wrap; gap: 30px; padding-bottom: 22px; }
.lx-foot-col { min-width: 140px; }
.lx-foot-h { font-weight: 800; font-size: 13px; color: var(--lx-ink); margin-bottom: 10px; }
.lx-foot a { display: block; color: var(--lx-muted); padding: 3px 0; font-size: 14px; }
.lx-foot-base { border-top: 1px solid var(--lx-line); padding: 14px 0; font-size: 13px; color: var(--lx-muted); }

/* ===== 狀態與輔助 ===== */
.lx-btn:disabled { opacity: .5; cursor: not-allowed; }
.lx-btn-main:focus-visible, .lx-btn-soft:focus-visible { outline: 3px solid rgba(47,101,185,.45); outline-offset: 2px; }
.lx-input:disabled, .lx-select:disabled { background: var(--lx-surface-2); color: var(--lx-muted); }
.lx-badge { display: inline-block; background: var(--lx-surface-2); color: var(--lx-primary); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--lx-r-sm); }
.lx-badge.lx-pass { background: rgba(30,158,106,.12); color: var(--lx-ok); }
.lx-badge.lx-gold { background: rgba(232,185,49,.16); color: #9a7710; }
.lx-callout { border: 1px solid var(--lx-line); border-left: 4px solid var(--lx-accent); background: var(--lx-surface-2); border-radius: var(--lx-r-sm); padding: 12px 14px; font-size: 14px; }
.lx-prose tbody tr:nth-child(even) { background: var(--lx-surface-2); }
.lx-muted { color: var(--lx-muted); }
.lx-center { text-align: center; }
.lx-hr { border: none; border-top: 1px solid var(--lx-line); margin: 18px 0; }

/* ===== 響應式 ===== */
@media (max-width: 900px) {
  .lx-course-row, .lx-article-row, .lx-toolwall { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .lx-rail { position: static; width: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--lx-line); }
  .lx-rail-brand { padding: 0 10px 0 0; font-size: 18px; }
  .lx-rail-link { white-space: nowrap; padding: 8px 10px; }
  .lx-rail-foot { display: none; }
  .lx-main { margin-left: 0; padding: 18px 16px 48px; }
}
@media (max-width: 460px) {
  .lx-course-row, .lx-article-row, .lx-toolwall { grid-template-columns: 1fr; }
  .lx-stats { grid-template-columns: 1fr; }
}

/* v2 visual direction: calm learning workspace */
body { background-image: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--lx-primary) 11%, transparent), transparent 30%), linear-gradient(color-mix(in srgb, var(--lx-line) 20%, transparent) 1px, transparent 1px); background-size: auto, 100% 42px; }
.lx-rail { background: color-mix(in srgb, var(--lx-surface) 94%, transparent); backdrop-filter: blur(18px); box-shadow: 12px 0 38px rgba(22,48,92,.06); }
.lx-main { max-width: 1220px; padding-top: 34px; }
.lx-card { border-color: color-mix(in srgb, var(--lx-primary) 10%, var(--lx-line)); box-shadow: 0 12px 32px rgba(31,65,120,.075); transition: transform .2s ease, box-shadow .2s ease; }
.lx-course:hover, .lx-article:hover, .lx-tool:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(31,65,120,.13); }
.lx-form-h { padding: 8px 0 14px; }
.lx-btn-main { box-shadow: 0 9px 22px color-mix(in srgb, var(--lx-primary) 26%, transparent); }
.lx-story-ring { box-shadow: 0 5px 16px rgba(35,79,149,.14); }

/* ============================================================
   廣告版位（lx-adzone）——占位示意；正式站預設 hidden 由 loader 展開，空則塌陷
   贊助標示：合作推薦 ｜ 命名沿用 lx- 前綴 kebab 慣例（本套單欄內容，無側欄版位）
   ============================================================ */
[hidden] { display: none !important; }                 /* 無廣告塌陷保底 */

.lx-adzone { position: relative; min-width: 0; }
.lx-ad-tag {
  display: inline-block; font-family: var(--lx-font);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--lx-primary-dk); background: var(--lx-surface-2);
  border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm); padding: 2px 9px; margin-bottom: 8px;
}
/* 占位示意：斜紋虛線框＋版位名＋尺寸（TOP/STICKY） */
.lx-ad-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 90px; padding: 16px; text-align: center; color: var(--lx-muted);
  border: 1.5px dashed var(--lx-line-strong); border-radius: var(--lx-r);
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb, var(--lx-primary) 8%, transparent) 11px 12px),
    var(--lx-surface-2);
}
.lx-ad-ph-name { font-family: var(--lx-font); font-weight: 800; font-size: 14px; letter-spacing: .1em; color: var(--lx-ink); }
.lx-ad-ph-size { font-size: 12px; font-variant-numeric: tabular-nums; }

/* 原生位：容器沿用 .lx-card 皮膚，浮動合作推薦標＋原生內容 */
.lx-adzone.lx-ad-native > .lx-ad-tag { position: absolute; right: 16px; top: 16px; margin: 0; z-index: 3; }
.lx-ad-nat { display: flex; gap: 13px; align-items: flex-start; }
.lx-ad-thumb { width: 56px; height: 56px; border-radius: var(--lx-r-sm); background: linear-gradient(125deg, var(--lx-primary), var(--lx-accent)); display: grid; place-items: center; font-size: 25px; color: #fff; flex: none; }
.lx-ad-b { min-width: 0; flex: 1; }
.lx-ad-h { font-family: var(--lx-font); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--lx-ink); padding-right: 84px; }
.lx-ad-d { color: var(--lx-muted); font-size: 13px; margin-top: 4px; }
.lx-ad-cta { margin-top: 12px; }
.lx-ad-hint { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .04em; color: var(--lx-muted); opacity: .82; }
/* 文內原生（AD-ARTICLE）——左槓小卡，標示改內聯 */
.lx-adzone.lx-ad-inart { border: 1px solid var(--lx-line); border-left: 3px solid var(--lx-primary); border-radius: var(--lx-r); background: var(--lx-surface-2); padding: 14px 16px; margin: 1.3em 0; }
.lx-adzone.lx-ad-inart > .lx-ad-tag { position: static; margin: 0 0 8px; }
.lx-adzone.lx-ad-inart .lx-ad-thumb { width: 44px; height: 44px; font-size: 21px; }
.lx-adzone.lx-ad-inart .lx-ad-h { font-size: 15px; padding-right: 0; }

/* 行動底部 sticky（≤768 顯示、≤56px、× 可關；坐落共用底部 tab 正上方，z-index 高於 shell 浮層） */
.lx-ad-chk { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.lx-adzone.lx-ad-sticky { display: none; }
@media (max-width: 768px) {
  .lx-adzone.lx-ad-sticky {
    position: fixed; left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 1300;
    box-sizing: border-box; height: 54px; margin: 0; padding: 0 8px 0 12px;
    display: flex; align-items: center; gap: 10px;
    background: var(--lx-surface); border: 1px solid var(--lx-line);
    border-radius: var(--lx-r); box-shadow: var(--lx-shadow);
  }
  .lx-adzone.lx-ad-sticky .lx-ad-tag { margin: 0; flex: none; }
  .lx-adzone.lx-ad-sticky .lx-ad-ph { flex: 1; min-width: 0; min-height: 0; padding: 0; border: none; background: none; flex-direction: row; gap: 8px; justify-content: flex-start; align-items: baseline; }
  .lx-adzone.lx-ad-sticky .lx-ad-ph-name { font-size: 12px; letter-spacing: .06em; }
  .lx-adzone.lx-ad-sticky .lx-ad-ph-size { font-size: 11px; white-space: nowrap; }
  .lx-ad-x { flex: none; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--lx-text); background: var(--lx-surface-2); border: 1px solid var(--lx-line); }
  .lx-ad-chk:checked ~ .lx-adzone.lx-ad-sticky { display: none; }
}

/* ============================================================
   手機廣告強化（只在 ≤768px 生效；桌機完全不變）
   AD-RESULT 大 CTA／AD-STICKY 迷你 CTA 條／AD-INTERSTITIAL 插頁／CTA 加大
   本套單欄內容、無側欄版位，故無側欄回流卡
   全用既有語意變數（--lx-*），雙模式自動跟隨
   ============================================================ */
/* 桌機基態：插頁與示範鈕不顯示（桌機保持原樣） */
.lx-adzone.lx-ad-interstitial { display: flex; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.lx-ad-inter-demo { display: none; }

@media (max-width: 768px) {
  /* 5) 手機 CTA 全面加大：所有廣告版位 CTA ≥44px、字 ≥15px；原生卡整卡可點 */
  .lx-adzone.lx-ad-native { cursor: pointer; }
  .lx-adzone .lx-btn { min-height: 44px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
  .lx-ad-cta { margin-top: 14px; }
  .lx-ad-cta .lx-btn { width: 100%; }

  /* 2) AD-RESULT 手機大 CTA：整卡全寬、CTA 全寬 ≥48px、整卡可點 */
  .lx-adzone.lx-ad-result .lx-ad-nat { flex-direction: column; }
  .lx-adzone.lx-ad-result .lx-ad-h { padding-right: 0; }
  .lx-adzone.lx-ad-result .lx-ad-cta .lx-btn { min-height: 48px; font-size: 16px; }

  /* 3) AD-STICKY 迷你 CTA 條：合作推薦標＋圖示＋一句文案＋CTA 鈕＋× */
  .lx-adzone.lx-ad-sticky { height: auto; min-height: 54px; max-height: 56px; padding: 7px 8px 7px 12px; gap: 8px; }
  .lx-ad-mini-ico { flex: none; font-size: 20px; line-height: 1; }
  .lx-ad-mini-txt { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--lx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lx-ad-mini-cta {
    flex: none; min-height: 40px; padding: 0 14px; border-radius: var(--lx-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--lx-font); font-weight: 700; font-size: 14px;
    background: var(--lx-primary); color: #fff; white-space: nowrap; text-decoration: none;
  }
  .lx-ad-mini-cta:hover { background: var(--lx-primary-dk); }

  /* 4) AD-INTERSTITIAL 插頁：預設關，點示範鈕才出；遮罩 z-index 高於 sticky／底部 tab */
  .lx-ad-inter-demo {
    display: inline-flex; align-items: center; gap: 4px;
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 70px); left: 10px; z-index: 1250;
    padding: 7px 12px; border-radius: var(--lx-r-pill); cursor: pointer;
    font-family: var(--lx-font); font-weight: 700; font-size: 12px;
    color: var(--lx-primary-dk); background: var(--lx-surface);
    border: 1.5px dashed var(--lx-primary); box-shadow: var(--lx-shadow-sm);
  }
  .lx-ad-inter-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); cursor: pointer; }
  .lx-ad-inter-card {
    position: relative; z-index: 1; width: min(92vw, 360px);
    background: var(--lx-surface); border: 1px solid var(--lx-line);
    border-radius: var(--lx-r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.5);
    padding: 24px 20px 20px; text-align: center;
  }
  .lx-adzone.lx-ad-interstitial .lx-ad-tag { position: static; display: inline-block; margin: 0 0 12px; }
  .lx-ad-inter-thumb { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: var(--lx-r); background: linear-gradient(125deg, var(--lx-primary), var(--lx-accent)); font-size: 30px; color: #fff; }
  .lx-ad-inter-h { font-family: var(--lx-font); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--lx-ink); }
  .lx-ad-inter-d { color: var(--lx-muted); font-size: 14px; margin-top: 8px; }
  .lx-ad-inter-cta { margin-top: 16px; }
  .lx-ad-inter-cta .lx-btn { width: 100%; min-height: 48px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
  .lx-ad-inter-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 18px; color: var(--lx-text); background: var(--lx-surface-2); border: 1px solid var(--lx-line); }
  .lx-ad-inter-skip { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--lx-muted); cursor: pointer; }
  .lx-ad-inter-chk:checked ~ .lx-adzone.lx-ad-interstitial { display: flex !important; }
}