body { font-family: 'Noto Sans TC', sans-serif; }
.hidden { display: none; }
.toggle-icon { transition: transform 0.2s; }
.collapsed .toggle-icon { transform: rotate(-90deg); }

/* ▼▼▼ 變更開始: 新增登入分頁按鈕樣式 ▼▼▼ */
.login-tab-button {
    transition: all 0.2s ease-in-out;
}

.login-tab-button.active {
    color: #4f46e5; /* Tailwind indigo-600 */
    border-bottom: 2px solid #6366f1; /* Tailwind indigo-500 */
}

.login-tab-button:not(.active) {
    color: #6b7280; /* Tailwind gray-500 */
    border-bottom: 2px solid transparent;
}
/* ▲▲▲ 變更結束 ▲▲▲ */

#printable-area { display: none; }

/* 測驗進行中選項的樣式 */
.quiz-option.selected {
    border-color: #4f46e5; /* indigo-600 */
    background-color: #eef2ff; /* indigo-50 */
    color: #312e81; /* indigo-900 */
    font-weight: 600;
}

.quiz-option.correct {
    border-color: #16a34a; /* green-600 */
    background-color: #f0fdf4; /* green-50 */
}

.quiz-option.incorrect {
    border-color: #e11d48; /* rose-600 */
    background-color: #fff1f2; /* rose-50 */
}

/* ▼▼▼ 變更開始: 調整填充題輸入框寬度 ▼▼▼ */
.fill-in-blank-input {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    margin: 0 4px;
    display: inline-block;
    width: 150px; /* 稍微縮小寬度以適應更多情況 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.75rem;
    vertical-align: baseline; /* 確保與文字對齊 */
}
/* ▲▲▲ 變更結束 ▲▲▲ */

.fill-in-blank-input.correct {
    border-color: #16a34a;
    background-color: #f0fdf4;
}
.fill-in-blank-input.incorrect {
    border-color: #dc2626;
    background-color: #fef2f2;
}

/* 閃爍動畫效果 */
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.flash-animation {
    animation: flash 1.5s infinite;
}

/* ▼▼▼ 階段二 (跑馬燈) 修改開始 ▼▼▼ */
/* 將動畫應用到新的 ID 上 */
#header-marquee-text {
    display: inline-block;
    padding-left: 100%; /* 讓文字從右側開始 */
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
/* ▲▲▲ 階段二 (跑馬燈) 修改結束 ▲▲▲ */

/* ▼▼▼ 新增：防弊樣式 (禁止選取) ▼▼▼ */
.no-select {
    user-select: none; /* 標準語法 */
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
}
/* ▲▲▲ 新增結束 ▲▲▲ */

@media print {
    body * { visibility: hidden; }
    .no-print { display: none; }
    #printable-area, #printable-area * { visibility: visible; }
    #printable-area {
        display: block; position: absolute; left: 0; top: 0; width: 100%;
        font-family: 'Noto Sans TC', sans-serif;
    }
    @page { size: A4 landscape; margin: 1cm; }
    #printable-area h1 { font-size: 18pt; font-weight: bold; text-align: center; margin: 0 0 0.5rem 0; }
    #printable-area h2 { font-size: 14pt; text-align: center; margin: 0 0 1rem 0; font-weight: normal; }
    #printable-area .stats-summary { text-align: center; font-size: 10pt; margin-bottom: 1rem; padding: 0.5rem; border: 1px solid #ccc; background-color: #f8f8f8; border-radius: 8px; }
    #printable-area .stats-summary p { margin: 0.25rem 0; line-height: 1.5; }
    #printable-area .stats-summary .start-date-info { font-size: 8pt; color: #555; margin-bottom: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px dotted #ccc; }
    #printable-area table { width: 100%; border-collapse: collapse; font-size: 11pt; }
    #printable-area th, #printable-area td { border: 1px solid #333; padding: 4px 5px; text-align: center; vertical-align: top; line-height: 1.4; }
    #printable-area td { text-align: left; height: 1px; }
    #printable-area .time-cell { font-weight: 600; white-space: nowrap; }
    #printable-area .course-item { margin-bottom: 5px; }
    #printable-area .course-item:last-child { margin-bottom: 0; }
    #printable-area .course-subject { font-weight: bold; }
    #printable-area .uncompleted-warning { font-size: 9pt; font-weight: bold; color: #D32F2F; margin-top: 3px; }
    #printable-area .uncorrected-warning { font-size: 9pt; font-weight: bold; color: #E65100; margin-top: 3px; }
    #printable-area .course-notes { font-size: 9pt; color: #333; margin-top: 2px; }
    #printable-area .grade-history { font-size: 9pt; color: #00008B; margin-top: 3px; padding-left: 8px; border-left: 1px solid #ccc; }
    #printable-area .teacher-note { font-size: 9pt; color: #c026d3; margin-top: 3px; padding: 2px 4px; background-color: #f5f3ff; border-left: 2px solid #c026d3; }
    #printable-area .no-course { color: #aaa; font-size: 10pt; text-align: center; }
}

