/* ========================================
   互動模組設計系統 — Premium APP Feel
   修改以下變數即可調整所有互動模組的全局風格
   ======================================== */
:root {
    /* ── 色彩系統 ── */
    --ix-bg: #ffffff;
    --ix-bg-subtle: #f8fafc;
    --ix-bg-elevated: #ffffff;
    --ix-bg-option: #f8fafc;
    --ix-bg-option-hover: #f1f5f9;
    --ix-border: #e8ecf0;
    --ix-border-subtle: #f1f3f5;
    --ix-border-focus: #3b82f6;
    --ix-radius: 16px;
    --ix-radius-md: 12px;
    --ix-radius-sm: 10px;
    --ix-radius-xs: 8px;
    --ix-radius-full: 9999px;
    --ix-text: #0f172a;
    --ix-text-secondary: #334155;
    --ix-text-muted: #64748b;
    --ix-text-light: #94a3b8;
    --ix-primary: #3b82f6;
    --ix-primary-light: #60a5fa;
    --ix-primary-dark: #2563eb;
    --ix-primary-bg: rgba(59, 130, 246, 0.06);
    --ix-primary-bg-hover: rgba(59, 130, 246, 0.10);
    --ix-success: #10b981;
    --ix-success-bg: rgba(16, 185, 129, 0.06);
    --ix-danger: #ef4444;
    --ix-danger-bg: rgba(239, 68, 68, 0.06);
    --ix-warning: #f59e0b;

    /* ── 陰影系統 ── */
    --ix-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
    --ix-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --ix-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.02);
    --ix-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 8px 32px rgba(0, 0, 0, 0.03);
    --ix-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.04);
    --ix-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.12);
    --ix-shadow-success: 0 0 0 3px rgba(16, 185, 129, 0.12);
    --ix-shadow-danger: 0 0 0 3px rgba(239, 68, 68, 0.12);

    /* ── 動態 ── */
    --ix-font: inherit;
    --ix-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ix-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ix-transition: 0.2s var(--ix-ease);
    --ix-transition-fast: 0.15s var(--ix-ease);
}

/* ========================================
   通用容器覆蓋 — 所有互動元件
   ======================================== */
.quiz-container,
.poll-container,
.truefalse-container,
.opentext-container,
.scale-container,
.buzzer-container,
.wordcloud-container,
.hotspot-container,
.matching-container,
.fill-blank-container,
.ordering-container,
.copy-card-container {
    background: var(--ix-bg);
    border: 1px solid var(--ix-border-subtle);
    border-radius: var(--ix-radius);
    box-shadow: var(--ix-shadow);
    font-family: var(--ix-font);
    transition: box-shadow 0.3s var(--ix-ease);
}

/* ── 通用問題標題 ── */
.quiz-question,
.poll-question,
.tf-question,
.opentext-question,
.scale-question,
.buzzer-question,
.wordcloud-question,
.hotspot-question,
.fill-blank-title,
.copy-card-title {
    color: var(--ix-text);
    letter-spacing: -0.01em;
    line-height: 1.5;
}

/* ── 通用重新作答按鈕 ── */
.interactive-reset-btn {
    border: 1px solid var(--ix-border);
    border-radius: var(--ix-radius-full);
    background: var(--ix-bg);
    color: var(--ix-text-muted);
    box-shadow: var(--ix-shadow-xs);
    top: 10px;
    right: 10px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--ix-transition);
}

.interactive-reset-btn:hover {
    background: var(--ix-bg-subtle);
    color: var(--ix-text-secondary);
    border-color: #d1d5db;
    box-shadow: var(--ix-shadow-sm);
    transform: translateY(-1px);
}

/* 簡報模式隱藏互動標籤 */
.presentation-slide .interactive-label,
.presentation-mode .interactive-label {
    display: none !important;
}

/* 簡報模式：互動元件允許捲動 */
.presentation-slide .interactive-element {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* 簡報模式：隱藏捲軸但保留捲動功能 */
.presentation-slide .interactive-element::-webkit-scrollbar {
    width: 4px;
}
.presentation-slide .interactive-element::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}
.presentation-slide .interactive-element::-webkit-scrollbar-track {
    background: transparent;
}

/* ── 小螢幕簡報模式：縮減互動元件 padding ── */
@media (max-height: 768px) {
    .presentation-slide .quiz-container,
    .presentation-slide .poll-container,
    .presentation-slide .truefalse-container,
    .presentation-slide .opentext-container,
    .presentation-slide .scale-container,
    .presentation-slide .buzzer-container,
    .presentation-slide .wordcloud-container {
        padding: 16px 20px;
    }
    .presentation-slide .quiz-question,
    .presentation-slide .poll-question {
        font-size: 0.95rem;
        margin-bottom: 14px;
    }
    .presentation-slide .quiz-option,
    .presentation-slide .poll-option {
        padding: 10px 14px;
    }
    .presentation-slide .quiz-options,
    .presentation-slide .poll-options {
        gap: 6px;
    }
}

