/**
 * aisi-cis.css — AISI CIS (2026-06 redesign)
 *
 * 只掛在改版頁：/index.html、/course/index.html、/course/course.html。
 * 必須載入在 bootstrap + aisi-bootstrap-custom.css 之後（後載覆寫）。
 * 其餘頁面（app/access、app/create、course/assignment/access…）不得載入本檔。
 *
 * 架構：
 *   L1 原始色盤（唯一允許 hex 的地方）
 *   L2 語意 token（元件唯一能引用的東西）＝預設主題「晴嵐鋼青 × 琥珀行動」
 *   L3 主題覆寫 [data-cis="steel|sunny|ink"]，dark 覆寫放最後（dark 優先於主題）
 *
 * 規格：design-mockups/aisi-cis-manual.html
 */

/* ============================================================
   L1 · 原始色盤（heritage palette）
============================================================ */
:root {
  --steel-800: #35495a;
  --steel-700: #4a6b7d;
  --steel-600: #5f849b;
  --steel-500: #7a9db3;
  --steel-400: #9cbccf;
  --steel-200: #d3e2ea;
  --amber-600: #e09a3e;
  --amber-500: #f2b263;
  --amber-300: #f8d49c;
  --amber-200: #fbe5c2;
  --aqua-400: #5fc3e4;
  --ink-900: #1a2e3b;
  --ink-700: #3d5263;
  --ink-500: #6b8090;
  --ink-300: #8fa3b1;
  --mist: #f5f7f9;
  --paper: #faf6ee;
  --harbor: #f0f4f7;
  --cis-ok: #10b981;
  --cis-bad: #ef4444;
  --cis-warn: #f59e0b;

  --cis-r-lg: 1.3rem;
  --cis-r-md: 1rem;
  --cis-r-sm: 0.7rem;

  --cis-f-display: "Baloo 2", "Huninn", "Noto Sans TC", sans-serif;
  --cis-f-tc: "Huninn", "Noto Sans TC", sans-serif;
  --cis-f-body: "Noto Sans TC", -apple-system, "Segoe UI", sans-serif;
}

/* ============================================================
   L2 · 語意 token — ★ 預設主題：晴嵐鋼青 × 琥珀行動
============================================================ */
:root,
[data-cis="default"] {
  --cis-canvas: var(--mist);
  --cis-blooms:
    radial-gradient(48rem 32rem at 4% -8%, rgba(122, 157, 179, 0.32), transparent 60%),
    radial-gradient(40rem 28rem at 100% 2%, rgba(211, 226, 234, 0.7), transparent 55%),
    radial-gradient(40rem 30rem at 50% 115%, rgba(242, 178, 99, 0.16), transparent 60%);

  --cis-bar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
  --cis-bar-fg: var(--ink-900);
  --cis-bar-border: rgba(95, 132, 155, 0.18);
  --cis-bar-ghost: rgba(255, 255, 255, 0.6);
  --cis-logo-1: var(--steel-600);
  --cis-logo-2: var(--ink-500);

  --cis-primary: var(--steel-600);
  --cis-primary-deep: var(--steel-700);
  --cis-primary-soft: rgba(95, 132, 155, 0.13);

  --cis-action-grad: linear-gradient(180deg, var(--amber-300), var(--amber-500));
  --cis-action-fg: #5c3d0e;
  --cis-action-bd: var(--amber-600);
  --cis-action-glow: rgba(242, 178, 99, 0.38);

  --cis-card-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.62) 100%);
  --cis-card-bd: rgba(255, 255, 255, 0.95);
  --cis-card-shadow: 0 8px 24px rgba(26, 46, 59, 0.08);
  --cis-card-inset: inset 0 1px 0 #fff;

  --cis-ink: var(--ink-900);
  --cis-ink-soft: var(--ink-500);
  --cis-ink-mute: var(--ink-300);
  --cis-spot: var(--amber-600);

  --cis-tile-ic-bg: rgba(95, 132, 155, 0.13);
  --cis-tile-ic-fg: var(--steel-600);
  --cis-tile-label: var(--steel-700);

  --cis-banner: linear-gradient(135deg, var(--steel-700) 0%, var(--steel-600) 55%, var(--steel-500) 100%);
  --cis-tab-active-bg: var(--steel-600);
  --cis-tab-active-fg: #fff;
  --cis-tab-glow: rgba(95, 132, 155, 0.35);

  --cis-field-bg: rgba(26, 46, 59, 0.05);
  --cis-field-bd: rgba(26, 46, 59, 0.1);
  --cis-divider: rgba(26, 46, 59, 0.08);
}

