/* ========= ICT 共用：基本變數 ========= */
:root {
  --ict-header-bg-start: #ff9800;
  --ict-header-bg-end: #ffb74d;
  --ict-header-text: #ffffff;    /* 白字 */
  --ict-header-tab-bg: #ff9800;  /* 平時：橙底 */
  --ict-header-tab-border: #ffb74d;
  --ict-header-tab-hover-bg: #fb8c00; /* 滑過：深少少橙 */
  --ict-header-tab-hover-text: #ffffff; /* 滑過都係白字 */
}
/* ========= 教學頁共用 layout（避免影響 tools） ========= */

body.ict-unit {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.6;
  background: #f5f7fb;
  color: #222;
}

/* 頂部橙色 header（所有教學頁統一色系） */
body.ict-unit > header {
  background: linear-gradient(135deg, var(--ict-header-bg-start), var(--ict-header-bg-end));
  color: var(--ict-header-text);
  padding: 1.6rem 1rem 2.4rem;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: hidden; /* 收合時唔會漏出內容 */
  max-height: 500px; /* header 展開時嘅高度上限，用嚟做動畫 */
  transition: max-height 0.25s ease-out, padding 0.25s ease-out, opacity 0.25s ease-out;
}

/* 收起時：整個橙色 header sir 上去（高度變 0） */
body.ict-unit.ict-header-collapsed > header {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* 收起時 main 上少少，唔會留太大片空位 */
body.ict-unit.ict-header-collapsed main {
  margin-top: 0.8rem;
}

body.ict-unit > header h1 {
  font-size: 1.8rem;
  margin-bottom: 0.4rem;
}

body.ict-unit > header p {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* 頂部 tabs 導覽列（你而家 header 入面嗰排 button） */
body.ict-unit > header nav {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-height: 96px;
  overflow-x: auto;
}

body.ict-unit > header nav a {
  background: var(--ict-header-tab-bg);
  color: var(--ict-header-text);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  border: 1px solid var(--ict-header-tab-border);
  backdrop-filter: blur(4px);
  transition: background 0.15s, transform 0.05s, color 0.15s;
  white-space: nowrap;
}

body.ict-unit > header nav a:hover {
  background: var(--ict-header-tab-hover-bg);
  color: var(--ict-header-tab-hover-text);
  transform: translateY(-1px);
}

/* 教學頁共用 main / section 基本 card feel（細節照舊可喺各頁 override） */
body.ict-unit main {
  max-width: 1100px;
  margin: 1.8rem auto 3rem;
  padding: 0 1rem;
}

body.ict-unit section {
  background: #ffffff;
  margin-bottom: 1.5rem;
  padding: 1.3rem 1.1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 35, 95, 0.08);
  border: 1px solid #e0e6ff;
}

body.ict-unit section h2 {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #283593;
}

body.ict-unit section h2 .badge {
  background: #ffcc80;
  color: #e65100;
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

/* 手機寬度調整 */
@media (max-width: 720px) {
  body.ict-unit > header {
    padding-bottom: 1.8rem;
  }

  body.ict-unit > header h1 {
    font-size: 1.4rem;
  }

  body.ict-unit section {
    padding: 1rem 0.8rem 1.2rem;
  }

  body.ict-unit > header nav {
    justify-content: flex-start;
  }
}

/* ========= 左邊「單元目錄」滑出 Panel ========= */

/* 浮動「單元目錄」按鈕 */
.ict-nav-toggle {
  position: fixed;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  z-index: 1000;
  background: var(--ict-header-tab-bg);
  color: var(--ict-header-text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ict-header-tab-border);
  backdrop-filter: blur(4px);
}

.ict-nav-toggle span.icon {
  font-size: 15px;
}

.ict-nav-toggle:hover {
  background: var(--ict-header-tab-hover-bg);
  color: var(--ict-header-tab-hover-text);
}

/* 開 Panel 時隱藏左邊按鈕 */
.ict-nav-toggle.hidden {
  display: none;
}

/* 手機：放低少少 */
@media (max-width: 720px) {
  .ict-nav-toggle {
    top: auto;
    bottom: 16px;
    left: 16px;
    transform: none;
    padding: 8px 14px;
  }
}

/* overlay + 背景 */
.ict-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.ict-nav-overlay.open {
  pointer-events: auto;
}

.ict-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

.ict-nav-overlay.open .ict-nav-backdrop {
  opacity: 1;
}

/* 左邊 Panel 本體（用 aside，避免同各頁 nav CSS 撞） */
.ict-nav-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 280px;
  max-width: 80vw;
  background: #ffffff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.25);
  transform: translateX(-100%);
  transition: transform 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

.ict-nav-overlay.open .ict-nav-panel {
  transform: translateX(0);
}

/* Panel 頂部橙色 header */
.ict-nav-panel-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #ffe0b2;
  background: linear-gradient(135deg, var(--ict-header-bg-start), var(--ict-header-bg-end));
  color: var(--ict-header-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ict-nav-panel-title {
  font-size: 15px;
  font-weight: 600;
}

.ict-nav-panel-subtitle {
  font-size: 11px;
  opacity: 0.9;
}

.ict-nav-close-btn {
  border-radius: 999px;
  width: 26px;
  height: 26px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid var(--ict-header-tab-border);
  background: var(--ict-header-tab-bg);
  color: var(--ict-header-text);
  backdrop-filter: blur(4px);
}

.ict-nav-close-btn:hover {
  background: var(--ict-header-tab-hover-bg);
  color: var(--ict-header-tab-hover-text);
}

/* 中間向左箭咀（收起 panel） */
.ict-nav-edge-close {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 28px;
  height: 60px;
  background: var(--ict-header-tab-bg);
  border-radius: 0 999px 999px 0;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--ict-header-tab-border);
  backdrop-filter: blur(4px);
}

.ict-nav-edge-close span {
  font-size: 16px;
  color: #5d4037;
}

/* Section list */
.ict-nav-section-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 10px;
}

.ict-nav-section {
  border-bottom: 1px solid #eee;
}

.ict-nav-section-header {
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
}

.ict-nav-section-main {
  display: flex;
  flex-direction: column;
}

.ict-nav-section-title {
  font-weight: 600;
  color: #3e2723;
}

.ict-nav-section-subtitle {
  font-size: 11px;
  color: #6d4c41;
}

.ict-nav-section-chevron {
  font-size: 11px;
  color: #6d4c41;
  margin-left: 8px;
  transition: transform 0.15s ease-out;
}

.ict-nav-section.open .ict-nav-section-chevron {
  transform: rotate(90deg);
}

.ict-nav-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.ict-nav-section.open .ict-nav-section-body {
  max-height: 600px;
}

/* link list */
.ict-nav-link-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
}