/* 舊版 PDF.js 檢視器樣式 (保留以確保無遺漏) */
.pdf-viewer-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #525659;
    border-radius: 0.5rem;
    overflow: hidden;
}

.pdf-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem;
    background: #323639;
    color: white;
    flex-shrink: 0;
}

.pdf-viewer-toolbar button {
    background-color: #4f5255;
    color: white;
    border: 1px solid #666;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.pdf-viewer-toolbar button:hover:not(:disabled) {
    background-color: #6b7280;
}

.pdf-viewer-toolbar button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pdf-viewer-body {
    flex-grow: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    padding: 1rem 0;
}

.pdf-viewer-body.rendering {
    cursor: wait;
}

#pdf-canvas {
    direction: ltr;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#pdf-fullscreen-btn {
    z-index: 10; 
    border: none;
    cursor: pointer;
}

#pdf-fullscreen-btn svg {
    color: white;
}

/* --- ▼▼▼ 題庫樹狀結構樣式 ▼▼▼ --- */
.toggle-icon {
    transition: transform 0.2s;
}

.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.toggle-icon.rotate-\[-90deg\] {
    transform: rotate(-90deg);
}

.directory-toggle { cursor: pointer; }
.qbank-tree-item { cursor: pointer; }
.qbank-tree-item:hover { background-color: #DBEAFE; }
.directory-item, .qbank-item { box-sizing: border-box; }
.qbank-directory-toggle { cursor: pointer; }
.qbank-directory-toggle.is-collapsed .toggle-icon { transform: rotate(-90deg); }
/* --- ▲▲▲ 題庫樹狀結構樣式 ▲▲▲ --- */


/* --- ▼▼▼ 觀念幣與轉盤樣式 (第四階段新增與優化) ▼▼▼ --- */

/* 轉盤 Canvas 樣式 */
#wheel-canvas {
    /* 預設轉場效果，JS 控制時會動態修改 */
    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 6px solid #ffffff;
    background-color: #fff;
    box-sizing: border-box;
}

/* 觀念幣餘額顯示優化 */
#coin-balance-display, #modal-current-balance {
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 0.5px;
    /* 數字字體稍微調大 */
}

/* 定義正負值顏色 (供未來 JS 動態添加 class 使用，或作為設計規範) */
.balance-positive {
    color: #16a34a; /* green-600 */
    font-weight: bold;
}

.balance-negative {
    color: #dc2626; /* red-600 */
    font-weight: bold;
}

/* 觀念幣 Icon 微動畫 (滑鼠懸停時) */
#student-rewards-display:hover span:first-child,
.lg\:col-span-2 h3 span:first-child { /* 針對標題中的 Icon */
    display: inline-block;
    animation: coin-bounce 1s infinite;
}

@keyframes coin-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* [優化] 通用自訂滾動條樣式 (應用於 #transaction-history-list 和 .custom-scrollbar) */
#transaction-history-list, .custom-scrollbar {
    /* 自訂滾動條樣式 (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f1f1;
}

#transaction-history-list::-webkit-scrollbar, .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

#transaction-history-list::-webkit-scrollbar-track, .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#transaction-history-list::-webkit-scrollbar-thumb, .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 3px;
}

#transaction-history-list::-webkit-scrollbar-thumb:hover, .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* 歷史紀錄項目懸停效果 (包含 admin 和 student 兩邊的列表) */
#transaction-history-list li, 
.custom-scrollbar > div {
    transition: background-color 0.2s, transform 0.1s;
}

#transaction-history-list li:hover,
.custom-scrollbar > div:hover {
    background-color: #f8fafc; /* slate-50 */
    transform: translateX(2px); /* 輕微右移增加互動感 */
}

/* --- ▲▲▲ 觀念幣與轉盤樣式 (第四階段新增) ▲▲▲ --- */