/* 全站統一：溫暖童趣手繪繪本風格圓潤字體 (Zen Maru Gothic + Rounded M Plus) */
body,
body *:not(i):not([class*="fa-"]):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands),
input, select, textarea, button {
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Nunito', 'Quicksand', 'Noto Sans TC', system-ui, -apple-system, sans-serif !important;
}

/* 確保 Font Awesome 向量圖標字體優先級最高，杜絕圖示顯示為多條橫線 (Missing Glyph) */
i.fa-solid, i.fas, .fa-solid, .fas,
i.fa-regular, i.far, .fa-regular, .far,
i.fa-brands, i.fab, .fa-brands, .fab,
[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    line-height: 1;
}
i.fa-solid, i.fas, .fa-solid, .fas {
    font-weight: 900 !important;
}
i.fa-regular, i.far, .fa-regular, .far {
    font-weight: 400 !important;
}

/* 首頁捲動極速流暢優化 (Scroll Performance Boost) */
.feature-card-optimized {
    will-change: auto;
    transform: translateZ(0);
}
.hardware-accelerated {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

@keyframes bounceBlinkArrow {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(7px);
        opacity: 0.65;
    }
}
.animate-blink-arrow {
    animation: bounceBlinkArrow 1.3s ease-in-out infinite;
}

/* ==========================================================================
   精緻有機雙主色系 (Refined Dual-Accent Palette)
   參考 crimson-wind & Color Hunt 頂級現代教學配色：
   1. 畫布底色：溫潤亞麻燕麥 (Oat Linen #F4EFEA)
   2. 深色字體：濃郁黑咖啡濃墨 (Deep Espresso Ink #261C18，深邃高對比)
   3. 暖色主調：琥珀焦糖赤陶 (Caramel Sienna #C77A38，溫暖生動)
   4. 冷色副調：沉靜森林玉石翡翠 (Forest Jade Teal #2A7369，清新穩定)
   5. 卡片質感：微磨砂純白立體琉璃 (Luminous Frosted Glass #FFFFFF)
   嚴格收斂色系（不超過 4 種主要色彩家族），徹底告別泛黃與單調
   ========================================================================== */

:root {
    --cm-bg: #F4EFEA;
    --cm-surface: rgba(255, 255, 255, 0.94);
    --cm-surface-soft: rgba(255, 255, 255, 0.78);
    --cm-surface-strong: #FFFFFF;
    --cm-border: rgba(94, 78, 71, 0.13);
    --cm-border-strong: rgba(94, 78, 71, 0.24);
    --cm-ink: #261C18;
    --cm-ink-secondary: #5C4B44;
    --cm-muted: #8A776F;
    --cm-faint: #B5A69F;
    --cm-accent-warm: #C77A38;
    --cm-accent-warm-hover: #B26829;
    --cm-accent-warm-light: #FBF0E6;
    --cm-accent-teal: #2A7369;
    --cm-accent-teal-hover: #1F5C54;
    --cm-accent-teal-light: #E8F3F1;
    --cm-accent-indigo: #4338CA;
    --cm-shadow: 0 16px 44px -6px rgba(65, 45, 30, 0.08), 0 4px 16px -2px rgba(65, 45, 30, 0.04);
    --cm-shadow-soft: 0 10px 30px -4px rgba(65, 45, 30, 0.06), 0 2px 8px -1px rgba(65, 45, 30, 0.03);
    --cm-shadow-pop: 0 22px 55px -8px rgba(65, 45, 30, 0.14), 0 8px 24px -3px rgba(65, 45, 30, 0.06);
}

html { scroll-behavior: smooth; }
body {
    padding-bottom: 0;
    background-color: var(--cm-bg);
    background-image: 
        radial-gradient(circle at 10% 12%, rgba(199, 122, 56, 0.09) 0%, transparent 48%),
        radial-gradient(circle at 90% 10%, rgba(42, 115, 105, 0.09) 0%, transparent 46%),
        radial-gradient(circle at 50% 88%, rgba(67, 56, 202, 0.05) 0%, transparent 55%),
        linear-gradient(180deg, #F6F2EC 0%, #F3EDE6 100%);
    min-height: 100vh;
    position: relative;
    color: var(--cm-ink);
}

/* 當工作台固定底部狀態列存在時才保留下邊距 */
body:has(#global-system-footer:not(.hidden)) {
    padding-bottom: 40px;
}

/* 首頁頁尾貼齊網站最底部 (零空隙) */
#portal-page {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#portal-footer {
    margin-bottom: 0 !important;
    width: 100%;
}

/* 當完整常見問題與教學實務指南開啟時，強制隱藏頁尾 */
body:has(#portal-all-faq-modal:not(.hidden)) #portal-footer,
body:has(#portal-all-faq-modal:not(.hidden)) #global-system-footer,
body.portal-all-faq-open #portal-footer,
body.portal-all-faq-open #global-system-footer {
    display: none !important;
}

/* ==========================================================================
   首頁懸浮導覽列常態顯示與彈窗連動隱藏 (Homepage Persistent Sticky/Fixed Navbar)
   在首頁滑動瀏覽時常態顯示；除非開啟彈窗時隱藏
   ========================================================================== */
#portal-header {
    position: fixed;
    top: 0.75rem;
    left: 0;
    right: 0;
    z-index: 45;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}

#portal-header > div {
    pointer-events: auto;
}

/* 除非開啟彈窗，否則頂部導覽列常態顯示：當彈窗開啟時自動淡出隱藏 */
html.modal-open #portal-header,
body.modal-open #portal-header,
html:has(.modal:not(.hidden)) #portal-header,
body:has(.modal:not(.hidden)) #portal-header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-20px) !important;
}