.ict-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 18px 4px 20px;
  text-decoration: none;
  font-size: 13px;
  color: #4e342e;
}

.ict-nav-link:hover {
  background: #fff8e1;
}

.ict-nav-link-code {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fff3e0;
  color: #e65100;
  flex-shrink: 0;
}

.ict-nav-link-title {
  flex: 1;
}

.ict-nav-link.current {
  background: #ffe0b2;
  font-weight: 600;
}

/* 高亮當前單元 section */
.ict-nav-section.current > .ict-nav-section-header {
  background: #fff3e0;
}

.ict-nav-section.current > .ict-nav-section-header .ict-nav-section-title {
  color: #e65100;
}

/* footer 提示 */
.ict-nav-footer {
  padding: 6px 12px 8px;
  border-top: 1px solid #eee;
  font-size: 11px;
  color: #8d6e63;
}

.ict-nav-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 標題右上角：導覽列收合按鈕 --- */
body.ict-unit > header .ict-header-nav-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--ict-header-tab-border);
  background: var(--ict-header-tab-bg);
  color: var(--ict-header-text);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

body.ict-unit > header .ict-header-nav-toggle .icon {
  font-size: 0.85rem;
}

body.ict-unit > header .ict-header-nav-toggle:hover {
  background: var(--ict-header-tab-hover-bg);
  color: var(--ict-header-tab-hover-text);
}

/* --- 有收合按鈕嘅 header，nav 變做下拉式 --- */

/* 只喺有 class 時先用收合效果，冇 class 就保持原狀 */
body.ict-unit > header.ict-has-nav-toggle nav {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}

