/* =========================================
   GLOBAL.CSS - 全域骨架、基礎排版與導覽列
   ========================================= */

body { background-color: #0b1120; color: #cbd5e1; font-family: -apple-system, sans-serif; padding: 15px; margin: 0; line-height: 1.6; -webkit-tap-highlight-color: transparent; }

/* 共用主容器 */
/* [修復點] margin 調整為 '40px auto 20px'，讓框框往下移，避開導覽列 */
.container { max-width: 600px; margin: 40px auto 20px; background: #111827; padding: 25px; border-radius: 20px; border: 1px solid rgba(56, 189, 248, 0.15); box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; }
.main-title { text-align: center; color: #e0f2fe; margin-bottom: 20px; font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; }

/* 核心狀態控制 */
.hidden { display: none !important; }

/* --- 載入動畫 --- */
#loading-screen { text-align: center; padding: 60px 0; }
.spinner { width: 50px; height: 50px; border: 4px solid #1e293b; border-top: 4px solid #38bdf8; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- 按鈕系統 --- */
button { width: 100%; padding: 16px; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; font-size: 1rem; }
.btn-advance, .btn-primary { background: linear-gradient(135deg, #0284c7, #2563eb); color: white; box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3); }
.btn-advance:hover, .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5); }
.btn-secondary { background: #1e293b; color: #94a3b8; margin-top: 20px; }
.btn-secondary:hover { background: #334155; color: #cbd5e1; }

/* --- 側邊欄與登出按鈕 --- */
.sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sidebar-content { padding-bottom: 80px; }
.sidebar-content a { padding: 12px 25px; }
#auth-nav-btn.logout-mode:hover { background: #ef4444; color: white; border-color: #ef4444; }

/* =========================================
   手機版 (RWD) 導覽列終極修復
   ========================================= */
@media (max-width: 480px) {
    .landing-header {
        padding: 10px 15px !important; /* 縮小整個 Header 的內距 */
    }
    
    .landing-header .logo {
        font-size: 1.05rem !important; /* 稍微縮小 Logo 字體 */
        white-space: nowrap !important; /* 強制 Logo 不換行 */
        flex-shrink: 0; /* 防止 Logo 被過度壓縮 */
    }
    
    .header-actions {
        gap: 5px !important; /* 縮小按鈕之間的間隔 */
    }
    
    .header-actions button {
        padding: 6px 10px !important; /* 大幅縮減按鈕內距 */
        font-size: 0.75rem !important; /* 縮小按鈕字體 */
        white-space: nowrap !important; /* 絕對禁止文字垂直折行 */
        width: auto !important; /* 覆蓋全域的 100% 寬度 */
        height: auto !important;
        min-width: 0 !important;
    }
    
    .hamburger {
        font-size: 1.2rem !important;
        margin-left: 5px;
    }
    
    /* [手機版修復] 手機的測驗框再稍微推擠一點點，避免跟小按鈕打架 */
    .container { margin-top: 25px; } 
}