/* ============================================================
   L3 · 主題覆寫（appearance presets）
============================================================ */
/* A 晴嵐鋼青（純）：行動色回鋼青 */
[data-cis="steel"] {
  --cis-action-grad: linear-gradient(180deg, var(--steel-500), var(--steel-700));
  --cis-action-fg: #fff;
  --cis-action-bd: var(--steel-700);
  --cis-action-glow: rgba(95, 132, 155, 0.4);
  --cis-spot: var(--steel-600);
}

/* B 暖陽學坊：暖紙畫布、琥珀全面上位 */
[data-cis="sunny"] {
  --cis-canvas: var(--paper);
  --cis-blooms:
    radial-gradient(46rem 30rem at 6% -8%, rgba(242, 178, 99, 0.24), transparent 60%),
    radial-gradient(40rem 28rem at 102% 2%, rgba(122, 157, 179, 0.28), transparent 55%),
    radial-gradient(36rem 28rem at 50% 115%, rgba(95, 195, 228, 0.16), transparent 60%);
  --cis-bar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 253, 247, 0.7));
  --cis-bar-fg: #33414d;
  --cis-bar-border: rgba(224, 154, 62, 0.22);
  --cis-logo-2: var(--amber-600);
  --cis-tile-ic-bg: rgba(242, 178, 99, 0.2);
  --cis-tile-ic-fg: #c87f24;
  --cis-tile-label: #6b5638;
  --cis-ink: #33414d;
  --cis-ink-soft: #75808a;
  --cis-banner: linear-gradient(135deg, var(--steel-600) 0%, var(--steel-500) 60%, var(--amber-500) 130%);
  --cis-tab-active-bg: linear-gradient(180deg, var(--amber-300), var(--amber-500));
  --cis-tab-active-fg: #5c3d0e;
  --cis-tab-glow: rgba(242, 178, 99, 0.38);
}