/* 打開狀態：slide 落嚟 */
body.ict-unit > header.ict-has-nav-toggle.ict-nav-open nav {
  max-height: 140px;  /* 可以視乎你導覽幾高，改大少少 */
  opacity: 1;
}

@media (max-width: 720px) {
  body.ict-unit > header .ict-header-nav-toggle {
    top: 0.7rem;
    right: 0.7rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
  }

  body.ict-unit > header.ict-has-nav-toggle.ict-nav-open nav {
    max-height: 220px; /* 細芒 nav 通常要高啲 */
  }
}

body.ict-unit .ict-header-collapse-toggle {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 10050;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ict-header-tab-border);
  background: var(--ict-header-tab-bg);
  color: var(--ict-header-text);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

/* 標題文字太長就省略號 … */
body.ict-unit .ict-header-collapse-toggle .label {
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.ict-unit .ict-header-collapse-toggle .icon {
  font-size: 0.85rem;
}

body.ict-unit .ict-header-collapse-toggle:hover {
  background: var(--ict-header-tab-hover-bg);
  color: var(--ict-header-tab-hover-text);
}

/* 細螢幕調整 */
@media (max-width: 720px) {
  body.ict-unit .ict-header-collapse-toggle {
    top: 8px;
    right: 8px;
    font-size: 0.75rem;
    padding: 3px 8px;
  }

  body.ict-unit .ict-header-collapse-toggle .label {
    max-width: 160px;
  }
}

/* ========= 回到頂部按鈕 ========= */
body.ict-unit .ict-back-to-top {
  position: fixed;
  right: 14px;
  bottom: 20px;
  z-index: 10040;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ict-header-tab-border);
  background: var(--ict-header-tab-bg);
  color: var(--ict-header-text);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, background 0.15s ease-out, color 0.15s ease-out;
}

body.ict-unit .ict-back-to-top .icon {
  font-size: 1rem;
}

body.ict-unit .ict-back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.ict-unit .ict-back-to-top:hover {
  background: var(--ict-header-tab-hover-bg);
  color: var(--ict-header-tab-hover-text);
}

/* 細螢幕：輕微調低位置，避免遮住內容 */
@media (max-width: 720px) {
  body.ict-unit .ict-back-to-top {
    right: 10px;
    bottom: 16px;
    font-size: 0.8rem;
  }
}