/* ── presTopBar 小螢幕適配 ── */
@media (max-width: 1280px) {
    .pres-bar-btn {
        padding: 3px 7px;
        font-size: 10px;
    }
    .pres-bar-group {
        gap: 2px;
    }
    .pres-bar-divider {
        margin: 0 2px;
    }
    .pres-info-text {
        max-width: 120px;
    }
}

/* ========================================
   通用按鈕基底
   ======================================== */
.quiz-submit,
.opentext-submit,
.scale-submit,
.buzzer-submit-btn,
.wordcloud-submit,
.hs-submit-btn,
.fill-blank-check-btn {
    border: none;
    border-radius: var(--ix-radius-sm);
    background: var(--ix-primary);
    color: white;
    font-weight: 600;
    font-family: var(--ix-font);
    cursor: pointer;
    transition: all var(--ix-transition);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    position: relative;
    overflow: hidden;
}

.quiz-submit:hover,
.opentext-submit:hover,
.scale-submit:hover,
.wordcloud-submit:hover,
.hs-submit-btn:hover,
.fill-blank-check-btn:hover {
    background: var(--ix-primary-dark);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
    transform: translateY(-1px);
}

.quiz-submit:active,
.opentext-submit:active,
.scale-submit:active,
.wordcloud-submit:active,
.hs-submit-btn:active,
.fill-blank-check-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.15);
}

.quiz-submit:disabled,
.opentext-submit:disabled,
.scale-submit:disabled,
.buzzer-submit-btn:disabled,
.buzzer-submit-btn.pressed,
.wordcloud-submit:disabled,
.hs-submit-btn:disabled,
.fill-blank-check-btn:disabled {
    background: #cbd5e1;
    box-shadow: none;
    cursor: default;
    transform: none;
}

/* ========================================
   選擇題 — Quiz
   ======================================== */
.quiz-container {
    padding: 28px 32px;
}