/* ==========================================================================
   全網站彈窗背景防滾動與滾動隔離 (Universal Modal Scroll-Lock & Containment)
   在滑動彈窗內容時，底下的背景頁面內容絕不可以被滑動
   ========================================================================== */
html:has(.modal:not(.hidden)),
body:has(.modal:not(.hidden)),
html:has(#portal-all-faq-modal:not(.hidden)),
body:has(#portal-all-faq-modal:not(.hidden)),
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* 所有彈窗遮罩與對話框，徹底鎖定滾動邊界，防止滾動連鎖傳播至底層背景 */
.modal,
#portal-all-faq-modal,
.modal-content,
.confirm-modal-content,
#portal-all-faq-cards {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

.page-section {
    animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.chalk-text {
    text-shadow: 0 0 2px rgba(255,255,255,0.25), 0 1px 1px rgba(0,0,0,0.2);
    font-weight: 500;
}

@keyframes shimmer { 100% { transform: translateX(100%); } }
.hover-shimmer:hover .shimmer-bar {
    animation: shimmer 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(94, 78, 71, 0.22); border-radius: 9999px; transition: background 0.3s ease; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--cm-accent-warm); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

::selection { background: rgba(199, 122, 56, 0.25); color: var(--cm-ink); }

/* 現代精緻液態琉璃質感卡片 (Refined Frosted Glass Cards) */
.glass-card {
    background: var(--cm-surface);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--cm-border);
    box-shadow: var(--cm-shadow-soft);
    transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.24s ease, border-color 0.24s ease;
}
.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cm-shadow);
    border-color: rgba(199, 122, 56, 0.32);
}

/* 雙主色系精緻膠囊徽章與按鈕輔助類別 (Refined Dual-Accent Badges & Buttons) */
.badge-warm {
    background-color: var(--cm-accent-warm-light);
    color: #A35C24;
    border: 1px solid rgba(199, 122, 56, 0.28);
}
.badge-teal {
    background-color: var(--cm-accent-teal-light);
    color: #1F5C54;
    border: 1px solid rgba(42, 115, 105, 0.28);
}
.badge-indigo {
    background-color: #EEF2FF;
    color: #3730A3;
    border: 1px solid rgba(67, 56, 202, 0.25);
}