/* 共用 quiz UI */
.quiz-box {
  border-radius: 10px;
  border: 1px solid #ffe0b2;
  background: #fff8e1;
  padding: 0.7rem 0.8rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.quiz-question {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.btn-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.btn {
  border-radius: 999px;
  border: none;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  background: #ffb74d;
  color: #4e342e;
  transition: background 0.15s, transform 0.05s;
}

.btn.small {
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
}

.btn.secondary {
  background: #e8eaf6;
  color: #1a237e;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.btn:hover:not(:disabled) {
  background: #ffa726;
  transform: translateY(-1px);
}

.status-text {
  font-size: 0.8rem;
  margin-top: 0.3rem;
  min-height: 1em;
}

.status-correct {
  color: #2e7d32;
}

.status-wrong {
  color: #c62828;
}

    .card {
      border-radius: 10px;
      border: 1px solid #e0e0e0;
      background: #fafafa;
      padding: 0.6rem 0.7rem;
      font-size: 0.86rem;
      flex: 1 1 220px;
    }

    .card h4 {
      font-size: 0.95rem;
      margin-bottom: 0.1rem;
      color: #1a237e;
    }

    .chip {
      display: inline-block;
      font-size: 0.7rem;
      background: #e1f5fe;
      color: #0277bd;
      padding: 0.05rem 0.5rem;
      border-radius: 999px;
      margin-top: 0.1rem;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0.7rem;
      margin-top: 0.4rem;
    }

    label {
      font-size: 0.85rem;
      margin-bottom: 0.1rem;
      display: block;
    }
	/* ========= 共用 UI 元件 (cards / 提示 / code / trace table 等) ========= */

/* 卡片網格：自動等寬 column */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.4rem;
}

/* 一般資訊卡片 */
.card {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  padding: 0.6rem 0.7rem;
  font-size: 0.86rem;
  flex: 1 1 220px;
}

.card h4 {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

/* 提示文字（黃色提示框） */
.tip {
  font-size: 0.8rem;
  color: #555;
  background: #fffde7;
  border-left: 3px solid #ffb300;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  margin-top: 0.3rem;
}

/* 細字備註 */
.small-note {
  font-size: 0.78rem;
  color: #777;
  margin-top: 0.25rem;
}

/* 程式碼區塊 */
.code-box {
  font-family: "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Courier New",
    monospace;
  font-size: 0.8rem;
  background: #263238;
  color: #e0f7fa;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  margin-top: 0.3rem;
  overflow-x: auto;
  white-space: pre;
}

/* inline 輸入列（label + input） */
.inline-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0;
}

/* inline-input 內的 input / select 外觀（連 ACH3 的 input.inline-input 一併處理） */
.inline-input input,
.inline-input select,
.inline-input textarea,
input.inline-input,
select.inline-input,
textarea.inline-input {
  flex: 1 1 160px;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid #c5cae9;
  font-size: 0.85rem;
}

/* 變量 trace table */
.trace-table {
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 0.4rem;
  min-width: 260px;
}

.trace-table th,
.trace-table td {
  border: 1px solid #ccc;
  padding: 0.25rem 0.4rem;
  text-align: center;
}

.trace-table th {
  background: #f1f3f4;
  font-weight: 600;
}

.trace-table td input,
.trace-table td select {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #cfd8dc;
  padding: 0.15rem 0.25rem;
  font-size: 0.82rem;
  text-align: center;
}

.trace-table td input:focus,
.trace-table td select:focus {
  outline: none;
  border-color: #42a5f5;
  box-shadow: 0 0 0 1px rgba(66, 165, 245, 0.3);
}

.trace-hint {
  font-size: 0.8rem;
  color: #555;
  margin-top: 0.25rem;
}

.cell-correct {
  background: #e8f5e9;
}

.cell-wrong {
  background: #ffebee;
}

/* 可點擊卡片（例如 hardware / error cards） */
.card-btn {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  background: #fafafa;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s,
    border-color 0.15s;
  font-size: 0.85rem;
}

.card-btn h4 {
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
}

.card-btn span.tag {
  font-size: 0.7rem;
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
}

.card-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.card-btn.active {
  border-color: #ff9800;
  box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.3);
  background: #fff8e1;
}

/* 提示框（例如 DCH5 的小總結） */
.hint-box {
  margin-top: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  background: #fffde7;
  border: 1px solid #fff59d;
  font-size: 0.85rem;
}

    ul {
      font-size: 0.9rem;
      margin: 0.2rem 0 0.4rem 1.3rem;
    }

    li {
      margin-bottom: 0.18rem;
    }
    .quiz-question,
    .quiz-steps,
    .quiz-status,
    #varNameSteps,
    #expr2Steps,
    #ifSteps,
    #elseSteps,
    #loopForSteps,
    #loopWhileSteps,
    #loopDoWhileSteps,
    #loopRepeatUntilSteps {
        white-space: pre-wrap;  /* ⭐⭐⭐ 最重要：保留縮排 + 換行 */
        font-family: "Courier New", monospace;  /* （可選）令偽代碼更像代碼 */
        line-height: 1.55;      /* （可選）提升可讀性 */
    }

    body.ict-unit .table-wrap {
  margin-top: 0.5rem;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid #e0e6ff;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 35, 95, 0.06);
}

/* 表格本體 */
body.ict-unit table.simple-table {
  width: 100%;
  min-width: 520px;              /* 避免內容擠到難讀；手機會改用橫向滾動 */
  border-collapse: collapse;
  font-size: 0.88rem;
}

/* 表頭 */
body.ict-unit table.simple-table thead th {
  position: sticky;              /* 內容很長時，滾動仍見到表頭（如不需要可移除） */
  top: 0;
  z-index: 1;
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  color: #1a237e;
  text-align: center;
  font-weight: 700;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid #ffd180;
  white-space: nowrap;
}

/* 內容格 */
body.ict-unit table.simple-table th,
body.ict-unit table.simple-table td {
  padding: 0.48rem 0.6rem;
  border-bottom: 1px solid #eef1ff;
  vertical-align: top;
}