.quiz-question {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.quiz-options {
    gap: 10px;
}

.quiz-option {
    padding: 14px 18px;
    background: var(--ix-bg-option);
    border: 1.5px solid transparent;
    border-radius: var(--ix-radius-sm);
    color: var(--ix-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    gap: 14px;
    transition: all var(--ix-transition);
    box-shadow: var(--ix-shadow-xs);
}

.quiz-option:hover {
    background: var(--ix-bg-option-hover);
    border-color: transparent;
    box-shadow: var(--ix-shadow-sm);
    transform: translateY(-1px);
}

.quiz-option .option-marker {
    width: 26px;
    height: 26px;
    border-radius: var(--ix-radius-xs);
    background: #e8ecf0;
    color: var(--ix-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    transition: all var(--ix-transition);
}

.quiz-option.selected {
    background: var(--ix-primary-bg);
    border-color: var(--ix-primary);
    box-shadow: var(--ix-shadow-focus);
}

.quiz-option.selected .option-marker {
    background: var(--ix-primary);
    color: white;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.quiz-option.correct-answer {
    background: var(--ix-success-bg);
    border-color: var(--ix-success);
    box-shadow: var(--ix-shadow-success);
    pointer-events: none;
}

.quiz-option.correct-answer .option-marker {
    background: var(--ix-success);
    color: white;
}

.quiz-option.wrong-answer {
    background: var(--ix-danger-bg);
    border-color: var(--ix-danger);
    box-shadow: var(--ix-shadow-danger);
    pointer-events: none;
}

.quiz-option.wrong-answer .option-marker {
    background: var(--ix-danger);
    color: white;
}

.quiz-option.missed-answer {
    background: rgba(245, 158, 11, 0.06);
    border-color: var(--ix-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
    pointer-events: none;
}

.quiz-option.missed-answer .option-marker {
    background: var(--ix-warning);
    color: white;
}

.quiz-result {
    font-size: 0.85rem;
    font-weight: 600;
}

.quiz-result.success {
    color: var(--ix-success);
}

.quiz-result.error {
    color: var(--ix-danger);
}

.quiz-retry {
    border: 1.5px solid var(--ix-border);
    border-radius: var(--ix-radius-xs);
    background: var(--ix-bg);
    color: var(--ix-text-muted);
    font-weight: 500;
    transition: all var(--ix-transition);
}

.quiz-retry:hover {
    border-color: #cbd5e1;
    background: var(--ix-bg-subtle);
    color: var(--ix-text-secondary);
}

/* ========================================
   投票 — Poll
   ======================================== */
.poll-container {
    padding: 28px 28px;
}

.poll-question {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 22px;
    letter-spacing: -0.01em;
}

.poll-options {
    gap: 10px;
}

.poll-option {
    padding: 14px 18px;
    border: 1.5px solid transparent;
    border-radius: var(--ix-radius-sm);
    background: var(--ix-bg-option);
    color: var(--ix-text-secondary);
    gap: 14px;
    transition: all var(--ix-transition);
    box-shadow: var(--ix-shadow-xs);
    overflow: hidden;
}

.poll-option:hover {
    background: var(--ix-bg-option-hover);
    box-shadow: var(--ix-shadow-sm);
    transform: translateY(-1px);
    border-color: transparent;
}

.poll-option .option-marker {
    width: 30px;
    height: 30px;
    border-radius: var(--ix-radius-xs);
    background: #e8ecf0;
    color: var(--ix-text-muted);
    font-weight: 700;
    font-size: 0.82rem;
    transition: all var(--ix-transition);
}

.poll-option .poll-bar {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
    border-radius: var(--ix-radius-sm);
}

.poll-option .poll-pct {
    color: var(--ix-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.poll-option.poll-selected {
    border-color: var(--ix-primary);
    background: var(--ix-primary-bg);
    box-shadow: var(--ix-shadow-focus);
}

.poll-option.poll-selected .option-marker {
    background: var(--ix-primary);
    color: white;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.poll-option.poll-selected .poll-bar {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%);
}

.poll-voted .poll-option {
    cursor: default;
}

.poll-voted .poll-option:hover {
    border-color: transparent;
    background: var(--ix-bg-option);
    box-shadow: var(--ix-shadow-xs);
    transform: none;
}

.poll-voted .poll-option.poll-selected:hover {
    border-color: var(--ix-primary);
    background: var(--ix-primary-bg);
    box-shadow: var(--ix-shadow-focus);
}

.poll-status {
    color: var(--ix-success);
    font-weight: 600;
}

.poll-footer {
    border-top: 1px solid var(--ix-border-subtle);
}

.poll-total {
    color: var(--ix-text-muted);
    font-size: 0.85rem;
}

/* ========================================
   是非題 — True/False
   ======================================== */
.truefalse-container {
    padding: 20px 28px;
}

.tf-question {
    font-weight: 700;
    color: var(--ix-text);
    letter-spacing: -0.01em;
}

.tf-buttons {
    gap: 16px;
}

.tf-btn {
    border: 2px solid var(--ix-border);
    border-radius: 20px;
    background: var(--ix-bg);
    color: var(--ix-text-muted);
    transition: all 0.25s var(--ix-ease);
    box-shadow: var(--ix-shadow-sm);
}

.tf-btn:hover {
    border-color: #cbd5e1;
    box-shadow: var(--ix-shadow-md);
    transform: translateY(-3px);
    background: var(--ix-bg-subtle);
}

.tf-btn.selected {
    box-shadow: var(--ix-shadow);
}

.tf-btn.tf-waiting {
    border-color: var(--ix-primary-light);
    background: var(--ix-primary-bg);
    color: var(--ix-primary);
    box-shadow: var(--ix-shadow-focus);
}

.tf-btn.correct {
    background: var(--ix-success-bg);
    border-color: var(--ix-success);
    color: #065f46;
    box-shadow: var(--ix-shadow-success), var(--ix-shadow-sm);
}

.tf-btn.wrong {
    background: var(--ix-danger-bg);
    border-color: var(--ix-danger);
    color: #991b1b;
    box-shadow: var(--ix-shadow-danger), var(--ix-shadow-sm);
}

.tf-result.success {
    color: var(--ix-success);
}

.tf-result.error {
    color: var(--ix-danger);
}

.tf-result.tf-pending {
    color: var(--ix-primary);
    background: var(--ix-primary-bg);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.tf-reveal-btn {
    background: linear-gradient(135deg, var(--ix-primary), var(--ix-primary-dark));
    border-radius: var(--ix-radius-sm);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
    transition: all var(--ix-transition);
}

.tf-reveal-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

/* 統計 */
.tf-stats,
.tf-stats-area {
    max-width: 360px;
    align-self: center;
}

.tf-stats-bar,
.tf-stat-bar {
    height: 5px;
    border-radius: var(--ix-radius-full);
    background: var(--ix-bg-option);
    overflow: hidden;
}

.tf-stats-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ix-success), #34d399);
    border-radius: var(--ix-radius-full);
    transition: width 0.5s ease;
}

.tf-stats-label,
.tf-stat-label {
    color: var(--ix-text-light);
}

.tf-stat-value {
    font-variant-numeric: tabular-nums;
}

.tf-stat-correct .tf-stat-value {
    color: var(--ix-success);
}

.tf-stat-wrong .tf-stat-value {
    color: var(--ix-danger);
}

.tf-stat-fill.correct {
    background: linear-gradient(90deg, var(--ix-success), #34d399);
}

.tf-stat-fill.wrong {
    background: linear-gradient(90deg, var(--ix-danger), #f87171);
}

/* ========================================
   開放問答 — Open Text
   ======================================== */
.opentext-container {
    padding: 24px 28px;
}

.opentext-question {
    font-weight: 700;
    color: var(--ix-text);
}

.opentext-input,
.opentext-textarea {
    border: 1.5px solid var(--ix-border);
    border-radius: var(--ix-radius-sm);
    background: var(--ix-bg-subtle);
    color: var(--ix-text);
    font-family: var(--ix-font);
    transition: all var(--ix-transition);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

.opentext-input:focus,
.opentext-textarea:focus {
    outline: none;
    border-color: var(--ix-primary);
    background: var(--ix-bg);
    box-shadow: var(--ix-shadow-focus), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.opentext-input:disabled,
.opentext-textarea:disabled {
    background: var(--ix-bg-subtle);
    color: var(--ix-text-muted);
}

.opentext-counter {
    color: var(--ix-text-light);
}

.opentext-result.success {
    color: var(--ix-success);
}

/* ========================================
   量表 — Scale
   ======================================== */
.scale-container {
    padding: 28px;
}

.scale-question {
    font-weight: 700;
    color: var(--ix-text);
}

.scale-slider,
.scale-range {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: var(--ix-radius-full);
    background: linear-gradient(90deg, #e2e8f0, var(--ix-primary-light));
    outline: none;
}

.scale-slider::-webkit-slider-thumb,
.scale-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ix-bg);
    border: 3px solid var(--ix-primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    transition: all var(--ix-transition-fast);
}

.scale-slider::-webkit-slider-thumb:hover,
.scale-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.35);
}

.scale-slider::-webkit-slider-thumb:active,
.scale-range::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

.scale-value {
    color: var(--ix-primary);
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.scale-labels,
.scale-label-edge {
    color: var(--ix-text-light);
    font-size: 12px;
}

.scale-result.success {
    color: var(--ix-success);
}

/* ========================================
   搶答 — Buzzer
   ======================================== */
.buzzer-container {
    padding: 28px;
}

.buzzer-question {
    font-weight: 700;
    color: var(--ix-text);
}

.buzzer-input-row {
    max-width: 420px;
    align-self: center;
}

.buzzer-text-input {
    border: 1.5px solid var(--ix-border);
    border-radius: var(--ix-radius-sm);
    background: var(--ix-bg-subtle);
    color: var(--ix-text);
    font-family: var(--ix-font);
    transition: all var(--ix-transition);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

.buzzer-text-input:focus {
    outline: none;
    border-color: var(--ix-primary);
    background: var(--ix-bg);
    box-shadow: var(--ix-shadow-focus), inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.buzzer-text-input:disabled {
    background: var(--ix-bg-subtle);
    color: var(--ix-text-muted);
}

.buzzer-submit-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--ix-danger);
    border-radius: var(--ix-radius-sm);
    font-family: var(--ix-font);
    font-weight: 700;
    transition: all var(--ix-transition);
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.25);
}

.buzzer-submit-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(239, 68, 68, 0.35);
}

.buzzer-submit-btn:active {
    transform: scale(0.97);
}

.buzzer-status {
    text-align: center;
}

.buzzer-status.claimed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ix-danger);
    font-weight: 600;
    padding: 8px 16px;
    background: var(--ix-danger-bg);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--ix-radius-sm);
}

.buzzer-result {
    justify-content: center;
}

.buzzer-result.success {
    color: var(--ix-success);
}

.buzzer-ranking {
    max-width: 420px;
    align-self: center;
}

.buzzer-rank-title {
    border-bottom: 1px solid var(--ix-border-subtle);
    padding-bottom: 8px;
    color: var(--ix-text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.buzzer-rank-item {
    color: var(--ix-text);
    border-bottom-color: var(--ix-border-subtle);
    padding: 6px 0;
}

.buzzer-rank-answer {
    color: var(--ix-text-light);
}

.buzzer-medal {
    box-shadow: var(--ix-shadow-xs);
}

/* ========================================
   文字雲 — Word Cloud
   ======================================== */
.wordcloud-container {
    padding: 24px 28px;
}

.wordcloud-question {
    font-weight: 700;
    color: var(--ix-text);
}

.wc-count {
    color: var(--ix-text-light);
}

.wordcloud-input {
    border: 1.5px solid var(--ix-border);
    border-radius: var(--ix-radius-sm);
    background: var(--ix-bg-subtle);
    color: var(--ix-text);
    font-family: var(--ix-font);
    transition: all var(--ix-transition);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

.wordcloud-input:focus {
    outline: none;
    border-color: var(--ix-primary);
    background: var(--ix-bg);
    box-shadow: var(--ix-shadow-focus);
}

.wordcloud-input:disabled {
    background: var(--ix-bg-subtle);
    color: var(--ix-text-muted);
}

.wordcloud-result.success {
    color: var(--ix-success);
}

.wordcloud-cloud {
    border: none;
    border-radius: var(--ix-radius-md);
    padding: 20px;
    min-height: 60px;
    background: var(--ix-bg-subtle);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.wordcloud-body {
    gap: 16px;
}

.wordcloud-word {
    font-weight: 600;
    line-height: 1.4;
    transition: transform 0.2s var(--ix-ease-spring);
}

.wordcloud-word:hover {
    transform: scale(1.12);
}

.wordcloud-empty {
    color: var(--ix-text-light);
}

.wc-submitted .wc-inputs {
    display: none;
}

.wc-submitted .wc-footer {
    justify-content: flex-end;
}

.wc-submitted .wordcloud-submit {
    display: none;
}

.wc-submitted {
    width: auto;
    min-width: 0;
    max-width: none;
}

.wc-cloud-expanded {
    flex: 1;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: none;
}

.wc-sync {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 10px;
    font-size: 12px;
    color: var(--ix-text-light);
    font-weight: 400;
}

.wc-sync-icon {
    font-size: 14px !important;
    animation: wc-spin 1.5s linear infinite;
}

@keyframes wc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   連連看 — Matching
   ======================================== */
.matching-container {
    padding: 32px 36px;
}

.matching-item {
    padding: 14px 18px;
    background: var(--ix-bg-option);
    border-radius: var(--ix-radius-sm);
    box-shadow: var(--ix-shadow-xs);
    border: 1.5px solid transparent;
    font-weight: 500;
    color: var(--ix-text-secondary);
    transition: all var(--ix-transition);
}

.matching-item:hover {
    background: var(--ix-bg-option-hover);
    box-shadow: var(--ix-shadow-sm);
    transform: translateY(-2px);
    border-color: transparent;
}

.matching-item.selected {
    background: var(--ix-primary);
    color: white;
    border-color: var(--ix-primary);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}

.matching-item.correct {
    background: var(--ix-success-bg);
    color: #065f46;
    border-color: var(--ix-success);
    box-shadow: var(--ix-shadow-success);
}

.matching-item.incorrect {
    background: var(--ix-danger-bg);
    color: #991b1b;
    border-color: var(--ix-danger);
    box-shadow: var(--ix-shadow-danger);
}

.matching-item.dragging {
    background: var(--ix-primary);
    color: white;
    border-color: var(--ix-primary);
    box-shadow: var(--ix-shadow-lg);
    transform: scale(1.05);
}

.matching-item.drop-target {
    border-color: var(--ix-primary-light);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.matching-item.hovering {
    background: var(--ix-primary-bg);
    border-color: var(--ix-primary);
    box-shadow: var(--ix-shadow-focus);
    transform: scale(1.03);
}

.matching-line {
    stroke: var(--ix-primary);
    stroke-width: 2;
}

.matching-line.correct {
    stroke: var(--ix-success);
}

.matching-line.incorrect {
    stroke: var(--ix-danger);
}

.matching-dot {
    background: var(--ix-primary);
    border: 2px solid white;
    box-shadow: var(--ix-shadow-sm);
}

/* ========================================
   排列順序 — Ordering
   ======================================== */
.ordering-container {
    padding: 28px 32px 60px;
}

.ordering-source-title,
.ordering-slots-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ix-text-light);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.ordering-chip {
    padding: 12px 16px;
    background: var(--ix-bg-option);
    border-radius: var(--ix-radius-sm);
    box-shadow: var(--ix-shadow-xs);
    border: 1.5px solid transparent;
    font-weight: 500;
    color: var(--ix-text-secondary);
    transition: all 0.22s var(--ix-ease-spring);
}

.ordering-chip:hover {
    box-shadow: var(--ix-shadow-sm);
    border-color: transparent;
    transform: translateY(-1px);
}

.ordering-chip .chip-icon {
    background: #e2e8f0;
    color: var(--ix-text-muted);
    border-radius: 6px;
}

.ordering-chip.locked {
    background: var(--ix-success-bg);
    border-color: rgba(16, 185, 129, 0.2);
}

.ordering-slot {
    border: 2px dashed #d1d5db;
    border-radius: var(--ix-radius-sm);
    transition: all 0.25s var(--ix-ease-spring);
}

.ordering-slot .slot-number {
    background: var(--ix-bg-option);
    color: var(--ix-text-light);
    border-radius: 7px;
    font-weight: 700;
}

.ordering-slot.drag-over {
    border-color: var(--ix-primary);
    background: var(--ix-primary-bg);
    border-style: solid;
    box-shadow: var(--ix-shadow-focus);
}

.ordering-slot.correct {
    border-color: var(--ix-success);
    border-style: solid;
    background: var(--ix-success-bg);
}

.ordering-slot.correct .slot-number {
    background: var(--ix-success);
    color: white;
}

.ordering-slot.incorrect {
    border-color: var(--ix-danger);
    border-style: solid;
    background: var(--ix-danger-bg);
}

.ordering-slot.incorrect .slot-number {
    background: var(--ix-danger);
    color: white;
}

.ordering-ghost {
    background: linear-gradient(135deg, var(--ix-primary), var(--ix-primary-dark));
    border-radius: var(--ix-radius-sm);
    box-shadow: var(--ix-shadow-lg);
}

.ordering-result {
    border-radius: var(--ix-radius-xs);
    box-shadow: var(--ix-shadow-sm);
}

.ordering-result.success {
    background: var(--ix-success-bg);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.ordering-result.error {
    background: var(--ix-danger-bg);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.ordering-source.drag-over-return {
    border-color: var(--ix-primary-light);
    background: var(--ix-primary-bg);
}

/* ========================================
   填空題 — Fill Blank
   ======================================== */
.fill-blank-container {
    padding: 32px 36px;
}

.fill-blank-title {
    font-weight: 700;
    color: var(--ix-text);
}

.fill-blank-content {
    color: var(--ix-text-secondary);
}

.fill-blank-input {
    border: 1.5px dashed #cbd5e1;
    border-radius: 6px;
    background: var(--ix-bg-subtle);
    color: var(--ix-text);
    transition: all var(--ix-transition);
}

.fill-blank-input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--ix-primary);
    background: var(--ix-bg);
    box-shadow: var(--ix-shadow-focus);
}

.fill-blank-input.correct {
    border-color: var(--ix-success);
    border-style: solid;
    background: var(--ix-success-bg);
    color: #065f46;
    box-shadow: var(--ix-shadow-success);
}

.fill-blank-input.incorrect {
    border-color: var(--ix-danger);
    border-style: solid;
    background: var(--ix-danger-bg);
    color: #991b1b;
    box-shadow: var(--ix-shadow-danger);
}

.fill-blank-result.success {
    color: var(--ix-success);
}

.fill-blank-result.error {
    color: var(--ix-danger);
}

/* ========================================
   複製卡片 — Copy Card
   ======================================== */
.copy-card-container {
    padding: 20px 24px;
}

.copy-card-title {
    font-weight: 700;
    color: var(--ix-text-muted);
}

.copy-card-content {
    background: var(--ix-bg-subtle);
    border: none;
    border-radius: var(--ix-radius-sm);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04);
    color: var(--ix-text);
    padding: 16px 18px;
}

.copy-card-btn {
    background: var(--ix-text);
    border-radius: var(--ix-radius-xs);
    font-weight: 600;
    transition: all var(--ix-transition);
    box-shadow: var(--ix-shadow-xs);
}

.copy-card-btn:hover {
    background: #0f172a;
    box-shadow: var(--ix-shadow-sm);
    transform: translateY(-1px);
}

.copy-card-btn.copied {
    background: var(--ix-success);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* ========================================
   圖片標註 — Hotspot
   ======================================== */
.hotspot-container {
    padding: 20px 24px;
}

.hotspot-question {
    font-weight: 700;
    color: var(--ix-text);
}

.hotspot-image-wrap {
    border: 1px solid var(--ix-border);
    border-radius: var(--ix-radius-sm);
    cursor: crosshair;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
}

.hotspot-placeholder {
    color: var(--ix-text-light);
    background: var(--ix-bg-subtle);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 200px;
}

/* ── SVG 標註覆蓋層 ── */
.hs-marker-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.hs-circle-glow {
    fill: none;
    stroke: rgba(59, 130, 246, 0.2);
    stroke-width: 1.5;
    filter: blur(1px);
}

.hs-circle-main {
    fill: rgba(59, 130, 246, 0.12);
    stroke: rgba(59, 130, 246, 0.8);
    stroke-width: 0.5;
    stroke-dasharray: 2 1;
    transition: fill 0.2s, stroke 0.2s;
}

.hs-circle-main.submitted {
    fill: rgba(16, 185, 129, 0.15);
    stroke: rgba(16, 185, 129, 0.8);
    stroke-dasharray: none;
}

.hs-crosshair line {
    stroke: rgba(59, 130, 246, 0.5);
    stroke-width: 0.3;
}

.hs-circle-main.submitted + g.hs-crosshair line {
    stroke: rgba(16, 185, 129, 0.5);
}

/* ── 半徑滑桿 ── */
.hs-radius-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ix-bg-subtle);
    border-radius: var(--ix-radius-sm);
    margin-top: 8px;
}

.hs-radius-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--ix-border);
    border-radius: 2px;
    outline: none;
}

.hs-radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ix-primary);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.15s;
}

.hs-radius-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* ── Canvas 熱點圖 ── */
.hs-heatmap-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: normal;
    opacity: 0.72;
    image-rendering: auto;
    border-radius: inherit;
}

/* ── 人數統計 ── */
.hs-count {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ix-text-secondary);
    background: var(--ix-bg-subtle);
    border-radius: var(--ix-radius-sm);
    margin-top: 8px;
}