.btn-warm-primary {
    background: linear-gradient(135deg, #C77A38 0%, #B86726 100%);
    color: #FFFFFF;
    box-shadow: 0 6px 20px -2px rgba(199, 122, 56, 0.32);
    transition: all 0.2s ease;
}
.btn-warm-primary:hover {
    background: linear-gradient(135deg, #D48440 0%, #C4702D 100%);
    box-shadow: 0 8px 24px -2px rgba(199, 122, 56, 0.42);
    transform: translateY(-1px);
}
.btn-warm-primary:active {
    transform: translateY(0);
}

.btn-teal-primary {
    background: linear-gradient(135deg, #2A7369 0%, #1F5C54 100%);
    color: #FFFFFF;
    box-shadow: 0 6px 20px -2px rgba(42, 115, 105, 0.32);
    transition: all 0.2s ease;
}
.btn-teal-primary:hover {
    background: linear-gradient(135deg, #328377 0%, #256960 100%);
    box-shadow: 0 8px 24px -2px rgba(42, 115, 105, 0.42);
    transform: translateY(-1px);
}
.btn-teal-primary:active {
    transform: translateY(0);
}

/* Dark Mode Overrides */
html.dark body { background-color: #0f172a; color: #f8fafc; }
html.dark .glass-card { background: rgba(30, 41, 59, 0.9); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
html.dark .glass-card:hover { background: rgba(30, 41, 59, 0.95); border-color: rgba(255, 255, 255, 0.15); }
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: #0f172a !important; }
html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700, html.dark .text-slate-600 { color: #f1f5f9 !important; }
html.dark .text-slate-500, html.dark .text-slate-400 { color: #cbd5e1 !important; }
html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark input, html.dark select, html.dark textarea { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
html.dark .modal-content, html.dark .confirm-modal-content { background-color: #1e293b !important; border-color: #334155 !important; }

.student-btn {
    contain: layout paint;
    transform: translateZ(0);
    will-change: transform;
}

#student-grid {
    contain: layout;
}

.btn-glow {
    position: relative;
}
.btn-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: inherit;
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: -1;
    border-radius: inherit;
}
.btn-glow:hover::after {
    opacity: 0.5;
}

.animated-gradient-text {
    background-size: 200% auto;
    animation: textGradient 6s linear infinite;
}
@keyframes textGradient {
    to { background-position: 200% center; }
}

/* Floating background elements (lightweight) */
.bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(40px);
    z-index: -1;
    opacity: 0.25;
    transform: translateZ(0);
}
.bg-orb-1 { width: 350px; height: 350px; top: -50px; left: -50px; background: rgba(217, 119, 6, 0.08); }
.bg-orb-2 { width: 400px; height: 400px; top: 40%; right: -100px; background: rgba(234, 88, 12, 0.06); }
.bg-orb-3 { width: 300px; height: 300px; bottom: -30px; left: 20%; background: rgba(245, 158, 11, 0.07); }

.admin-viewing .hide-on-admin-view { display: none !important; pointer-events: none; }
.admin-viewing .disable-on-admin-view { pointer-events: none !important; opacity: 0.7; }

/* 手機與各尺寸螢幕深度相容性優化 (Mobile & Responsive Adaptations) */
@media (max-width: 640px) {
    /* 確保彈窗在窄螢幕手機上左右預留安全間隙，不被切邊 */
    .modal-content, .confirm-modal-content {
        max-width: calc(100vw - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 確保功能按鈕橫向捲動列在 iOS / Android 上具備原生動量滑動 */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* 學生號碼方塊在手機上維持 44px 以上舒適觸控區 */
    .student-btn {
        min-height: 48px;
        min-width: 44px;
    }

    /* 確保 QR 相機掃描視窗在手機螢幕完全置中且不變形 */
    #qr-scanner-viewport video {
        object-fit: cover !important;
        border-radius: 1rem !important;
    }
}

/* 雙螢幕模式自適應排版：聯絡簿佔右側 1/3，左側作業卡片流暢對齊不擠壓 */
#homework-list.dual-screen-active {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 640px) {
    #homework-list.dual-screen-active {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1700px) {
    #homework-list.dual-screen-active {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
/* 點收模式專屬 FontAwesome Pro Duotone 向量圖標渲染支援 */
.fa-hand-back-point-up, [class*="fa-hand-back-point-up"] {
    display: inline-block;
    width: 0.88em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill-opacity='0.45' d='M48 344l0 19.5c0 41.2 22.6 79.1 58.9 98.6l8.3 4.5c16.3 8.8 34.6 13.4 53.1 13.4L304 480c44.2 0 80-35.8 80-80l0-8 0-88c0-17.7-14.3-32-32-32c-4.2 0-8.2 .8-11.8 2.2c-4.2 1.7-9 1.5-13.1-.6s-7.1-5.7-8.3-10.1C315.2 250 302.7 240 288 240c-6.1 0-11.7 1.7-16.6 4.6c-4.5 2.7-10 3.1-14.8 .9s-8.2-6.5-9.2-11.6C244.6 219.2 231.6 208 216 208c-11.1 0-20.9 5.7-26.7 14.3c-3.9 5.9-11.2 8.5-18 6.5s-11.4-8.3-11.4-15.3L160 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 208 0 1.7 0 78.3c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48-12.8 9.6C55.1 314.7 48 328.9 48 344z'/%3E%3Cpath d='M136 0C105.1 0 80 25.1 80 56l0 200.6c-3.2 2-6.4 4.2-9.5 6.5L48 280c-20.1 15.1-32 38.8-32 64l0 19.5c0 53 29.1 101.7 75.7 126.8l8.3 4.5c21 11.3 44.4 17.2 68.3 17.2L304 512c61.9 0 112-50.1 112-112l0-8 0-88c0-35.3-28.7-64-64-64c-2.8 0-5.6 .2-8.3 .5c-11-19.4-31.8-32.5-55.7-32.5c-5.3 0-10.5 .7-15.5 1.9c-10.8-20.2-32-33.9-56.5-33.9c-8.5 0-16.6 1.7-24 4.7L192 56c0-30.9-25.1-56-56-56zM112 56c0-13.3 10.7-24 24-24s24 10.7 24 24l0 157.5c0 7.1 4.6 13.3 11.4 15.3s14-.6 18-6.5c5.8-8.7 15.6-14.3 26.7-14.3c15.6 0 28.6 11.2 31.4 25.9c1 5.1 4.4 9.5 9.2 11.6s10.3 1.8 14.8-.9c4.8-2.9 10.5-4.6 16.6-4.6c14.7 0 27.2 10 30.9 23.6c1.2 4.4 4.2 8.1 8.3 10.1s8.8 2.2 13.1 .6c3.6-1.4 7.6-2.2 11.8-2.2c17.7 0 32 14.3 32 32l0 88 0 8c0 44.2-35.8 80-80 80l-135.7 0c-18.5 0-36.8-4.6-53.1-13.4l-7.6 14.1 7.6-14.1-8.3-4.5C70.6 442.6 48 404.7 48 363.5L48 344c0-15.1 7.1-29.3 19.2-38.4L80 296l0 48c0 8.8 7.2 16 16 16s16-7.2 16-16l0-78.3 0-1.7 0-208z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill-opacity='0.45' d='M48 344l0 19.5c0 41.2 22.6 79.1 58.9 98.6l8.3 4.5c16.3 8.8 34.6 13.4 53.1 13.4L304 480c44.2 0 80-35.8 80-80l0-8 0-88c0-17.7-14.3-32-32-32c-4.2 0-8.2 .8-11.8 2.2c-4.2 1.7-9 1.5-13.1-.6s-7.1-5.7-8.3-10.1C315.2 250 302.7 240 288 240c-6.1 0-11.7 1.7-16.6 4.6c-4.5 2.7-10 3.1-14.8 .9s-8.2-6.5-9.2-11.6C244.6 219.2 231.6 208 216 208c-11.1 0-20.9 5.7-26.7 14.3c-3.9 5.9-11.2 8.5-18 6.5s-11.4-8.3-11.4-15.3L160 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 208 0 1.7 0 78.3c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48-12.8 9.6C55.1 314.7 48 328.9 48 344z'/%3E%3Cpath d='M136 0C105.1 0 80 25.1 80 56l0 200.6c-3.2 2-6.4 4.2-9.5 6.5L48 280c-20.1 15.1-32 38.8-32 64l0 19.5c0 53 29.1 101.7 75.7 126.8l8.3 4.5c21 11.3 44.4 17.2 68.3 17.2L304 512c61.9 0 112-50.1 112-112l0-8 0-88c0-35.3-28.7-64-64-64c-2.8 0-5.6 .2-8.3 .5c-11-19.4-31.8-32.5-55.7-32.5c-5.3 0-10.5 .7-15.5 1.9c-10.8-20.2-32-33.9-56.5-33.9c-8.5 0-16.6 1.7-24 4.7L192 56c0-30.9-25.1-56-56-56zM112 56c0-13.3 10.7-24 24-24s24 10.7 24 24l0 157.5c0 7.1 4.6 13.3 11.4 15.3s14-.6 18-6.5c5.8-8.7 15.6-14.3 26.7-14.3c15.6 0 28.6 11.2 31.4 25.9c1 5.1 4.4 9.5 9.2 11.6s10.3 1.8 14.8-.9c4.8-2.9 10.5-4.6 16.6-4.6c14.7 0 27.2 10 30.9 23.6c1.2 4.4 4.2 8.1 8.3 10.1s8.8 2.2 13.1 .6c3.6-1.4 7.6-2.2 11.8-2.2c17.7 0 32 14.3 32 32l0 88 0 8c0 44.2-35.8 80-80 80l-135.7 0c-18.5 0-36.8-4.6-53.1-13.4l-7.6 14.1 7.6-14.1-8.3-4.5C70.6 442.6 48 404.7 48 363.5L48 344c0-15.1 7.1-29.3 19.2-38.4L80 296l0 48c0 8.8 7.2 16 16 16s16-7.2 16-16l0-78.3 0-1.7 0-208z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.fa-scanner-gun, [class*="fa-scanner-gun"] {
    display: inline-block;
    width: 1.125em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill-opacity='0.45' d='M48 144c0 35.3 28.7 64 64 64l121 0 55 0 16 0 0-128L112 80c-35.3 0-64 28.7-64 64zM64.3 382.1L118 413.7 206.2 256l-73.6 0L64.3 382.1z'/%3E%3Cpath d='M576 32L416 32l0 48 160 0 0-48zM118 413.7L64.3 382.1 132.6 256l73.6 0L118 413.7zM261.2 256l42.8 0 48 0 0-48 0-128 0-48-48 0L112 32C50.1 32 0 82.1 0 144c0 50.9 34 93.9 80.4 107.5L0 400l94.6 55.7L136 480l23.4-41.9L261.2 256zM416 192l0 48 160 0 0-48-160 0zM576 432l-160 0 0 48 160 0 0-48zM416 128l0 32 160 0 0-32-160 0zM576 288l-160 0 0 32 160 0 0-32zM416 352l0 32 160 0 0-32-160 0zM112 80l192 0 0 128-16 0-55 0-121 0c-35.3 0-64-28.7-64-64s28.7-64 64-64z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill-opacity='0.45' d='M48 144c0 35.3 28.7 64 64 64l121 0 55 0 16 0 0-128L112 80c-35.3 0-64 28.7-64 64zM64.3 382.1L118 413.7 206.2 256l-73.6 0L64.3 382.1z'/%3E%3Cpath d='M576 32L416 32l0 48 160 0 0-48zM118 413.7L64.3 382.1 132.6 256l73.6 0L118 413.7zM261.2 256l42.8 0 48 0 0-48 0-128 0-48-48 0L112 32C50.1 32 0 82.1 0 144c0 50.9 34 93.9 80.4 107.5L0 400l94.6 55.7L136 480l23.4-41.9L261.2 256zM416 192l0 48 160 0 0-48-160 0zM576 432l-160 0 0 48 160 0 0-48zM416 128l0 32 160 0 0-32-160 0zM576 288l-160 0 0 32 160 0 0-32zM416 352l0 32 160 0 0-32-160 0zM112 80l192 0 0 128-16 0-55 0-121 0c-35.3 0-64-28.7-64-64s28.7-64 64-64z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ============================================================== */
/* 專業列印樣式 (Classroom Print Engine) - 單頁完美呈現，不跨頁      */
/* ============================================================== */
@media print {
    @page {
        size: A4 portrait;
        margin: 8mm;
    }

    /* 隱藏所有互動元件、浮動按鈕、導覽抽屜、背後插圖與背景光效 */
    header,
    footer,
    nav,
    #global-nav-burger-btn,
    #global-nav-drawer,
    #mobile-bottom-bar,
    #mobile-more-sheet,
    #admin-view-banner,
    .storybook-banner-card,
    .modal,
    button,
    .btn-adjust-point,
    .nav-buttons,
    #sync-banner,
    .sound-toggle-btn,
    #portal-nav-bar,
    #main-page-top-bar,
    .toast,
    /* 課堂工坊中無需列印的控制列與側邊欄 */
    #studio-tab-btn-seating,
    #studio-tab-btn-groups,
    #studio-export-png-btn,
    #studio-print-seats-btn,
    #studio-podium-toggle-btn,
    #studio-view-seating > div:first-child, /* 頂部排位動作按鈕列（依座號安排、隨機安排等） */
    #classroom-studio-page .lg\:col-span-4, /* 右側待安排/教室配置欄 */
    #classroom-studio-page .xl\:col-span-3,
    #studio-unassigned-section,
    #studio-unassigned-list,
    #studio-view-groups > div:first-child, /* 分組團隊競賽頂部說明卡片（避免佔用空間導致跨頁） */
    .studio-edit-group-btn,
    .studio-add-member-btn,
    .studio-remove-group-member-btn,
    .group-score-btn {
        display: none !important;
    }

    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 確保所有頁面層級容器自適應展開 */
    #app, main, #main-content, #classroom-studio-page {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    /* 座位表左側畫布鋪滿全寬 */
    #classroom-studio-page .lg\:col-span-8,
    #classroom-studio-page .xl\:col-span-9 {
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* 座位網格容器：單頁防跨頁 */
    #studio-seats-grid-wrapper {
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #studio-seats-grid {
        width: 100% !important;
        min-width: 0 !important;
        gap: 6px !important;
        border: 2px solid #000 !important;
        background: #fff !important;
        box-shadow: none !important;
        padding: 6px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #studio-seats-grid > div {
        border: 1.5px solid #222 !important;
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
        min-height: 56px !important;
        max-height: 80px !important;
        padding: 4px 6px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* 講台指示黑白高對比列印 */
    #studio-podium-top, #studio-podium-bottom {
        display: flex !important;
        justify-content: center !important;
        margin: 4px auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #studio-podium-top > div, #studio-podium-bottom > div {
        border: 2px solid #000 !important;
        background: #24483B !important;
        color: #fff !important;
        font-weight: 900 !important;
        padding: 4px 28px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 分組團隊競賽單頁列印優化 (解決使用者回報之跨頁問題) */
    #studio-view-groups {
        display: block !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #studio-groups-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #studio-groups-container > div {
        border: 1.5px solid #000 !important;
        background: #fff !important;
        box-shadow: none !important;
        padding: 6px 10px !important;
        border-radius: 12px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* 隱藏所有帶有 hidden 標記的區塊 */
    .hidden, .page-section.hidden, #contact-book-page.hidden, #classroom-studio-page.hidden {
        display: none !important;
    }

    /* 列印聯絡簿黑板內容 (僅限未隱藏之當前頁面) */
    #contact-book-page:not(.hidden) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    #contact-book-board-container {
        border: 2px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* ============================================================== */
    /* 座位表專屬紙本單頁 A4 列印模式 (body.printing-seating-chart)      */
    /* ============================================================== */
    body.printing-seating-chart {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.printing-seating-chart * {
        visibility: hidden !important;
    }
    body.printing-seating-chart #classroom-studio-page,
    body.printing-seating-chart #classroom-studio-page * {
        visibility: visible !important;
    }
    body.printing-seating-chart,
    html:has(body.printing-seating-chart) {
        height: auto !important;
        min-height: 0 !important;
    }
    body.printing-seating-chart #classroom-studio-page {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        background: #fff !important;
        z-index: 9999999 !important;
    }
    body.printing-seating-chart .studio-print-header {
        display: block !important;
        visibility: visible !important;
        margin: 0 0 3mm 0 !important;
        text-align: center !important;
    }
    body.printing-seating-chart .studio-print-header h2 {
        font-size: 16pt !important;
        font-weight: 900 !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.printing-seating-chart #classroom-studio-page > .storybook-banner-card,
    body.printing-seating-chart #classroom-studio-page > div.p-3,
    body.printing-seating-chart #classroom-studio-page > div.p-4,
    body.printing-seating-chart #studio-podium-toggle-btn,
    body.printing-seating-chart #studio-disable-seat-mode-banner,
    body.printing-seating-chart #studio-seat-shortage-alert,
    body.printing-seating-chart #studio-view-seating > div:first-child,
    body.printing-seating-chart #classroom-studio-page .lg\:col-span-4,
    body.printing-seating-chart #classroom-studio-page .xl\:col-span-3,
    body.printing-seating-chart #studio-unassigned-section,
    body.printing-seating-chart #studio-view-groups {
        display: none !important;
    }
    body.printing-seating-chart #studio-view-seating,
    body.printing-seating-chart #studio-view-seating .lg\:col-span-8,
    body.printing-seating-chart #studio-view-seating .xl\:col-span-9 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
    }
    body.printing-seating-chart #studio-view-seating > .grid {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    body.printing-seating-chart #studio-seats-grid-wrapper {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.printing-seating-chart #studio-seats-grid {
        width: 100% !important;
        min-width: 0 !important;
        gap: 2.5mm !important;
        border: 1.5px solid #000 !important;
        background: #fff !important;
        box-shadow: none !important;
        padding: 2mm !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    body.printing-seating-chart #studio-seats-grid > div {
        border: 1px solid #333 !important;
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 2mm 1.5mm !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    body.printing-seating-chart #studio-seats-grid > div strong {
        font-size: 13pt !important;
        line-height: 1.1 !important;
    }
    body.printing-seating-chart #studio-seats-grid > div span {
        font-size: 9pt !important;
        line-height: 1.1 !important;
    }
    body.printing-seating-chart #studio-podium-top,
    body.printing-seating-chart #studio-podium-bottom {
        margin: 2mm auto !important;
    }
    body.printing-seating-chart #studio-podium-top > div,
    body.printing-seating-chart #studio-podium-bottom > div {
        padding: 1.5mm 20mm !important;
        font-size: 11pt !important;
    }

    /* ============================================================== */
    /* A4 學生端與家長端專屬連結裁切通知單 (2欄 × 5列，每頁 10 名學生)  */
    /* ============================================================== */
    body.printing-portal-cards {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.printing-portal-cards * {
        visibility: hidden !important;
    }
    body.printing-portal-cards #print-portal-cards-area,
    body.printing-portal-cards #print-portal-cards-area * {
        visibility: visible !important;
    }
    body.printing-portal-cards #print-portal-cards-area {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 194mm !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        background: #fff !important;
        z-index: 9999999 !important;
    }
    body.printing-portal-cards .portal-cards-print-page {
        width: 194mm !important;
        height: 280mm !important;
        max-height: 280mm !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 97mm 97mm !important;
        grid-template-rows: repeat(5, 56mm) !important;
        gap: 0 !important;
        border: 1px dashed #64748b !important;
        page-break-after: always !important;
        break-after: page !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    body.printing-portal-cards .portal-cards-print-page:last-child {
        page-break-after: auto !important;
        break-after: auto !important;
    }
    body.printing-portal-cards .portal-cards-print-card {
        border: none !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        width: 97mm !important;
        height: 56mm !important;
        max-height: 56mm !important;
        padding: 2.8mm 3.2mm !important;
        overflow: hidden !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    /* 直線裁切線：左欄卡片右側繪製貫穿上下的縱向裁切線 */
    body.printing-portal-cards .portal-cards-print-card:nth-child(2n+1) {
        border-right: 1px dashed #64748b !important;
    }
    /* 橫線裁切線：前 4 列卡片下方繪製貫穿左右的橫向裁切線 */
    body.printing-portal-cards .portal-cards-print-card:nth-child(-n+8) {
        border-bottom: 1px dashed #64748b !important;
    }
    body.printing-portal-cards .qr-parent-box,
    body.printing-portal-cards .qr-student-box {
        width: 22mm !important;
        height: 22mm !important;
        max-width: 22mm !important;
        max-height: 22mm !important;
        padding: 1.2mm !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    body.printing-portal-cards .qr-parent-box canvas,
    body.printing-portal-cards .qr-parent-box img,
    body.printing-portal-cards .qr-student-box canvas,
    body.printing-portal-cards .qr-student-box img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: pixelated !important;
    }
    body.printing-portal-cards .qr-parent-box canvas[style*="display: none"],
    body.printing-portal-cards .qr-student-box canvas[style*="display: none"],
    body.printing-portal-cards .qr-parent-box img[style*="display: none"],
    body.printing-portal-cards .qr-student-box img[style*="display: none"] {
        display: none !important;
    }
}

/* 預覽與通用 A4 裁切小卡元件樣式 (完全分割紙張的縱橫裁切格線) */
.portal-cards-print-page {
    width: 194mm;
    height: 280mm;
    max-height: 280mm;
    display: grid;
    grid-template-columns: 97mm 97mm;
    grid-template-rows: repeat(5, 56mm);
    gap: 0;
    border: 1px dashed #64748b;
    box-sizing: border-box;
    background: #fff;
    margin: 0 auto;
}
.portal-cards-print-card {
    page-break-inside: avoid;
    break-inside: avoid;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    width: 97mm;
    height: 56mm;
    max-height: 56mm;
    padding: 2.8mm 3.2mm;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
}
.portal-cards-print-card:nth-child(2n+1) {
    border-right: 1px dashed #64748b;
}
.portal-cards-print-card:nth-child(-n+8) {
    border-bottom: 1px dashed #64748b;
}
.qr-parent-box,
.qr-student-box {
    width: 22mm !important;
    height: 22mm !important;
    max-width: 22mm !important;
    max-height: 22mm !important;
    padding: 1.2mm !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.qr-parent-box canvas,
.qr-parent-box img,
.qr-student-box canvas,
.qr-student-box img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: pixelated !important;
}
.qr-parent-box canvas[style*="display: none"],
.qr-student-box canvas[style*="display: none"],
.qr-parent-box img[style*="display: none"],
.qr-student-box img[style*="display: none"] {
    display: none !important;
}

/* ============================================================== */
/* 液態磨砂玻璃質感 (Liquid Glassmorphism) & 首頁可愛萌感優化    */
/* ============================================================== */
.liquid-glass-card {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 30px 0 rgba(148, 115, 83, 0.05), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
}

.liquid-glass-card:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 16px 40px -4px rgba(148, 115, 83, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 1);
}

.liquid-glass-nav {
    background: rgba(253, 251, 247, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 20px -2px rgba(120, 90, 60, 0.03);
}

.liquid-glass-pill {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* ============================================================== */
/* 高對比現代美型 Toggle Switch (開關元件)                         */
/* 解決 Tailwind 缺失 h-6.5 / h-5.5 造成軌道高度為 0 隱形的問題    */
/* ============================================================== */
.cm-toggle-track {
    width: 48px;
    height: 26px;
    background-color: #CBD5E1; /* slate-300: 關閉狀態高對比度底色 */
    border: 2px solid #94A3B8; /* slate-400: 清晰外框界線 */
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-block;
}

.cm-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: #FFFFFF;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
}

.peer:checked + .cm-toggle-track,
input:checked + .cm-toggle-track {
    background-color: #4F46E5 !important; /* vibrant indigo-600 */
    border-color: #4338CA !important; /* indigo-700 */
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.peer:checked + .cm-toggle-track::after,
input:checked + .cm-toggle-track::after {
    transform: translateX(22px);
    background-color: #FFFFFF;
}

.cm-toggle-track-sm {
    width: 42px;
    height: 24px;
    background-color: #CBD5E1; /* slate-300: 關閉狀態高對比度底色 */
    border: 2px solid #94A3B8; /* slate-400: 清晰外框界線 */
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-block;
}

.cm-toggle-track-sm::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #FFFFFF;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
}

.peer:checked + .cm-toggle-track-sm,
input:checked + .cm-toggle-track-sm {
    background-color: #4F46E5 !important; /* vibrant indigo-600 */
    border-color: #4338CA !important; /* indigo-700 */
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.peer:checked + .cm-toggle-track-sm::after,
input:checked + .cm-toggle-track-sm::after {
    transform: translateX(18px);
    background-color: #FFFFFF;
}

.peer:focus-visible + .cm-toggle-track,
.peer:focus-visible + .cm-toggle-track-sm {
    outline: 2px solid #6366F1;
    outline-offset: 2px;
}

/* ============================================================== */
/* 大螢幕簽到全螢幕模式 (Attendance Kiosk Mode)                      */
/* ============================================================== */
body.attendance-kiosk-active {
    overflow: hidden !important;
}

#attendance-page.attendance-kiosk-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    background-image: url('../assets/images/bg_parent_portal.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

@media (max-width: 640px) {
    #attendance-page.attendance-kiosk-mode {
        padding: 8px 10px !important;
    }
}

/* 隱藏全螢幕模式下非必要元素（純淨模式：只保留正方形座號方格與離開全螢幕按鈕） */
#attendance-page.attendance-kiosk-mode #attendance-inner-container,
#attendance-page.attendance-kiosk-mode > div {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;
}

#attendance-page.attendance-kiosk-mode #attendance-inner-container > *:not(#att-matrix-card),
#attendance-page.attendance-kiosk-mode > div > *:not(#att-matrix-card),
#attendance-page.attendance-kiosk-mode .storybook-banner-card,
#attendance-page.attendance-kiosk-mode #att-monthly-notice-card,
#attendance-page.attendance-kiosk-mode #attendance-exception-list {
    display: none !important;
}

#attendance-page.attendance-kiosk-mode #att-normal-header {
    display: none !important;
}

/* Kiosk 模式頂部控制列（純淨模式：僅保留離開全螢幕按鈕，隱藏時鐘、班級徽章、日期標籤） */
.att-kiosk-top-bar {
    display: none;
}
#attendance-page.attendance-kiosk-mode .att-kiosk-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4px 8px 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 4px 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
#attendance-page.attendance-kiosk-mode .att-kiosk-top-bar > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
#attendance-page.attendance-kiosk-mode #att-kiosk-exit-btn {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    color: #FFFFFF !important;
    padding: 10px 22px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    font-size: 14.5px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
#attendance-page.attendance-kiosk-mode #att-kiosk-exit-btn:hover {
    background: rgba(15, 23, 42, 0.95) !important;
    transform: scale(1.05) !important;
}

