/* ==========================================================================
   Aurora Campus Liquid Glass & iOS Spring Physics Theme (v5.0)
   100% Original Design for 班級經營系統
   ========================================================================== */

:root {
    --spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --spring-gentle: cubic-bezier(0.16, 1, 0.3, 1);
    --aurora-glass-bg: rgba(255, 255, 255, 0.94);
    --aurora-glass-border: rgba(94, 78, 71, 0.14);
    --aurora-glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 0 rgba(94, 78, 71, 0.04);
    --aurora-shadow-ambient: 0 16px 40px -8px rgba(65, 45, 30, 0.07), 0 4px 14px -2px rgba(65, 45, 30, 0.03);
    --aurora-shadow-elevated: 0 24px 50px -10px rgba(65, 45, 30, 0.12), 0 8px 22px -3px rgba(65, 45, 30, 0.05);
}

/* 1. 液態玻璃擬態 (Aurora Liquid Glassmorphism) */
.glass-card,
.aurora-glass {
    background: var(--aurora-glass-bg);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--aurora-glass-border);
    box-shadow: var(--aurora-shadow-ambient), var(--aurora-glass-highlight);
}

.aurora-glass-pill {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(94, 78, 71, 0.16);
    box-shadow: 0 10px 28px -4px rgba(65, 45, 30, 0.07), inset 0 1px 0 0 rgba(255, 255, 255, 0.98);
}

/* 2. iOS 彈力回饋動效 (Spring Physics Micro-interactions) */
.ios-spring,
.student-btn,
.aurora-tool-btn,
.aurora-card-hover {
    transition-property: transform, opacity, box-shadow, background-color, border-color;
    transition-duration: 0.36s;
    transition-timing-function: var(--spring-snappy);
    @media (prefers-reduced-motion: reduce) {
        transition-duration: 0.12s;
        transition-timing-function: ease-out;
    }
}

.ios-spring:hover,
.aurora-tool-btn:hover {
    transform: translateY(-2px) scale(1.015);
}

.ios-spring:active,
.aurora-tool-btn:active,
.student-btn:active {
    transform: scale(0.93) !important;
    transition-duration: 0.1s;
}

.aurora-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--aurora-shadow-elevated), var(--aurora-glass-highlight);
}

/* 浮動加分彈跳特效 (+1, +3, etc.) */
@keyframes auroraScoreFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, 6px) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -14px) scale(1.25);
    }
    75% {
        opacity: 1;
        transform: translate(-50%, -28px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -42px) scale(0.85);
    }
}

.aurora-score-pop {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    font-weight: 900;
    font-size: 1.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.45);
    animation: auroraScoreFloat 0.95s var(--spring-snappy) forwards;
    @media (prefers-reduced-motion: reduce) {
        animation-duration: 0.4s;
    }
}

/* 3. 溫暖手繪童趣插圖全景橫幅 (Storybook Panoramic Banners) */
.aurora-banner-card,
.storybook-banner-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    background: #FDFBF7;
    border: 1px solid rgba(235, 222, 206, 0.95);
    box-shadow: 0 14px 36px -8px rgba(180, 140, 100, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
}

.aurora-banner-art,
.storybook-banner-art {
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s var(--spring-smooth);
}

.storybook-banner-card:hover .storybook-banner-art,
.aurora-banner-card:hover .aurora-banner-art {
    transform: scale(1.025);
}

/* 柔和莫蘭迪微徽章 (Storybook Module Badges) */
.storybook-planet-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 2px 8px -1px rgba(180, 140, 100, 0.12);
    border: 1px solid rgba(235, 222, 206, 0.9);
    background: rgba(255, 253, 249, 0.95);
    backdrop-filter: blur(8px);
}

/* 導覽抽屜按鈕手感微動效 */
.planet-nav-item {
    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.planet-nav-item:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 18px -4px rgba(180, 140, 100, 0.15);
}
.planet-nav-item:active {
    transform: scale(0.97);
}

/* 全螢幕模式隱藏署名頁尾 */
html.app-fullscreen-active footer,
body.app-fullscreen-active footer,
:fullscreen footer,
:-webkit-full-screen footer {
    display: none !important;
}

/* 4. 聯絡簿黑板升級：直橫切換、值日生、全螢幕投影模式 */
#blackboard-content.blackboard-vertical-mode {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    min-height: 48vh;
}

#blackboard-content.blackboard-vertical-mode .bb-item-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.75rem;
    min-height: 42vh;
    border-left: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
}