/* 斑馬紋 */
body.ict-unit table.simple-table tbody tr:nth-child(even) {
  background: #fafafa;
}

/* hover 高亮（閱讀更易對行） */
body.ict-unit table.simple-table tbody tr:hover {
  background: #fff8e1;
}

/* 對齊輔助：需要左對齊就加 class="left" */
body.ict-unit table.simple-table td.left,
body.ict-unit table.simple-table th.left {
  text-align: left;
}

body.ict-unit table.simple-table td.center,
body.ict-unit table.simple-table th.center {
  text-align: center;
}

/* 二進制/代碼字：可用 <code class="bin"> 或一般 <code> */
body.ict-unit table.simple-table code.bin {
  font-family: "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.86em;
  letter-spacing: 0.06em;
  padding: 0.08rem 0.35rem;
  border-radius: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

/* 小備註字（配合你現有 small-note） */
body.ict-unit table.simple-table .small-note {
  display: inline-block;
  opacity: 0.85;
}

/* 手機：字體與 padding 稍微收細；min-width 亦下降 */
@media (max-width: 720px) {
  body.ict-unit table.simple-table {
    min-width: 420px;
    font-size: 0.84rem;
  }

  body.ict-unit table.simple-table thead th,
  body.ict-unit table.simple-table td {
    padding: 0.42rem 0.5rem;
  }
}
/* ========= 重點 + Flashcards（通用） ========= */

/* 重點框：沿用 card-btn 外觀，但唔需要「可點擊」感覺 */
.card-btn.keypoints {
  cursor: default;
}
.card-btn.keypoints:hover {
  background: #fafafa;
  transform: none;
  box-shadow: none;
}

/* 開啟 Flashcards 時禁止背景頁面滾動 */
body.ict-fc-open {
  overflow: hidden;
}

/* deck 本身用 hidden 屬性控制；加多一層保險 */
.ict-fc-deck[hidden] {
  display: none !important;
}

/* ---- Flashcards modal ---- */
.ict-fc-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.ict-fc-overlay.open {
  display: flex;
}

.ict-fc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.ict-fc-modal {
  position: relative;
  z-index: 20001;
  width: min(760px, 94vw);
  max-height: 88vh;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
}

.ict-fc-header {
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--ict-header-bg-start), var(--ict-header-bg-end));
  color: var(--ict-header-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ict-fc-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
}

.ict-fc-close {
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.2);
  color: var(--ict-header-text);
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.ict-fc-close:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #e65100;
}

.ict-fc-body {
  padding: 12px;
  background: #f5f7fb;
  overflow: auto;
}

.ict-fc-card-title {
  font-weight: 700;
  color: #283593;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.ict-fc-card-view {
  background: #ffffff;
  border: 1px solid #e0e6ff;
  border-radius: 12px;
  padding: 0.9rem 0.9rem 1rem;
  font-size: 0.92rem;
}

.ict-fc-card-view h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: #1a237e;
}

.ict-fc-card-view h4 {
  margin: 0.65rem 0 0.25rem;
  font-size: 0.95rem;
  color: #1a237e;
}

.ict-fc-card-view ul {
  margin: 0.25rem 0 0.45rem 1.2rem;
}

.ict-fc-card-view li {
  margin-bottom: 0.18rem;
}

.ict-fc-card-view .tip,
.ict-fc-card-view .note {
  margin-top: 0.4rem;
}

.ict-fc-footer {
  padding: 8px 12px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
}

.ict-fc-nav {
  border-radius: 999px;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  background: #ffb74d;
  color: #4e342e;
  font-size: 0.95rem;
  transition: background 0.15s, transform 0.05s;
}

.ict-fc-nav:hover:not(:disabled) {
  background: #ffa726;
  transform: translateY(-1px);
}

.ict-fc-nav:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.ict-fc-progress {
  font-size: 0.85rem;
  color: #6d4c41;
  user-select: none;
}

@media (max-width: 720px) {
  .ict-fc-modal {
    width: min(760px, 96vw);
    max-height: 90vh;
  }
  .ict-fc-body {
    padding: 10px;
  }
  .ict-fc-card-view {
    padding: 0.75rem 0.75rem 0.9rem;
    font-size: 0.9rem;
  }
}