/* Kiosk 模式網格容器（純淨全螢幕卡片） */
#attendance-page.attendance-kiosk-mode #att-matrix-card {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    gap: 0 !important;
}

/* 隱藏學生簽到普通標題列與任何非 kiosk-top-bar、非 seat-grid 的子元素 */
#attendance-page.attendance-kiosk-mode #att-matrix-card > div:not(#att-kiosk-top-bar):not(#attendance-seat-grid) {
    display: none !important;
}

#attendance-page.attendance-kiosk-mode #attendance-seat-grid {
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    display: grid !important;
    gap: clamp(6px, 1vh, 12px) !important;
}

/* 正方形座號方格 (aspect-ratio: 1 / 1 !important) 與液態玻璃卡片質感 */
#attendance-page.attendance-kiosk-mode .att-seat-card {
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin: auto !important;
    padding: clamp(4px, 1vh, 12px) !important;
    border-radius: clamp(14px, 1.8vw, 24px) !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 液態玻璃未簽到 (High contrast frosted milk glass) */
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="unmarked"] {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 2px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
}
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="unmarked"]:hover {
    background: #FFFFFF !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.25) !important;
}

/* 液態玻璃準時出席 (Luminous emerald liquid glass) */
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="present"] {
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.95) 0%, rgba(167, 243, 208, 0.9) 100%) !important;
    border: 2.5px solid #059669 !important;
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* 液態玻璃遲到 (Luminous amber liquid glass) */
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="late"] {
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.9) 100%) !important;
    border: 2.5px solid #D97706 !important;
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* 液態玻璃請假 (Luminous indigo liquid glass) */
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="leave"] {
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(224, 231, 255, 0.9) 100%) !important;
    border: 2.5px solid #4F46E5 !important;
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* 液態玻璃曠課 (Luminous rose liquid glass) */
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="absent"] {
    background: linear-gradient(135deg, rgba(255, 241, 242, 0.95) 0%, rgba(254, 205, 211, 0.9) 100%) !important;
    border: 2.5px solid #E11D48 !important;
    box-shadow: 0 8px 28px rgba(244, 63, 94, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* 方格內元素居中、座號、姓名高對比文字調整 */
#attendance-page.attendance-kiosk-mode .att-seat-card > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 2px !important;
}

#attendance-page.attendance-kiosk-mode .att-seat-number {
    font-size: clamp(1.2rem, min(4.5vh, 3vw), 2.8rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #0F172A !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="present"] .att-seat-number {
    color: #065F46 !important;
}
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="late"] .att-seat-number {
    color: #92400E !important;
}
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="leave"] .att-seat-number {
    color: #3730A3 !important;
}
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="absent"] .att-seat-number {
    color: #9F1239 !important;
}