/* C 墨海書齋：墨藍玻璃 bar、淺色 body */
[data-cis="ink"] {
  --cis-canvas: var(--harbor);
  --cis-blooms:
    radial-gradient(44rem 28rem at 0% -8%, rgba(122, 157, 179, 0.3), transparent 60%),
    radial-gradient(36rem 26rem at 105% 110%, rgba(95, 195, 228, 0.16), transparent 60%);
  --cis-bar-bg: linear-gradient(180deg, rgba(30, 46, 60, 0.95), rgba(18, 30, 42, 0.9));
  --cis-bar-fg: #e6eef5;
  --cis-bar-border: rgba(255, 255, 255, 0.12);
  --cis-bar-ghost: rgba(255, 255, 255, 0.1);
  --cis-logo-1: #8fb8d0;
  --cis-logo-2: #b9c9d8;
  --cis-action-grad: linear-gradient(180deg, var(--steel-600), var(--steel-800));
  --cis-action-fg: #fff;
  --cis-action-bd: var(--steel-800);
  --cis-action-glow: rgba(53, 73, 90, 0.4);
  --cis-spot: var(--steel-700);
  --cis-banner: linear-gradient(150deg, #24384a 0%, var(--ink-900) 100%);
  --cis-tab-active-bg: var(--ink-900);
  --cis-tab-active-fg: #fff;
  --cis-tab-glow: rgba(26, 46, 59, 0.3);
}

/* ============================================================
   L3 · Dark（Midnight Ocean）— 放在主題之後：dark 優先於 preset，
   v1 各 preset 的 dark 一律退回預設 dark
============================================================ */
[data-theme="dark"] {
  --cis-canvas: #101820;
  --cis-blooms:
    radial-gradient(46rem 30rem at 4% -8%, rgba(95, 132, 155, 0.18), transparent 60%),
    radial-gradient(40rem 30rem at 100% 110%, rgba(242, 178, 99, 0.08), transparent 60%);
  --cis-bar-bg: linear-gradient(180deg, rgba(20, 30, 42, 0.94), rgba(13, 21, 30, 0.88));
  --cis-bar-fg: #dce6ed;
  --cis-bar-border: rgba(95, 132, 155, 0.22);
  --cis-bar-ghost: rgba(255, 255, 255, 0.08);
  --cis-logo-1: #8fb8d0;
  --cis-logo-2: #93adc0;
  --cis-primary: #6e9ab5;
  --cis-primary-deep: #8fb8d0;
  --cis-primary-soft: rgba(110, 154, 181, 0.16);
  --cis-action-grad: linear-gradient(180deg, var(--amber-500), var(--amber-600));
  --cis-action-fg: #2e2005;
  --cis-action-bd: #b97c28;
  --cis-action-glow: rgba(242, 178, 99, 0.22);
  --cis-card-bg: linear-gradient(150deg, rgba(28, 40, 56, 0.92) 0%, rgba(20, 30, 44, 0.78) 100%);
  --cis-card-bd: rgba(95, 132, 155, 0.22);
  --cis-card-shadow: 0 8px 24px rgba(5, 10, 16, 0.5);
  --cis-card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --cis-ink: #dce6ed;
  --cis-ink-soft: #93adc0;
  --cis-ink-mute: #5a7a90;
  --cis-spot: var(--amber-500);
  --cis-tile-ic-bg: rgba(110, 154, 181, 0.16);
  --cis-tile-ic-fg: #8fb8d0;
  --cis-tile-label: #93adc0;
  --cis-banner: linear-gradient(150deg, #1e3242 0%, #121e2a 100%);
  --cis-tab-active-bg: #6e9ab5;
  --cis-tab-active-fg: #0d151e;
  --cis-tab-glow: rgba(110, 154, 181, 0.25);
  --cis-field-bg: rgba(220, 230, 237, 0.06);
  --cis-field-bd: rgba(220, 230, 237, 0.12);
  --cis-divider: rgba(220, 230, 237, 0.1);
}

/* ============================================================
   [data-cis] 基底：畫布、字體
[data-cis] ============================================================ */
[data-cis] body {
  background-color: var(--cis-canvas) !important;
  background-image: var(--cis-blooms) !important;
  background-attachment: fixed !important;
  font-family: var(--cis-f-body);
  color: var(--cis-ink);
}

[data-cis] h1, h2, h3, h4, h5, h6,
[data-cis] .card-title, .modal-title, .offcanvas-title {
  font-family: var(--cis-f-tc);
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-cis] .cis-num,
[data-cis] .ios-stat-number {
  font-family: var(--cis-f-display) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Navbar unread count for the messaging side app. */
.nav-msg-badge {
  position: absolute;
  top: 1px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  padding: 0 4px;
  font-family: var(--cis-f-display);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}
#messagesNavBtn { position: relative; }
#messagesNavBtn[hidden], .nav-msg-badge[hidden] { display: none !important; }

/* ============================================================
   [data-cis] 頂欄（index 的 .aisi-accent 與 course 的 .navbar.aisi-accent-background）
[data-cis] ============================================================ */
[data-cis] .aisi-accent,
[data-cis] .navbar.aisi-accent-background {
  background: var(--cis-bar-bg) !important;
  color: var(--cis-bar-fg) !important;
  border-bottom: 1px solid var(--cis-bar-border);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 4px 18px rgba(26, 46, 59, 0.06);
}
/* 注意：modal-header 的 .aisi-accent 例外，維持品牌色塊（見 modal 區） */

[data-cis] .aisi-accent .text-white,
[data-cis] .aisi-accent .btn-link,
[data-cis] .navbar.aisi-accent-background .navbar-brand,
[data-cis] .navbar.aisi-accent-background .nav-link {
  color: var(--cis-bar-fg) !important;
}
[data-cis] .navbar.aisi-accent-background {
  --bs-navbar-color: var(--cis-bar-fg);
  --bs-navbar-hover-color: var(--cis-primary);
  --bs-navbar-active-color: var(--cis-primary);
  --bs-navbar-brand-color: var(--cis-bar-fg);
  --bs-navbar-brand-hover-color: var(--cis-primary);
}
[data-cis] .navbar.aisi-accent-background .navbar-toggler {
  color: var(--cis-bar-fg);
  border-color: var(--cis-bar-border);
}
[data-cis] .navbar.aisi-accent-background .navbar-toggler-icon {
  filter: invert(0.45); /* navbar-dark 的白色 icon 在淺色玻璃 bar 上反轉為深色 */
}
[data-cis] [data-cis="ink"] .navbar.aisi-accent-background .navbar-toggler-icon,
[data-cis] [data-theme="dark"] .navbar.aisi-accent-background .navbar-toggler-icon {
  filter: none;
}

/* wordmark（HTML 由 logo png 改為 robot + 文字） */
[data-cis] .cis-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--cis-f-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}
[data-cis] .cis-wordmark .w1 { color: var(--cis-logo-1); }
[data-cis] .cis-wordmark .w2 { color: var(--cis-logo-2); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; }
[data-cis] .cis-bot { width: 30px; height: 30px; object-fit: contain; }

/* 頂欄上的功能鈕（theme toggle 等）：平時無框透明，hover 才浮出 ghost 底 */
[data-cis] .aisi-accent .theme-toggle,
[data-cis] .navbar.aisi-accent-background .theme-toggle {
  color: var(--cis-bar-fg) !important;
  background: transparent;
  border: none;
  border-radius: 0.7rem;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-grid;
  place-items: center;
}
[data-cis] .aisi-accent .theme-toggle:hover,
[data-cis] .navbar.aisi-accent-background .theme-toggle:hover {
  background: var(--cis-bar-ghost);
}

/* ============================================================
   [data-cis] 側邊選單（offcanvas）
[data-cis] ============================================================ */
[data-cis] .offcanvas {
  background: var(--cis-card-bg);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  color: var(--cis-ink);
  border-right: 1px solid var(--cis-card-bd);
}
[data-cis] .offcanvas .list-group-item {
  background: transparent;
  border-color: var(--cis-divider);
  color: var(--cis-ink);
}
[data-cis] .offcanvas .menu-link {
  color: var(--cis-ink);
  font-weight: 500;
}
[data-cis] .offcanvas .menu-link i {
  color: var(--cis-tile-ic-fg);
  margin-right: 0.35rem;
}
[data-cis] .offcanvas .menu-link.is-active,
[data-cis] .offcanvas .menu-link:hover {
  color: var(--cis-primary);
}

/* ============================================================
   [data-cis] Landing：統計卡（覆寫 ios-card 系列）
[data-cis] ============================================================ */
[data-cis] .ios-container::after { display: none; }
[data-cis] .ios-aurora { display: none; } /* 舊版彩色光斑與 CIS 光暈打架，停用 */
[data-cis] .ios-card {
  background: var(--cis-card-bg) !important;
  border: 1px solid var(--cis-card-bd) !important;
  border-radius: var(--cis-r-md) !important;
  box-shadow: var(--cis-card-shadow), var(--cis-card-inset) !important;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}
[data-cis] .ios-card::before, .ios-card::after { display: none; }
[data-cis] .ios-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(26, 46, 59, 0.13), var(--cis-card-inset) !important;
}
[data-cis] .ios-stat-number {
  color: var(--cis-ink);
  font-size: 2.2rem;
}
[data-cis] .ios-card[style*="--card-index: 0"] .ios-stat-number { color: var(--cis-spot); }
[data-cis] .ios-stat-label {
  color: var(--cis-ink-soft);
  font-weight: 700;
}
[data-cis] .ios-card-icon {
  background: var(--cis-tile-ic-bg) !important;
  color: var(--cis-tile-ic-fg) !important;
  border-radius: 0.85rem !important;
  box-shadow: none !important;
}
[data-cis] .ios-slogan {
  font-family: var(--cis-f-tc);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--cis-ink-soft) !important;
}
[data-cis] .ios-slogan::before { display: none; }