/* ── 熱點圖圖例 ── */
.hs-heatmap-legend {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 8px;
    padding: 0 4px;
}

.hs-legend-bar {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #3c3cff, #00d4ff, #00ff6e, #d4ff00, #ff6e00, #ff0000);
    opacity: 0.8;
}

.hs-legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--ix-text-light);
}

.hotspot-result.success {
    color: var(--ix-success);
}

.hotspot-result.error {
    color: var(--ix-danger);
}

/* ── 背景音樂控制 ── */
.bgm-toggle {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--ix-shadow-sm);
}

.bgm-toggle:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* ========================================
   倒數計時器 — 微調
   ======================================== */
.countdown-bg {
    stroke: var(--ix-border);
}

.countdown-progress {
    stroke: var(--ix-primary);
}

.countdown-text {
    color: var(--ix-text);
    font-weight: 800;
}

.countdown-urgent .countdown-progress {
    stroke: var(--ix-warning);
}

.countdown-urgent .countdown-text {
    color: #92400e;
}

.countdown-critical .countdown-progress {
    stroke: var(--ix-danger);
}

.countdown-critical .countdown-text {
    color: var(--ix-danger);
}

/* ========================================
   觀眾模式 + 手機適配
   ======================================== */
.aud-interaction-wrap .editable-element {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
}