#attendance-page.attendance-kiosk-mode .att-seat-name {
    font-size: clamp(0.75rem, min(2.2vh, 1.3vw), 1.25rem) !important;
    font-weight: 900 !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: clamp(2px, 0.5vh, 6px) !important;
    line-height: 1.2 !important;
}
#attendance-page.attendance-kiosk-mode .att-seat-card[data-status="unmarked"] .att-seat-name {
    color: #1E293B !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}
#attendance-page.attendance-kiosk-mode .att-seat-card:not([data-status="unmarked"]) .att-seat-name {
    color: #0F172A !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7) !important;
}

#attendance-page.attendance-kiosk-mode .att-seat-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.6rem, min(1.4vh, 0.85vw), 0.85rem) !important;
    padding: clamp(1px, 0.3vh, 3px) clamp(6px, 0.8vw, 12px) !important;
    margin-top: clamp(2px, 0.4vh, 5px) !important;
    font-weight: 900 !important;
    border-radius: 9999px !important;
}

#attendance-page.attendance-kiosk-mode .att-seat-time {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    font-size: clamp(0.6rem, min(1.3vh, 0.8vw), 0.8rem) !important;
    margin-top: clamp(1px, 0.3vh, 4px) !important;
    color: #0F172A !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

#attendance-page.attendance-kiosk-mode .att-seat-time span,
#attendance-page.attendance-kiosk-mode .att-seat-time i {
    color: #0F172A !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