#blackboard-content.blackboard-vertical-mode .bb-item-text-wrap {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.12em;
    line-height: 1.85;
    max-height: 52vh;
    overflow-y: auto;
    padding: 0.25rem 0;
}

#blackboard-content.blackboard-vertical-mode .bb-item-actions {
    margin-left: 0 !important;
    margin-top: 0.75rem;
    flex-direction: row;
}

/* 全螢幕投影 Zen Mode */
.blackboard-projector-zen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9990 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #0f172a !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.blackboard-projector-zen header {
    display: none !important;
}

.blackboard-projector-zen #blackboard-outer-board {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px !important;
    border-radius: 1.25rem !important;
    border-width: 3px !important;
}

.blackboard-projector-zen #blackboard-inner-frame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 16px !important;
}

.blackboard-projector-zen #bb-zen-topbar {
    padding-top: 6px !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
}

.blackboard-projector-zen #bb-zen-topbar button,
.blackboard-projector-zen #bb-zen-topbar .bb-zen-btn,
.blackboard-projector-zen #bb-zen-clock,
.blackboard-projector-zen #bb-zen-duty-pill {
    min-height: 44px !important;
}

.blackboard-projector-zen #blackboard-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
}

.blackboard-projector-zen #blackboard-content > div {
    padding-top: clamp(2px, 0.4vh, 6px) !important;
    padding-bottom: clamp(2px, 0.4vh, 6px) !important;
    min-height: 0 !important;
}

.blackboard-projector-zen .hide-in-projector {
    display: none !important;
}

.blackboard-projector-zen .bb-item-actions {
    display: none !important;
}

/* 聯絡簿頂部按鈕列嚴禁換行 (保證所有按鈕緊湊平整排列在一整行，支援水平滾動防溢出) */
#contact-book-header-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    scrollbar-width: thin;
}

#contact-book-header-actions > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 5. 可收合浮動教師快捷島 (Aurora Dynamic Island) */
#aurora-dynamic-island {
    position: fixed;
    z-index: 94;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition:
        width 0.38s var(--spring-snappy),
        height 0.38s var(--spring-snappy),
        border-radius 0.38s var(--spring-snappy),
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

#aurora-dynamic-island.island-snapping {
    transition:
        left 0.42s var(--spring-smooth),
        top 0.42s var(--spring-smooth),
        width 0.38s var(--spring-snappy),
        height 0.38s var(--spring-snappy),
        border-radius 0.38s var(--spring-snappy);
}

#aurora-dynamic-island.island-dragging {
    cursor: grabbing !important;
    transform: scale(1.03);
    box-shadow: 0 25px 50px -12px rgba(30, 27, 75, 0.38);
}

/* 6. 座位表與分組編排 (Classroom Studio) */
.seating-desk-cell {
    transition: transform 0.28s var(--spring-snappy), box-shadow 0.25s ease, border-color 0.2s ease;
}

.seating-desk-cell:hover {
    transform: translateY(-2px) scale(1.02);
}

.seating-desk-selected {
    ring: 3px solid #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 10px 20px -5px rgba(99, 102, 241, 0.25);
    transform: scale(1.04);
}

/* 7. 抽籤舞台 3D 翻牌效果 */
@keyframes drawSlotPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.draw-stage-rolling {
    animation: drawSlotPulse 0.22s ease-in-out infinite;
    @media (prefers-reduced-motion: reduce) {
        animation: none;
    }
}

/* 8. 作業點收卡片請假/缺席自動標記徽章 */
.seat-attendance-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    padding: 2px 5px;
    border-radius: 9999px;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 9. 工作台快捷躍遷卡 (Storybook Dock Cards) */
.storybook-planet-dock-card {
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.24s ease, border-color 0.2s ease;
}
.storybook-planet-dock-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 24px -4px rgba(180, 140, 100, 0.2);
}
.storybook-planet-dock-card:active {
    transform: scale(0.95);
}

/* 10. 考試計時沉浸投影滿版模式 (Exam Timer Immersive Fullscreen Mode) */
html.app-fullscreen-active #exam-timer-page,
body.app-fullscreen-active #exam-timer-page,
:fullscreen #exam-timer-page,
:-webkit-full-screen #exam-timer-page,
#exam-timer-page.exam-fullscreen-active {
    padding-bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    background-color: #FAF8F5 !important;
}