.aud-interaction-wrap .matching-container,
.aud-interaction-wrap .fill-blank-container,
.aud-interaction-wrap .ordering-container,
.aud-interaction-wrap .quiz-container,
.aud-interaction-wrap .poll-container {
    position: relative;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {

    /* 通用 */
    .quiz-container,
    .poll-container,
    .truefalse-container,
    .opentext-container,
    .scale-container,
    .buzzer-container,
    .wordcloud-container,
    .hotspot-container,
    .matching-container,
    .fill-blank-container,
    .ordering-container,
    .copy-card-container {
        padding: 16px 14px;
        border-radius: var(--ix-radius-md);
    }

    .interactive-reset-btn {
        font-size: 12px;
        padding: 4px 8px;
    }

    /* 是非題 */
    .tf-question {
        font-size: 16px;
    }

    .tf-btn {
        min-height: 100px;
        border-radius: 16px;
    }

    .tf-icon {
        font-size: 36px;
    }

    .tf-label {
        font-size: 18px;
    }

    .tf-stats,
    .tf-stats-area {
        max-width: 100%;
    }

    /* 開放問答 */
    .opentext-question {
        font-size: 15px;
    }

    .opentext-input,
    .opentext-textarea {
        font-size: 14px;
        min-height: 80px;
    }

    .opentext-submit {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    /* 量表 */
    .scale-question {
        font-size: 15px;
    }

    .scale-value {
        font-size: 24px;
    }

    .scale-slider,
    .scale-range {
        width: 100%;
    }

    .scale-submit {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    /* 搶答 */
    .buzzer-question {
        font-size: 15px;
    }

    .buzzer-input-row {
        max-width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .buzzer-text-input {
        font-size: 14px;
        padding: 12px;
    }

    .buzzer-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
        font-size: 14px;
    }

    /* 文字雲 */
    .wordcloud-question {
        font-size: 15px;
    }

    .wordcloud-input {
        font-size: 14px;
        padding: 10px;
    }

    .wordcloud-submit {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    .wordcloud-body {
        flex-direction: column;
    }

    .wordcloud-multi-input {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    /* 圖片標註 */
    .hotspot-question {
        font-size: 15px;
    }

    .hs-radius-wrap {
        padding: 6px 10px;
    }

    .hs-heatmap-legend {
        margin-top: 6px;
    }

    .hs-submit-btn {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    /* 選擇題 / 投票 */
    .quiz-container,
    .poll-container {
        padding: 16px 14px;
    }

    .quiz-question,
    .poll-question {
        font-size: 15px;
    }

    .quiz-option,
    .poll-option {
        padding: 12px;
        font-size: 14px;
        min-height: 44px;
        touch-action: manipulation;
    }

    .quiz-option .option-marker,
    .poll-option .option-marker {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    /* 連連看 */
    .matching-container {
        padding: 12px;
        flex-direction: column;
        gap: 16px;
    }

    .matching-column {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .matching-item {
        font-size: 13px;
        padding: 8px 10px;
    }

    /* 排序 */
    .ordering-container {
        flex-direction: column;
    }

    .ordering-chip {
        font-size: 13px;
        padding: 8px 10px;
        touch-action: manipulation;
    }

    .ordering-slot {
        font-size: 13px;
        min-height: 40px;
    }

    /* 填空 */
    .fill-blank-container {
        padding: 16px 14px;
    }

    .fill-blank-content {
        font-size: 14px;
    }

    .fill-blank-input {
        font-size: 14px;
        min-width: 50px;
    }

    .fill-blank-check-btn {
        width: 100%;
        padding: 12px;
    }

    /* 通用觸控最佳化 */
    button,
    .quiz-option,
    .poll-option,
    .tf-btn,
    .hs-submit-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* ========================================
   文件檢視器
   ======================================== */
.doc-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.doc-viewer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.doc-viewer-overlay.closing {
    opacity: 0;
}

.doc-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.doc-viewer-panel {
    position: relative;
    width: 680px;
    max-width: 92vw;
    max-height: 85vh;
    background: #fff;
    border-radius: var(--ix-radius);
    box-shadow: var(--ix-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform .3s var(--ix-ease);
}

.doc-viewer-overlay.open .doc-viewer-panel {
    transform: translateY(0);
}

.doc-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ix-border-subtle);
    flex-shrink: 0;
}

.doc-viewer-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.doc-viewer-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ix-text);
}

.doc-viewer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.doc-viewer-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: var(--ix-radius-xs);
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--ix-transition);
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.doc-viewer-download-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.doc-viewer-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--ix-radius-xs);
    background: transparent;
    color: var(--ix-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ix-transition);
}

.doc-viewer-close-btn:hover {
    background: var(--ix-bg-subtle);
    color: var(--ix-text);
}

.doc-viewer-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px 40px;
}

/* ── 文件內容排版 ── */
.doc-viewer-content {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--ix-text);
    word-break: break-word;
}

.doc-viewer-content h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--ix-text);
    border-bottom: 2px solid var(--ix-border);
    padding-bottom: 10px;
}