body.attendance-kiosk-active #attendance-status-modal {
    z-index: 10001 !important;
}

/* ============================================================== */
/* 座號簽到液態水波紋 (Liquid Ripple) 與微光粒子特效 (Sparkles)        */
/* ============================================================== */
.att-liquid-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(199, 210, 254, 0.5) 40%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    transform: scale(0);
    animation: att-ripple-expand 0.65s cubic-bezier(0.1, 0.8, 0.1, 1) forwards;
    z-index: 20;
}

@keyframes att-ripple-expand {
    0% {
        transform: scale(0.1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.att-sparkle-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 20%, #A5B4FC 80%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 14px rgba(99, 102, 241, 0.7);
    pointer-events: none;
    z-index: 22;
    opacity: 1;
    animation: att-sparkle-drift 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes att-sparkle-drift {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    60% {
        opacity: 0.95;
        transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1.35);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--tx, 0px) * 1.3), calc(-50% + var(--ty, 0px) * 1.3)) scale(0.2);
    }
}

/* ============================================================== */
/* 迷你計時器倒數結束全螢幕動畫 (Fullscreen Time-Up Overlay)           */
/* ============================================================== */
#fw-timeup-overlay {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: fw-overlay-fade-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fw-overlay-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fw-timeup-card-enter {
    animation: fw-card-pop-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fw-card-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.82) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.fw-alarm-ring-bounce {
    animation: fw-alarm-ring-bounce 1.1s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes fw-alarm-ring-bounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    12% {
        transform: translateY(-12px) rotate(-18deg) scale(1.08);
    }
    24% {
        transform: translateY(-14px) rotate(18deg) scale(1.1);
    }
    36% {
        transform: translateY(-10px) rotate(-15deg) scale(1.08);
    }
    48% {
        transform: translateY(-12px) rotate(15deg) scale(1.06);
    }
    60% {
        transform: translateY(-6px) rotate(-10deg) scale(1.03);
    }
    72% {
        transform: translateY(-3px) rotate(8deg) scale(1.01);
    }
    85% {
        transform: translateY(0) rotate(-4deg) scale(1);
    }
}