/* ============================================================
   [data-cis] Landing：Task Go 列 + 快速行動 tiles（新元件）
[data-cis] ============================================================ */
[data-cis] .cis-taskgo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--cis-r-md);
  background: var(--cis-card-bg);
  border: 1px solid var(--cis-card-bd);
  box-shadow: var(--cis-card-shadow), var(--cis-card-inset);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
[data-cis] .cis-taskgo .form-control {
  border-radius: 0.7rem;
  background: var(--cis-field-bg);
  border: 1px solid var(--cis-field-bd);
  color: var(--cis-ink);
  box-shadow: none;
}
[data-cis] .cis-taskgo .form-control::placeholder { color: var(--cis-ink-mute); }
[data-cis] .cis-taskgo .form-control:focus {
  border-color: var(--cis-primary);
  box-shadow: 0 0 0 3px var(--cis-primary-soft);
}
[data-cis] .cis-icon-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  border: 1px solid var(--cis-field-bd);
  background: transparent;
  color: var(--cis-tile-ic-fg);
}
[data-cis] .cis-icon-btn:hover { background: var(--cis-primary-soft); color: var(--cis-tile-ic-fg); }

[data-cis] .cis-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
@media (max-width: 768px) {
  [data-cis] .cis-tile { flex-basis: calc((100% - 2 * 0.75rem) / 3); }
}
[data-cis] .cis-tile {
  flex: 0 1 calc((100% - 4 * 0.75rem) / 5);
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.9rem 0.3rem 0.75rem;
  border: 1px solid var(--cis-card-bd);
  border-radius: var(--cis-r-md);
  background: var(--cis-card-bg);
  box-shadow: var(--cis-card-shadow), var(--cis-card-inset);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
}
[data-cis] .cis-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px var(--cis-tab-glow), var(--cis-card-inset);
}
[data-cis] .cis-tile .ic {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 0.78rem;
  background: var(--cis-tile-ic-bg);
  color: var(--cis-tile-ic-fg);
  font-size: 1.05rem;
}
[data-cis] .cis-tile span {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cis-tile-label);
  text-align: center;
}

