/**
 * MOSME 官網 - 設計令牌（homepage-variables.css）
 *
 * 此檔案引入統一的設計系統核心，並定義官網專案特有的變數：
 * - 按鈕色系統、漸層、陰影
 * - 響應式字體（hp-text-*）、區塊間距（hp-gap-*）
 * - 頁面主題色（teaching / resources / about）
 * - 角色主題色（teacher / student）
 * - 玻璃態、裝飾性模糊等視覺效果
 *
 * 建置時由 sync-design-tokens.js 將 design-tokens.css 內聯後
 * 輸出至 MOSME/mosme/frontend/homepage/_nuxt/homepage-variables.css
 */

/* 引入統一設計系統（animations.css 在 main.css 引入，避免 sync-design-tokens.js 無法解析別名）*/
/* ═══ design-tokens.css（自動內聯，勿手動修改）═══ */
/**
 * MOSME 統一設計令牌系統
 *
 * 三層 @layer 架構：
 * 1. @layer primitives - 原始值（調色盤、基礎數值）
 * 2. @layer semantic   - 語義化（用途明確的變數）
 * 3. Themes（層外）     - 主題切換
 *
 * 消費者：
 * - homepage：由 sync-design-tokens.js 在建置時同步
 * - aigc-lab / exam-paper：直接 @import 本檔
 * - class-management：直接 @import 本檔
 *
 * 主題統一使用 data-theme="homepage"（青綠色 CIS 品牌色）
 * App 專用 UI 變數：
 * - 教師端 --t-* 變數定義於 :root（aigc-lab + exam-paper 共用）
 * - 學生端變數作用域於 .student-aiexam-app 根元素
 *
 * 引用方式：import '@pkg-shared/styles/design-tokens.css'
 *
 * ── 響應式斷點規範（全專案統一） ──
 * --breakpoint-sm:  480px   小螢幕手機
 * --breakpoint-md:  768px   平板
 * --breakpoint-lg:  1024px  桌面
 *
 * 語法：統一使用 @media (max-width: Npx)
 * 不使用現代 width <= 語法（確保相容性）
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 1: Primitives（原始值）
   ═══════════════════════════════════════════════════════════════════════════ */