.doc-viewer-content h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 28px 0 12px;
    color: var(--ix-text);
}

.doc-viewer-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 20px 0 8px;
    color: var(--ix-text);
}

.doc-viewer-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 16px 0 6px;
    color: var(--ix-text-secondary);
}

.doc-viewer-content p {
    margin: 0 0 12px;
}

.doc-viewer-content ul,
.doc-viewer-content ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.doc-viewer-content li {
    margin: 4px 0;
}

.doc-viewer-content blockquote {
    margin: 12px 0;
    padding: 12px 16px;
    border-left: 4px solid #0ea5e9;
    background: #f0f9ff;
    border-radius: 0 var(--ix-radius-xs) var(--ix-radius-xs) 0;
    color: #0c4a6e;
}

.doc-viewer-content code {
    background: var(--ix-bg-subtle);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.85em;
    color: #e11d48;
}

.doc-viewer-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 16px 20px;
    border-radius: var(--ix-radius-sm);
    overflow-x: auto;
    margin: 12px 0;
}

.doc-viewer-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.doc-viewer-content img {
    max-width: 100%;
    border-radius: var(--ix-radius-xs);
    margin: 8px 0;
}

.doc-viewer-content a {
    color: #0284c7;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.doc-viewer-content hr {
    border: none;
    border-top: 1px solid var(--ix-border);
    margin: 20px 0;
}

.doc-viewer-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.doc-viewer-content th,
.doc-viewer-content td {
    padding: 8px 12px;
    border: 1px solid var(--ix-border);
    text-align: left;
}

.doc-viewer-content th {
    background: var(--ix-bg-subtle);
    font-weight: 600;
}

/* ── Card hover effect ── */
.document-card-container:hover {
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.15);
}

@media (max-width: 640px) {
    .doc-viewer-panel {
        max-width: 98vw;
        max-height: 92vh;
        border-radius: var(--ix-radius-md);
    }

    .doc-viewer-body {
        padding: 20px 16px 32px;
    }

    .doc-viewer-content h1 {
        font-size: 1.3rem;
    }

    .doc-viewer-content h2 {
        font-size: 1.1rem;
    }
}