/* ============================================================
   [data-cis] Landing：手機版 RWD（標準手機一頁顯示）
   統計卡縮小並排成一列置頂，整體垂直間距收緊；
   螢幕特別小的手機允許捲動。
[data-cis] ============================================================ */
@media (max-width: 576px) {
  /* 外層容器與「本月統計」標題收緊 */
  [data-cis] #landing .ios-container {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  [data-cis] #landing .ios-container > .text-center.mb-4 {
    margin-bottom: 0.5rem !important;
  }
  [data-cis] #landing h2 {
    font-size: 1.25rem;
  }

  /* 各區塊（含統計卡列）之間的垂直間距 + 左右留白收緊 */
  [data-cis] #landing .ios-container > .row {
    margin-top: 0.6rem !important;
  }
  [data-cis] #landing .ios-container > .row.px-3 {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
  [data-cis] #landing .ios-container > .row small {
    font-size: 0.7rem !important;
  }

  /* 統計卡：三張並排成一列、卡內元素縮小 */
  [data-cis] #landing-stats {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0;
  }
  [data-cis] #landing-stats > [class*="col-"] {
    flex: 0 0 33.333%;
    width: 33.333%;
    max-width: 33.333%;
  }
  [data-cis] #landing-stats .ios-card {
    padding: 0.7rem 0.35rem !important;
  }
  [data-cis] #landing-stats .ios-card-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
    margin: 0 auto 0.35rem;
    border-radius: 10px;
  }
  [data-cis] #landing-stats .ios-stat-number {
    font-size: 1.5rem !important;
    margin-bottom: 0.1rem;
  }
  [data-cis] #landing-stats .ios-stat-label {
    font-size: 0.62rem;
    line-height: 1.2;
    font-weight: 700;
  }

  /* Task Go 列瘦身 */
  [data-cis] .cis-taskgo {
    padding: 0.5rem 0.55rem;
    gap: 0.4rem;
  }
  [data-cis] .cis-taskgo .btn-primary {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  [data-cis] .cis-icon-btn {
    width: 2.1rem;
    height: 2.1rem;
  }

  /* 快速行動 tiles：降低每格高度（維持 3 欄 × 2 列） */
  [data-cis] .cis-tiles {
    gap: 0.5rem;
  }
  [data-cis] .cis-tile {
    padding: 0.55rem 0.25rem 0.5rem;
    gap: 0.3rem;
  }
  [data-cis] .cis-tile .ic {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
    border-radius: 0.6rem;
  }
  [data-cis] .cis-tile span {
    font-size: 0.68rem;
  }

  /* Slogan 收小 */
  [data-cis] #landing .ios-slogan {
    padding: 0.5rem !important;
    font-size: 0.92rem;
  }
}