@layer primitives {
  :root {
    /* ─── 調色盤：棕色系（教師端品牌色）─── */
    --palette-brown-400: #c44b00;
    --palette-brown-500: #a63500;
    --palette-brown-600: #892b00;

    /* ─── 調色盤：海軍藍系（學生端品牌色）─── */
    --palette-navy-400: #3d5a7f;

    /* ─── 調色盤：藍綠色系（官網 CIS 品牌色）─── */
    --palette-teal-50: #f0fdfa;
    --palette-teal-100: #ccfbf1;
    --palette-teal-200: #99f6e4;
    --palette-teal-300: #5eead4;
    --palette-teal-400: #2dd4bf;
    --palette-teal-500: #17b9b9; /* CIS 主色 */
    --palette-teal-600: #0d9488; /* Hover */
    --palette-teal-700: #0f766e; /* Active */
    --palette-teal-900: #134e4a;

    /* ─── 調色盤：藍色系（通用藍色）─── */
    --palette-blue-50: #eff6ff;
    --palette-blue-100: #dbeafe;
    --palette-blue-200: #bfdbfe;
    --palette-blue-300: #93c5fd;
    --palette-blue-400: #60a5fa;
    --palette-blue-500: #3b82f6;
    --palette-blue-600: #2563eb;
    --palette-blue-800: #1e40af;

    /* ─── 調色盤：橙色系（強調色）─── */
    --palette-orange-50: #fff7ed;
    --palette-orange-100: #ffedd5;
    --palette-orange-500: #f97316;
    --palette-orange-600: #ea580c;

    /* ─── 調色盤：綠色系（成功色）─── */
    --palette-green-50: #ecfdf5;
    --palette-green-100: #d1fae5;
    --palette-green-200: #a7f3d0;
    --palette-green-300: #6ee7b7;
    --palette-green-400: #34d399;
    --palette-green-500: #10b981;
    --palette-green-600: #059669;
    --palette-green-800: #065f46;

    /* ─── 調色盤：紅色系（危險色）─── */
    --palette-red-50: #fef2f2;
    --palette-red-200: #fecaca;
    --palette-red-300: #fca5a5;
    --palette-red-400: #f87171;
    --palette-red-500: #ef4444;
    --palette-red-600: #dc2626;
    --palette-red-800: #991b1b;

    /* ─── 調色盤：黃色系（警告色）─── */
    --palette-yellow-50: #fffbeb;
    --palette-yellow-100: #fef3c7;
    --palette-yellow-200: #fde68a;
    --palette-yellow-300: #fcd34d;
    --palette-yellow-400: #fbbf24;
    --palette-yellow-500: #f59e0b;
    --palette-yellow-600: #d97706;
    --palette-yellow-700: #b45309;
    --palette-yellow-800: #92400e;
    --palette-yellow-900: #78350f;

    /* ─── 調色盤：青色系（資訊色）─── */
    --palette-cyan-50: #ecfeff;
    --palette-cyan-500: #06b6d4;
    --palette-cyan-600: #0891b2;
    --palette-cyan-800: #155e75;
    --palette-cyan-900: #164e63;

    /* ─── 調色盤：紫色系（自訂色）─── */
    --palette-purple-50: #faf5ff;
    --palette-purple-100: #f3e8ff;
    --palette-purple-200: #e9d5ff;
    --palette-purple-600: #9333ea;
    --palette-purple-700: #7c3aed;
    --palette-purple-800: #6b21a8;

    /* ─── 調色盤：灰色系（中性色，完整 10 階）─── */
    --palette-gray-0: #ffffff;
    --palette-gray-50: #f8fafc;
    --palette-gray-100: #f1f5f9;
    --palette-gray-200: #e2e8f0;
    --palette-gray-300: #cbd5e1;
    --palette-gray-400: #94a3b8;
    --palette-gray-500: #64748b;
    --palette-gray-600: #475569;
    --palette-gray-700: #334155;
    --palette-gray-800: #1e293b;
    --palette-gray-900: #0f172a;
    --palette-gray-950: #020617;

    /* ─── 間距比例（13 階）─── */
    --spacing-0-5: 0.125rem; /* 2px */
    --spacing-1: 0.25rem; /* 4px */
    --spacing-1-5: 0.375rem; /* 6px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-2-5: 0.625rem; /* 10px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-3-5: 0.875rem; /* 14px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */

    /* ─── 圓角（6 階）─── */
    --radius-sm: 0.25rem; /* 4px — badge、tag、scrollbar */
    --radius-md: 0.5rem; /* 8px — 按鈕、輸入框 */
    --radius-lg: 0.75rem; /* 12px — 卡片 */
    --radius-xl: 1rem; /* 16px — 大卡片、Modal */
    --radius-2xl: 1.25rem; /* 20px — 大容器、pill 形狀 */
    --radius-full: 9999px;

    /* ─── Modal 寬度（5 階）─── */
    --modal-sm: 400px;
    --modal-md: 600px;
    --modal-lg: 800px;
    --modal-xl: 1000px;
    --modal-2xl: 1400px;

    /* ─── 陰影（sm/md/lg/xl 四階）─── */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* ─── 動畫時間（fast/normal/moderate/slow 四階）─── */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-moderate: 300ms;
    --duration-slow: 500ms;
    --duration-shimmer: 1.8s;

    /* ─── 緩動函數（6 組）─── */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    /* ─── 字體 ─── */
    --font-sans:
      system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'Microsoft JhengHei', 'PingFang SC',
      'PingFang TC', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;

    /* ─── 字體大小 ─── */
    --text-2xs: 0.625rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* ─── 字距（Letter Spacing / Tracking）─── */
    --tracking-tightest: -0.03em;
    --tracking-tighter: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-tight: 0.01em;
    --tracking-normal: 0.02em;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.25em;

    /* ─── 字重（7 階）─── */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* ─── 行高（4 階）─── */
    --leading-none: 1;
    --leading-snug: 1.4;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* ─── 邊框寬度（2 階）─── */
    --border-thin: 1px;
    --border-thick: 2px;

    /* ─── Z-index 層級（6 階）─── */
    --z-elevated: 10;
    --z-sticky: 100;
    --z-dropdown: 1000;
    --z-overlay: 1050;
    --z-modal: 1200;
    --z-tooltip: 1400;
    --z-toast: 1500;

    /* ─── 玻璃態效果（3 階）─── */
    --glass-blur-sm: blur(8px);
    --glass-blur-md: blur(16px);
    --glass-blur-lg: blur(24px);
    --glass-saturate: saturate(180%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 2: Semantic（語義化）
   ═══════════════════════════════════════════════════════════════════════════ */
@layer semantic {
  :root {
    /* ─── 品牌色（官網藍綠色 #17b9b9，Logo CIS）─── */
    --color-primary: var(--palette-teal-500);
    --color-primary-hover: var(--palette-teal-600);
    --color-primary-active: var(--palette-teal-700);
    --color-primary-light: var(--palette-teal-100);
    --color-primary-subtle: var(--palette-teal-50);
    --color-primary-rgb: 23 185 185;

    /* ─── 強調色（Logo 金黃色）─── */
    --color-accent: var(--palette-yellow-400);
    --color-accent-hover: var(--palette-yellow-500);
    --color-accent-light: var(--palette-yellow-300);
    --color-accent-rgb: 251 191 36;

    /* ─── 狀態色 ─── */
    --color-success: var(--palette-green-500);
    --color-success-hover: var(--palette-green-600);
    --color-success-subtle: var(--palette-green-50);
    --color-success-rgb: 16 185 129;

    --color-warning: var(--palette-yellow-500);
    --color-warning-hover: var(--palette-yellow-600);
    --color-warning-subtle: var(--palette-yellow-50);
    --color-warning-rgb: 245 158 11;

    --color-danger: var(--palette-red-500);
    --color-danger-hover: var(--palette-red-600);
    --color-danger-subtle: var(--palette-red-50);
    --color-danger-rgb: 239 68 68;

    --color-info: var(--palette-cyan-500);
    --color-info-hover: var(--palette-cyan-600);
    --color-info-subtle: var(--palette-cyan-50);
    --color-info-rgb: 6 182 212;

    /* ─── Alpha 透明度（每色 3 階：a5/a10/a20）─── */
    --color-primary-a5: rgb(var(--color-primary-rgb) / 0.05);
    --color-primary-a10: rgb(var(--color-primary-rgb) / 0.1);
    --color-primary-a20: rgb(var(--color-primary-rgb) / 0.2);

    --color-success-a5: rgb(var(--color-success-rgb) / 0.05);
    --color-success-a10: rgb(var(--color-success-rgb) / 0.1);
    --color-success-a20: rgb(var(--color-success-rgb) / 0.2);

    --color-danger-a5: rgb(var(--color-danger-rgb) / 0.05);
    --color-danger-a10: rgb(var(--color-danger-rgb) / 0.1);
    --color-danger-a20: rgb(var(--color-danger-rgb) / 0.2);

    --color-warning-a10: rgb(var(--color-warning-rgb) / 0.1);
    --color-warning-a20: rgb(var(--color-warning-rgb) / 0.2);

    /* Overlay */
    --color-overlay: rgb(0 0 0 / 0.4);

    /* White Alpha（暗底疊層用） */
    --color-white-a5: rgb(255 255 255 / 0.05);
    --color-white-a10: rgb(255 255 255 / 0.1);
    --color-white-a15: rgb(255 255 255 / 0.15);
    --color-white-a20: rgb(255 255 255 / 0.2);
    --color-white-a25: rgb(255 255 255 / 0.25);
    --color-white-a30: rgb(255 255 255 / 0.3);
    --color-white-a40: rgb(255 255 255 / 0.4);
    --color-white-a50: rgb(255 255 255 / 0.5);
    --color-white-a60: rgb(255 255 255 / 0.6);
    --color-white-a70: rgb(255 255 255 / 0.7);
    --color-white-a80: rgb(255 255 255 / 0.8);
    --color-white-a85: rgb(255 255 255 / 0.85);
    --color-white-a90: rgb(255 255 255 / 0.9);
    --color-white-a95: rgb(255 255 255 / 0.95);

    /* Black Alpha（陰影用） */
    --color-black-a4: rgb(0 0 0 / 0.04);
    --color-black-a5: rgb(0 0 0 / 0.05);
    --color-black-a6: rgb(0 0 0 / 0.06);
    --color-black-a8: rgb(0 0 0 / 0.08);
    --color-black-a10: rgb(0 0 0 / 0.1);
    --color-black-a15: rgb(0 0 0 / 0.15);
    --color-black-a20: rgb(0 0 0 / 0.2);
    --color-black-a25: rgb(0 0 0 / 0.25);

    /* ─── 中性色 ─── */
    --color-white: var(--palette-gray-0);
    --color-black: var(--palette-gray-950);

    --color-gray-50: var(--palette-gray-50);
    --color-gray-100: var(--palette-gray-100);
    --color-gray-200: var(--palette-gray-200);
    --color-gray-300: var(--palette-gray-300);
    --color-gray-400: var(--palette-gray-400);
    --color-gray-500: var(--palette-gray-500);
    --color-gray-600: var(--palette-gray-600);
    --color-gray-700: var(--palette-gray-700);
    --color-gray-800: var(--palette-gray-800);
    --color-gray-900: var(--palette-gray-900);

    /* ─── 背景色 ─── */
    --color-bg: var(--palette-gray-0);
    --color-bg-subtle: var(--palette-gray-50);
    --color-bg-muted: var(--palette-gray-100);

    /* ─── 文字色 ─── */
    --color-text: var(--palette-gray-900);
    --color-text-secondary: var(--palette-gray-700);
    --color-text-muted: var(--palette-gray-500);
    --color-text-disabled: var(--palette-gray-400);
    --color-text-inverse: var(--palette-gray-0);

    /* ─── 邊框色 ─── */
    --color-border: var(--palette-gray-200);
    --color-border-muted: var(--palette-gray-100);
    --color-border-strong: var(--palette-gray-300);
    --color-primary-border: var(--palette-teal-200);
    --color-success-border: var(--palette-green-300);
    --color-warning-border: var(--palette-yellow-300);

    /* ─── 漸層（已改為平面色，統一玻璃風格）─── */
    --gradient-primary: var(--color-primary);
    --gradient-success: var(--color-success);
    --gradient-danger: var(--color-danger);
    --gradient-warning: var(--color-warning);

    /* ─── 玻璃態 ─── */
    --glass-bg: rgb(255 255 255 / 0.52);
    --glass-bg-subtle: rgb(255 255 255 / 0.35);
    --glass-bg-medium: rgb(255 255 255 / 0.58);
    --glass-bg-strong: rgb(255 255 255 / 0.75);
    --glass-border: rgb(255 255 255 / 0.35);
    --glass-border-strong: rgb(255 255 255 / 0.5);
    --glass-shadow:
      0 1px 2px rgb(0 0 0 / 0.02), 0 4px 16px rgb(0 0 0 / 0.04),
      inset 0 1px 0 rgb(255 255 255 / 0.5);
    /* ─── 元件尺寸 ─── */
    --control-height-sm: 32px;
    --control-height-md: 40px;
    --control-height-lg: 48px;

    /* ─── 佈局 ─── */
    --navbar-height: 64px;
    --sidebar-width: 280px;
    --container-max: 1280px;

    /* ─── 彩色陰影 ─── */
    --shadow-primary: 0 10px 40px -10px rgb(var(--color-primary-rgb) / 0.3);
    --shadow-accent: 0 10px 40px -10px var(--color-accent);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   無障礙支援
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: high) {
  :root {
    --glass-bg: rgb(255 255 255 / 0.95);
    --glass-border: rgb(0 0 0 / 0.3);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: rgb(255 255 255 / 0.98);
    --glass-bg-strong: rgb(255 255 255 / 1);
    --glass-blur-sm: blur(0);
    --glass-blur-md: blur(0);
    --glass-blur-lg: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IIFE 應用專用變數（aigc-lab、exam-paper 使用）
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Bootstrap 5 整合 ─── */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-gray-600);
  --bs-success: var(--color-success);
  --bs-info: var(--color-info);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-light: var(--color-gray-50);
  --bs-dark: var(--color-gray-800);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);

  /* ─── 語義化色彩 - 藍色系 ─── */
  --color-blue: var(--color-info);
  --color-blue-light: var(--color-info-subtle);

  /* ─── 語義化色彩 - 官方/系統（綠色）─── */
  --color-official: var(--color-success);
  --color-official-subtle: var(--color-success-subtle);
  --color-official-border: var(--palette-green-300);

  /* ─── 語義化色彩 - 自訂/個人（紫色）─── */
  --color-custom: var(--palette-purple-700);
  --color-custom-subtle: var(--palette-purple-50);
  --color-custom-border: var(--palette-purple-200);
  --color-custom-rgb: 124 58 237;

  /* ─── 漸層系統擴展 ─── */
  --gradient-primary-subtle: var(--color-primary-subtle);

  /* ─── 增強陰影系統 ─── */
  --shadow-card-hover: 0 16px 48px rgb(var(--color-primary-rgb) / 0.12);
  --shadow-danger: 0 4px 12px rgb(220 53 69 / 0.2);
  --shadow-danger-lg: 0 8px 24px rgb(220 53 69 / 0.3);
  --shadow-focus-ring: 0 0 0 3px var(--color-primary-subtle);

  /* ─── 動畫參數 ─── */
  --anim-float-distance: -6px;
  --anim-card-enter-distance: 24px;
  --anim-card-enter-scale: 0.96;
  --stagger-delay: 50ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   學生端 App 專用變數（作用域：.student-aiexam-app 根元素）
   ═══════════════════════════════════════════════════════════════════════════ */

.student-aiexam-app {
  /* ─── 學生端品牌色 ─── */
  --mosme-student-primary: var(--palette-teal-600);
  --mosme-student-primary-light: var(--palette-teal-400);
  --mosme-student-primary-lighter: var(--palette-teal-50);
  --mosme-student-accent: var(--palette-orange-500);
  --mosme-student-accent-hover: var(--palette-orange-600);

  /* ─── 學生端功能色 ─── */
  --student-header-bg: var(--palette-teal-600);
  --student-tint-subtle: rgb(0 0 0 / 0.02);
  --student-tint-light: rgb(0 0 0 / 0.01);

  /* ─── 學生端玻璃態 ─── */
  --student-glass-bg-strong: var(--glass-bg-strong);
  --student-glass-blur-light: var(--glass-blur-md) saturate(160%);

  /* ─── 學生端卡片與面板 ─── */
  --student-panel-bg: var(--glass-bg-strong);
  --student-panel-border: rgb(148 163 184 / 0.18);

  /* ─── 學生端陰影 ─── */
  --student-shadow-primary: 0 10px 40px -10px rgb(0 0 0 / 0.1);

  /* ─── 學生端聊天氣泡 ─── */
  --student-bubble-ai-border: rgb(0 0 0 / 0.06);
  --student-bubble-ai-shadow: 0 4px 16px rgb(0 0 0 / 0.04);

  /* ─── 學生端倒計時 ─── */
  --student-countdown-bg: rgb(16 185 129 / 0.1);
  --student-countdown-border: rgb(16 185 129 / 0.25);
  --student-countdown-warning-bg: rgb(239 68 68 / 0.12);
  --student-countdown-warning-border: rgb(239 68 68 / 0.35);

  /* ─── 學生端提示詞卡片 ─── */
  --student-prompt-card-bg: var(--glass-bg-strong);
  --student-prompt-card-hover-bg: var(--color-primary-subtle);
  --student-prompt-card-hover-shadow: 0 8px 24px rgb(0 0 0 / 0.08);

  /* ─── 學生端輸入框 ─── */
  --student-input-focus-ring: 0 0 0 4px rgb(23 185 185 / 0.15);
  --student-input-focus-border: var(--palette-teal-400);

  /* ─── 中性灰透明度階梯 ─── */
  --student-navy-alpha-3: rgb(15 23 42 / 0.03);
  --student-navy-alpha-6: rgb(15 23 42 / 0.05);
  --student-navy-alpha-8: rgb(15 23 42 / 0.07);
  --student-navy-alpha-10: rgb(15 23 42 / 0.09);
  --student-navy-alpha-12: rgb(15 23 42 / 0.1);
  --student-navy-alpha-15: rgb(15 23 42 / 0.13);
  --student-navy-alpha-20: rgb(15 23 42 / 0.17);
  --student-navy-alpha-30: rgb(15 23 42 / 0.27);

  /* ─── 學生端白色透明度階梯 ─── */
  --student-white-alpha-10: rgb(255 255 255 / 0.1);
  --student-white-alpha-15: rgb(255 255 255 / 0.15);
  --student-white-alpha-20: rgb(255 255 255 / 0.2);
  --student-white-alpha-25: rgb(255 255 255 / 0.25);
  --student-white-alpha-30: rgb(255 255 255 / 0.3);
  --student-white-alpha-50: rgb(255 255 255 / 0.5);
  --student-white-alpha-60: rgb(255 255 255 / 0.6);
  --student-white-alpha-70: rgb(255 255 255 / 0.7);
  --student-white-alpha-80: rgb(255 255 255 / 0.8);
  --student-white-alpha-90: rgb(255 255 255 / 0.9);
  --student-white-alpha-95: rgb(255 255 255 / 0.95);

  /* ─── 學生端語意化複合變數 ─── */
  --student-bg-app: var(--color-gray-100);
  --student-overlay-bg: rgb(15 23 42 / 0.55);
  --student-overlay-shadow: rgb(15 23 42 / 0.2);

  /* ─── 橙色強調透明度 ─── */
  --student-orange-alpha-10: rgb(249 115 22 / 0.1);
  --student-orange-alpha-20: rgb(249 115 22 / 0.2);
  --student-orange-alpha-25: rgb(249 115 22 / 0.25);
  --student-orange-alpha-50: rgb(249 115 22 / 0.5);

  /* ─── 倒計時（綠色成功態）─── */
  --student-countdown-text-gradient: linear-gradient(90deg, var(--color-white) 0%, var(--palette-green-200) 100%);
  --student-countdown-glow: 0 4px 16px rgb(16 185 129 / 0.15);

  /* ─── 倒計時（紅色警告態）─── */
  --student-countdown-warning-text-gradient: linear-gradient(90deg, var(--color-white) 0%, var(--palette-red-300) 100%);
  --student-countdown-warning-glow: 0 4px 16px rgb(239 68 68 / 0.2);
  --student-countdown-warning-pulse-shadow-1: 0 0 0 0 rgb(239 68 68 / 0.4);
  --student-countdown-warning-pulse-shadow-2: 0 0 0 10px rgb(239 68 68 / 0);

  /* ─── 離開按鈕（紅色危險態）─── */
  --student-btn-exit-bg: rgb(239 68 68 / 0.1);
  --student-btn-exit-border: rgb(252 165 165 / 0.25);
  --student-btn-exit-hover-bg: rgb(239 68 68 / 0.25);
  --student-btn-exit-hover-border: rgb(239 68 68 / 0.5);
  --student-btn-exit-hover-shadow: 0 8px 20px rgb(239 68 68 / 0.25);

  /* ─── 正確答案背景 ─── */
  --student-correct-answer-bg: rgb(16 185 129 / 0.15);

  /* ─── 未授權/骨架屏背景 ─── */
  --student-bg-skeleton: var(--color-gray-100);
  --student-text-muted: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   教師端共用 UI 變數（aigc-lab + exam-paper 共用）
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 布局 */
  --t-sidebar-width: 260px;
  --t-sidebar-width-collapsed: 64px;
  --t-sidebar-z-index: var(--z-overlay);
  --t-sidebar-transition: width var(--duration-moderate) var(--ease-in-out),
    transform var(--duration-moderate) var(--ease-in-out);
  --t-header-height: 72px;
  --t-header-height-mobile: 56px;

  /* 卡片 */
  --t-card-radius: var(--radius-xl);
  --t-card-shadow-hover: 0 12px 24px rgb(var(--color-primary-rgb) / 0.12);
  --t-card-transition: transform var(--duration-moderate) var(--ease-in-out),
    box-shadow var(--duration-moderate) var(--ease-in-out),
    background-color var(--duration-moderate) var(--ease-in-out);
  --t-card-hover-transform: translateY(-4px);
  --t-card-active-transform: translateY(-2px);
  --t-card-shadow-active: 0 8px 16px rgb(var(--color-primary-rgb) / 0.15);

  /* 表單 */
  --t-input-height: 38px;

  /* 按鈕 */
  --t-btn-height-sm: 36px;
  --t-btn-transition: color var(--duration-normal) var(--ease-in-out),
    background-color var(--duration-normal) var(--ease-in-out),
    box-shadow var(--duration-normal) var(--ease-in-out),
    transform var(--duration-normal) var(--ease-in-out);
  --t-btn-hover-transform: translateY(-2px);

  /* 導航 */
  --t-nav-item-height: 40px;
  --t-nav-item-radius: 10px;
  --t-nav-active-indicator: 3px;
}

@media (max-width: 768px) {
  :root {
    --t-header-height: var(--t-header-height-mobile);
    --t-btn-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   基礎樣式重置
   ═══════════════════════════════════════════════════════════════════════════ */

/* IIFE 模式下限定 reset 在 Vue 容器內，避免影響 .NET 頁面 */
[data-vue-app] {
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

[data-vue-app] *,
[data-vue-app] *::before,
[data-vue-app] *::after {
  box-sizing: inherit;
}

/* 頁面級捲動條統一（避免不同頁面因捲動條寬度不同導致畫面寬度不一致） */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* AI Logo 圖標 */
.ai-icon {
  --ai-icon-size: 20px;
  display: inline-block;
  width: var(--ai-icon-size);
  height: var(--ai-icon-size);
  background: url('/Images/AILogo.png') no-repeat center / contain;
  vertical-align: middle;
}
 
/* ═══ 內聯結束 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   官網專案特有變數
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── 官網漸層 ─── */
  --gradient-primary: linear-gradient(
    135deg,
    var(--palette-teal-500) 0%,
    var(--palette-teal-600) 100%
  );
  --gradient-hot: linear-gradient(
    135deg,
    var(--palette-orange-500) 0%,
    var(--palette-red-500) 100%
  );
  --gradient-success: linear-gradient(135deg, var(--palette-green-500) 0%, var(--palette-green-600) 100%);

  /* ─── 官網按鈕實色（非漸層，語義化命名）─── */
  --btn-color-primary: var(--color-primary);
  --btn-color-primary-hover: var(--color-primary-hover);
  --btn-color-yellow: var(--palette-yellow-500);
  --btn-color-yellow-hover: var(--palette-yellow-400);
  --btn-color-blue: var(--palette-blue-500);
  --btn-color-blue-hover: var(--palette-blue-400);

  /* ─── 官網背景實色 ─── */
  --bg-dark: var(--palette-gray-800);

  --section-padding: var(--spacing-12);

  /* ─── 語意色 RGB 分量（供 alpha 合成使用）─── */
  --color-success-rgb: 16 185 129; /* palette-green-500 */
  --color-danger-rgb: 239 68 68; /* palette-red-500 */
  --color-orange-rgb: 249 115 22; /* palette-orange-500 */

  /* ─── 官網陰影擴展 ─── */
  --shadow-primary: 0 10px 40px -10px rgb(var(--color-primary-rgb) / 0.3);
  --shadow-accent: 0 10px 40px -10px rgb(251 191 36 / 0.3);
  --shadow-card-float: 0 20px 60px -15px rgb(var(--color-primary-rgb) / 0.2);
  --shadow-glow-primary: 0 0 30px rgb(var(--color-primary-rgb) / 0.25);
  --shadow-glow-accent: 0 0 30px rgb(251 191 36 / 0.25);

  /* ─── 焦點環陰影 ─── */
  --shadow-focus-ring: 0 0 0 4px rgb(var(--color-primary-rgb) / 0.15);
  --shadow-focus-ring-strong: 0 0 0 4px rgb(var(--color-primary-rgb) / 0.2);

  /* ─── 語意徽章光暈 ─── */
  --shadow-glow-success: 0 0 12px rgb(var(--color-success-rgb) / 0.4);
  --shadow-glow-danger: 0 0 12px rgb(var(--color-danger-rgb) / 0.4);
  --shadow-glow-sale: 0 0 12px rgb(var(--color-orange-rgb) / 0.4);

  /* ─── Section 色調帷幕（冷暖交替，營造視覺節奏）─── */
  --section-tint-cool: rgb(224 242 252 / 0.45); /* 淡天藍 — Ecosystem、Stats */
  --section-tint-warm: rgb(253 245 220 / 0.45); /* 淡奶黃 — News */

  /* ─── 螢光筆基色（RGB 分量）─── */
  --highlighter-yellow-rgb: 250 204 21; /* ~palette-yellow-300 */
  --highlighter-pink-rgb: 244 114 182;
  --highlighter-green-rgb: 34 197 94; /* ~palette-green-400 */

  /* ─── 官網玻璃態擴展 ─── */
  --glass-bg-level-1: rgb(255 255 255 / 0.38);
  --glass-bg-level-2: rgb(255 255 255 / 0.55);
  --glass-bg-level-3: rgb(255 255 255 / 0.75);
  --glass-bg-nav: linear-gradient(180deg, rgb(255 255 255 / 0.38) 0%, rgb(255 255 255 / 0.32) 100%);
  --glass-bg-nav-scrolled: linear-gradient(
    180deg,
    rgb(255 255 255 / 0.48) 0%,
    rgb(255 255 255 / 0.42) 100%
  );
  --glass-border-subtle: rgb(255 255 255 / 0.2);
  --hp-glass-blur: var(--glass-blur-lg) var(--glass-saturate);
  --hp-glass-blur-sm: var(--glass-blur-md) saturate(160%);
  --hp-glass-blur-md: blur(28px) saturate(185%);
  --hp-glass-blur-lg: blur(40px) saturate(200%);
  --glass-shadow-nav:
    0 1px 2px rgb(0 0 0 / 0.02), 0 4px 16px rgb(0 0 0 / 0.03), inset 0 1px 0 rgb(255 255 255 / 0.5);
  --glass-shadow-nav-scrolled:
    0 1px 3px rgb(0 0 0 / 0.04), 0 8px 32px rgb(0 0 0 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.6);

  /* ─── 裝飾性模糊 ─── */
  --blur-decorative-sm: 40px;
  --blur-decorative-md: 60px;
  --blur-decorative-lg: 80px;
  --blur-decorative-xl: 100px;

  /* ─── 官網響應式字體大小（hp- 前綴，避免覆蓋核心 --text-* 令牌）─── */
  --hp-text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
  --hp-text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem);
  --hp-text-base: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --hp-text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --hp-text-xl: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
  --hp-text-2xl: clamp(1.3rem, 1.1rem + 0.5vw, 1.5rem);
  --hp-text-3xl: clamp(1.6rem, 1.3rem + 0.8vw, 1.875rem);
  --hp-text-4xl: clamp(2rem, 1.5rem + 1.2vw, 2.25rem);
  --hp-text-5xl: clamp(2.5rem, 1.8rem + 1.8vw, 3rem);
  --hp-text-6xl: clamp(3rem, 2rem + 2.5vw, 3.75rem);

  /* ─── 官網專用緩動函數 ─── */
  --ease-bounce-subtle: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* ─── 官網區塊間距 ─── */
  --hp-section-py: 3.75rem;    /* 60px — 標準區塊內距 */
  --hp-section-py-lg: 6.25rem; /* 100px — 大型區塊內距 */
  --hp-section-py-xl: 7.5rem;  /* 120px — 英雄區塊內距 */
  --hp-gap-sm: 1.875rem;       /* 30px */
  --hp-gap-md: 2.5rem;         /* 40px */
  --hp-gap-lg: 3.75rem;        /* 60px */
  --hp-gap-xl: 3.5rem;         /* 56px（原 80px → 縮減至適中間距）*/
  --hp-gap-2xl: 4.5rem;        /* 72px（原 100px → 縮減至適中間距）*/

  /* ─── 佈局 ─── */
  --nav-section-height: 48px;
  --control-height-nav-mobile: 36px;
  --container-padding: clamp(1rem, 5vw, 2rem);

  /* ─── 角色主題色 ─── */
  --teacher-color: var(--palette-brown-600);
  --teacher-color-light: var(--palette-brown-500);
  --teacher-shadow: rgb(137 43 0 / 0.3);
  --teacher-hover-bg: rgb(137 43 0 / 0.06);

  --student-color: #002fa7;
  --student-color-light: #0040d6;
  --student-shadow: rgb(0 47 167 / 0.3);
  --student-hover-bg: rgb(0 47 167 / 0.06);

  /* ─── Footer 深色主題 ─── */
  --footer-bg: #0c1222;
  --footer-bg-dark: #0a0f1a;
  --footer-text: var(--palette-gray-400);
  --footer-text-muted: var(--palette-gray-500);
  --footer-text-light: var(--palette-gray-200);
  --footer-border: rgb(255 255 255 / 0.06);

  /* ─── 關於頁面主題 ─── */
  --about-primary: #2d5f7e;
  --about-primary-rgb: 45 95 126;
  --about-primary-dark: #1a4058;
  --about-primary-dark-rgb: 26 64 88;
  --about-secondary: #f4a261;
  --about-secondary-rgb: 244 162 97;
  --about-accent: #e76f51;
  --about-light-bg: #faf8f5;
  --about-dark-text: #1a2930;
  --about-mid-text: #4a5568;
  --about-shadow-soft: 0 8px 30px rgb(var(--about-primary-rgb) / 0.08);
  --about-shadow-medium: 0 12px 40px rgb(var(--about-primary-rgb) / 0.12);
  --about-border-radius: var(--radius-xl);

  /* ─── 教學頁面主題 ─── */
  --teaching-primary: var(--palette-yellow-500);
  --teaching-primary-dark: var(--palette-yellow-600);
  --teaching-secondary: var(--palette-yellow-400);
  --teaching-amber-rgb: 251 191 36;  /* yellow-400 */
  --teaching-dark-orange-rgb: 217 119 6; /* amber-600 */
  --teaching-bg-light: var(--palette-yellow-50);
  --teaching-bg-medium: var(--palette-yellow-100);
  --teaching-bg-warm: var(--palette-orange-50);
  --teaching-bg-section: #fff9f5;
  --teaching-text-dark: var(--palette-yellow-900);

  /* ─── 資源頁面主題（改用 palette 引用，減少硬編碼）─── */
  --resources-primary: var(--palette-orange-500); /* 原 #ff6b35 → 統一使用 palette */
  --resources-primary-rgb: 249 115 22; /* palette-orange-500 RGB */
  --resources-primary-dark: var(--palette-orange-600);
  --resources-secondary: var(--palette-yellow-500); /* 原 #f7931e → 統一使用 palette */
  --resources-secondary-rgb: 245 158 11; /* palette-yellow-500 RGB */
  --resources-accent: var(--palette-red-400); /* 原 #ff4757 → 統一使用 palette */
  --resources-accent-rgb: 248 113 113; /* palette-red-400 RGB */
  --resources-text-light: var(--color-white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   響應式調整
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --section-padding: var(--spacing-8); /* 32px（修復：原 spacing-16=64px 比桌面版更大）*/
    --hp-gap-xl: 2rem;       /* 32px */
    --hp-gap-2xl: 2.5rem;    /* 40px */
    --blur-decorative-sm: 20px;
    --blur-decorative-md: 30px;
    --blur-decorative-lg: 40px;
    --blur-decorative-xl: 50px;
  }
}

@media (max-width: 576px) {
  :root {
    --section-padding: var(--spacing-6); /* 24px（修復：原 spacing-4=16px 過小）*/
    --hp-gap-xl: 1.5rem;     /* 24px */
    --hp-gap-2xl: 2rem;      /* 32px */
  }
}