.fw-alarm-wave-ring {
    position: absolute;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 9999px;
    border: 3px solid rgba(251, 191, 36, 0.65);
    pointer-events: none;
    animation: fw-alarm-wave-expand 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.fw-alarm-wave-ring-delay {
    animation-delay: 0.9s;
}

@keyframes fw-alarm-wave-expand {
    0% {
        transform: scale(0.95);
        opacity: 0.85;
    }
    100% {
        transform: scale(1.85);
        opacity: 0;
    }
}

/* ============================================================== */
/* 手機端專屬響應式排版防遮擋規範 (Mobile Layout Safeguards)          */
/* ============================================================== */
@media (max-width: 639px) {
    /* 當手機底部導覽列顯示時，隱藏右下角浮動音效按鈕（選單抽屜內已有音效開關），避免遮擋「選單」按鈕 */
    body:has(#mobile-bottom-nav:not(.hidden)) #global-sound-toggle-btn {
        display: none !important;
    }
}



/* ============================================================== */
/* 課堂計時專屬全畫面與全螢幕沉浸投影樣式 (Classroom Activity Timer)    */
/* ============================================================== */
#classroom-timer-page {
    background-color: #FAF8F5;
}

/* 預設非全螢幕時隱藏全螢幕專屬視圖 */
#ct-zen-overlay {
    display: none;
}