html.app-fullscreen-active #exam-timer-inner-container,
body.app-fullscreen-active #exam-timer-inner-container,
:fullscreen #exam-timer-inner-container,
:-webkit-full-screen #exam-timer-inner-container,
#exam-timer-page.exam-fullscreen-active #exam-timer-inner-container {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0.75rem 1.25rem !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
}

html.app-fullscreen-active #exam-timer-running-view,
body.app-fullscreen-active #exam-timer-running-view,
:fullscreen #exam-timer-running-view,
:-webkit-full-screen #exam-timer-running-view,
#exam-timer-page.exam-fullscreen-active #exam-timer-running-view {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0.65rem !important;
}

html.app-fullscreen-active #exam-running-main-grid,
body.app-fullscreen-active #exam-running-main-grid,
:fullscreen #exam-running-main-grid,
:-webkit-full-screen #exam-running-main-grid,
#exam-timer-page.exam-fullscreen-active #exam-running-main-grid {
    flex: 1 1 0% !important;
    display: grid !important;
    min-height: 0 !important;
    height: 100% !important;
    gap: 0.85rem !important;
}

html.app-fullscreen-active #exam-running-schedule-col,
body.app-fullscreen-active #exam-running-schedule-col,
:fullscreen #exam-running-schedule-col,
:-webkit-full-screen #exam-running-schedule-col,
#exam-timer-page.exam-fullscreen-active #exam-running-schedule-col {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    background: rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
}

html.app-fullscreen-active #exam-running-board-card,
body.app-fullscreen-active #exam-running-board-card,
:fullscreen #exam-running-board-card,
:-webkit-full-screen #exam-running-board-card,
#exam-timer-page.exam-fullscreen-active #exam-running-board-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 1.25rem 2rem !important;
    background: rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06) !important;
}

html.app-fullscreen-active #exam-running-active-board,
body.app-fullscreen-active #exam-running-active-board,
:fullscreen #exam-running-active-board,
:-webkit-full-screen #exam-running-active-board,
#exam-timer-page.exam-fullscreen-active #exam-running-active-board {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    justify-content: center !important;
    gap: 0.75rem !important;
}

html.app-fullscreen-active #exam-running-countdown-box,
body.app-fullscreen-active #exam-running-countdown-box,
:fullscreen #exam-running-countdown-box,
:-webkit-full-screen #exam-running-countdown-box,
#exam-timer-page.exam-fullscreen-active #exam-running-countdown-box {
    width: fit-content !important;
    max-width: min(92vw, 820px) !important;
    flex: 0 0 auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.75rem auto !important;
    padding: 1.25rem 2.5rem !important;
    background: rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    border-radius: 2rem !important;
}

html.app-fullscreen-active #exam-running-digits,
body.app-fullscreen-active #exam-running-digits,
:fullscreen #exam-running-digits,
:-webkit-full-screen #exam-running-digits,
#exam-timer-page.exam-fullscreen-active #exam-running-digits {
    font-size: clamp(6rem, 15vw, 16.5rem) !important;
    line-height: 0.95 !important;
}

html.app-fullscreen-active #exam-running-title,
body.app-fullscreen-active #exam-running-title,
:fullscreen #exam-running-title,
:-webkit-full-screen #exam-running-title,
#exam-timer-page.exam-fullscreen-active #exam-running-title {
    font-size: clamp(2.5rem, 5vw, 5.5rem) !important;
    line-height: 1.1 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

html.app-fullscreen-active #exam-running-clock,
body.app-fullscreen-active #exam-running-clock,
:fullscreen #exam-running-clock,
:-webkit-full-screen #exam-running-clock,
#exam-timer-page.exam-fullscreen-active #exam-running-clock {
    font-size: clamp(1.75rem, 3.2vw, 3.5rem) !important;
}

html.app-fullscreen-active #exam-running-attendance,
body.app-fullscreen-active #exam-running-attendance,
:fullscreen #exam-running-attendance,
:-webkit-full-screen #exam-running-attendance,
#exam-timer-page.exam-fullscreen-active #exam-running-attendance {
    font-size: clamp(1.5rem, 2.4vw, 2.75rem) !important;
}

/* 授權端相機取景框：全幅無黑邊滿版視訊，去除預設遮罩，凸顯白色圓角取景標記 (如 10314.png) */
#qr-scanner-viewport {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

#qr-scanner-viewport video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 1.5rem;
}

#qr-scanner-viewport #qr-shaded-region,
#qr-scanner-viewport canvas {
    display: none !important;
}