/* ============================================================
   [data-cis] 按鈕
[data-cis] ============================================================ */
[data-cis] .btn-primary,
[data-cis] .btn-primary:focus,
[data-cis] .btn-primary:active {
  background: var(--cis-action-grad) !important;
  color: var(--cis-action-fg) !important;
  border: 1px solid var(--cis-action-bd) !important;
  border-radius: 999px !important;
  font-weight: 700;
  box-shadow: 0 6px 16px var(--cis-action-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
[data-cis] .btn-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--cis-action-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
[data-cis] .btn-outline-primary,
[data-cis] .btn-outline-secondary,
[data-cis] .btn-secondary {
  border-radius: 999px !important;
  background: var(--cis-bar-ghost);
  color: var(--cis-ink);
  border: 1px solid var(--cis-field-bd);
  font-weight: 600;
}
[data-cis] .btn-outline-primary:hover,
[data-cis] .btn-outline-secondary:hover,
[data-cis] .btn-secondary:hover {
  background: var(--cis-primary-soft);
  color: var(--cis-primary);
  border-color: var(--cis-primary);
}
[data-cis] .btn-outline-primary.active,
[data-cis] .btn-check:checked + .btn-outline-primary {
  background: var(--cis-tab-active-bg) !important;
  color: var(--cis-tab-active-fg) !important;
  border-color: transparent !important;
}

/* ============================================================
   [data-cis] 表單與輸入
[data-cis] ============================================================ */
[data-cis] .form-control, .form-select, .input-group-text {
  background: var(--cis-card-bg);
  border-color: var(--cis-field-bd);
  color: var(--cis-ink);
}
[data-cis] .form-control:focus, .form-select:focus {
  border-color: var(--cis-primary);
  box-shadow: 0 0 0 3px var(--cis-primary-soft);
  background: var(--cis-card-bg);
  color: var(--cis-ink);
}
[data-cis] .form-control::placeholder { color: var(--cis-ink-mute); }
[data-cis] .input-group-text { color: var(--cis-ink-soft); }

/* ============================================================
   [data-cis] 卡片（含 JS 注入的 .card / .course-card / .aisi-card）
[data-cis] ============================================================ */
[data-cis] .card, .aisi-card {
  background: var(--cis-card-bg);
  border: 1px solid var(--cis-card-bd);
  border-radius: var(--cis-r-md);
  box-shadow: var(--cis-card-shadow), var(--cis-card-inset);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  color: var(--cis-ink);
}
[data-cis] .card .card-title, .card .card-text { color: var(--cis-ink); }
[data-cis] .card .text-muted, .text-muted { color: var(--cis-ink-soft) !important; }

[data-cis] .course-card {
  border-top: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-cis] .course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px var(--cis-tab-glow), var(--cis-card-inset);
}
[data-cis] .course-card .card-title a {
  font-family: var(--cis-f-tc);
  color: var(--cis-ink);
  text-decoration: none;
}
[data-cis] .course-card .card-title a:hover { color: var(--cis-primary); }

/* ============================================================
   [data-cis] 課程 banner 與分頁（course.html）
[data-cis] ============================================================ */
[data-cis] .course-banner {
  background: var(--cis-banner) !important;
  border-radius: 0 0 var(--cis-r-lg) var(--cis-r-lg);
  box-shadow: 0 14px 36px rgba(26, 46, 59, 0.18);
}
[data-cis] .course-banner::before, .course-banner::after { display: none; }
[data-cis] .course-banner h1 { font-family: var(--cis-f-tc); }

[data-cis] .nav-tabs {
  border-bottom: none !important;
  gap: 0.4rem;
}
[data-cis] .nav-tabs .nav-link {
  border: 1px solid var(--cis-field-bd) !important;
  border-radius: 999px !important;
  background: var(--cis-bar-ghost);
  color: var(--cis-ink-soft) !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.45rem 1.05rem;
  margin-bottom: 0;
}
[data-cis] .nav-tabs .nav-link:hover {
  color: var(--cis-primary) !important;
  background: var(--cis-primary-soft);
  border-color: var(--cis-primary) !important;
}
[data-cis] .nav-tabs .nav-link.active {
  background: var(--cis-tab-active-bg) !important;
  color: var(--cis-tab-active-fg) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px var(--cis-tab-glow);
}

/* ============================================================
   [data-cis] 清單、表格、modal
[data-cis] ============================================================ */
[data-cis] .list-group-item {
  background: transparent;
  border-color: var(--cis-divider);
  color: var(--cis-ink);
}
[data-cis] .aisi-table, .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--cis-ink);
  --bs-table-border-color: var(--cis-divider);
}
[data-cis] .aisi-table thead th, .table thead th {
  font-family: var(--cis-f-tc);
  font-weight: 400;
  color: var(--cis-ink-soft);
}