/* 全螢幕沉浸投影模式 (Zen Mode) */
#classroom-timer-page.ct-zen-active {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 999 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #FDFBF7 65%, #F4EFE6 100%) !important;
}

#classroom-timer-page.ct-zen-active #ct-normal-view {
    display: none !important;
}

#classroom-timer-page.ct-zen-active #ct-zen-overlay {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
}

body.ct-zen-mode #mobile-bottom-nav,
body.ct-zen-mode #global-nav-burger-btn,
body.ct-zen-mode #portal-btn,
body.ct-zen-mode #global-exit-fullscreen-btn,
body.ct-zen-mode #global-sound-toggle-btn {
    display: none !important;
}

/* 碼錶與計時器數字等寬防抖動 (Tabular Nums Anti-Shake) */
#ct-countdown-digits,
#ct-stopwatch-digits,
#ct-zen-countdown-digits,
#ct-zen-stopwatch-digits,
.ct-fluid-digits,
.ct-stopwatch-fluid-digits,
#exam-preview-digits,
#exam-running-digits,
#fw-timer-digits,
#fw-capsule-digits,
#fw-timeup-overtime-digits,
#ct-mini-capsule-digits {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 全螢幕大字體與微調 */
.ct-fluid-digits {
    font-size: clamp(3.8rem, 17vw, 15rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    user-select: none;
}

.ct-stopwatch-fluid-digits {
    font-size: clamp(2.8rem, 13vw, 11rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    user-select: none;
}

/* 環形進度圈動畫 */
.ct-circle-ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.3s ease, stroke 0.4s ease;
}

/* 玻璃擬態懸浮工具列 */
.ct-zen-floating-bar {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(235, 220, 203, 0.9);
    box-shadow: 0 10px 35px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.05);
}

@media (max-width: 639px) {
    .ct-fluid-digits {
        font-size: clamp(3.2rem, 15vw, 6.5rem);
    }
    .ct-stopwatch-fluid-digits {
        font-size: clamp(2.2rem, 11vw, 4.8rem);
    }
    .ct-zen-floating-bar {
        padding: 0.5rem 0.75rem !important;
        gap: 0.35rem !important;
    }
}