[data-cis] .modal-content {
  background: var(--cis-card-bg);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--cis-card-bd);
  border-radius: var(--cis-r-lg);
  color: var(--cis-ink);
}
/* modal 標題列維持品牌色塊（覆寫頂欄玻璃規則） */
[data-cis] .modal-header.aisi-accent {
  background: var(--cis-banner) !important;
  color: #fff !important;
  border-bottom: none;
  border-radius: var(--cis-r-lg) var(--cis-r-lg) 0 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-cis] .modal-header.aisi-accent .modal-title,
[data-cis] .modal-header.aisi-accent .text-white { color: #fff !important; }

/* ============================================================
   [data-cis] 設定頁：外觀主題選擇器
[data-cis] ============================================================ */
[data-cis] .cis-theme-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 0.4rem 0 0.2rem;
}
@media (max-width: 576px) { [data-cis] .cis-theme-picker { grid-template-columns: repeat(2, 1fr); } }
[data-cis] .cis-theme-option {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.4rem 0.6rem;
  border-radius: var(--cis-r-sm);
  border: 2px solid var(--cis-field-bd);
  background: var(--cis-card-bg);
  cursor: pointer;
  text-align: center;
}
[data-cis] .cis-theme-option.is-active {
  border-color: var(--cis-primary);
  box-shadow: 0 0 0 3px var(--cis-primary-soft);
}
[data-cis] .cis-theme-option .sw {
  width: 100%;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
[data-cis] .cis-theme-option span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cis-ink-soft);
}
[data-cis] .cis-theme-option[data-cis-value="default"] .sw { background: linear-gradient(120deg, #5f849b 55%, #f2b263 55%); }
[data-cis] .cis-theme-option[data-cis-value="steel"] .sw { background: linear-gradient(120deg, #5f849b, #7a9db3); }
[data-cis] .cis-theme-option[data-cis-value="sunny"] .sw { background: linear-gradient(120deg, #f2b263 60%, #faf6ee 60%); }
[data-cis] .cis-theme-option[data-cis-value="ink"] .sw { background: linear-gradient(120deg, #1a2e3b 60%, #5f849b 60%); }

/* ============================================================
   [data-cis] 動效偏好
[data-cis] ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-cis] .cis-tile, .course-card, .ios-card, .btn-primary { transition: none; }
  [data-cis] .cis-tile:hover, .course-card:hover, .ios-card:hover, .btn-primary:hover { transform: none; }
}