/* ==================== CSS Variables ==================== */
:root {
    --bg-primary: #0a1929;
    --bg-secondary: #0d2137;
    --bg-card: #132f4c;
    --bg-card-hover: #1a3a5c;
    --bg-modal: #0f2942;

    --gold: #d4af37;
    --gold-light: #f0d676;
    --gold-dim: rgba(212, 175, 55, 0.12);
    --gold-glow: rgba(212, 175, 55, 0.25);

    --blue: #2196f3;
    --blue-light: #64b5f6;
    --blue-dim: rgba(33, 150, 243, 0.12);

    --green: #4caf50;
    --red: #f44336;
    --cyan: #00bcd4;

    --text-primary: #ffffff;
    --text-secondary: #8ba3c4;
    --text-muted: #5a7a9a;

    --border: rgba(212, 175, 55, 0.15);
    --border-soft: rgba(139, 163, 196, 0.12);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;

    --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45);
    --shadow-gold: 0 0 24px rgba(212, 175, 55, 0.15);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}

/* ==================== Reset ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; cursor: pointer; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hidden { display: none !important; }

/* ==================== Navbar ==================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(10, 25, 41, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-soft);
    transition: var(--transition);
}

.navbar.scrolled {
    background: rgba(10, 25, 41, 0.98);
    box-shadow: var(--shadow);
}

.nav-container {
    /* 滿版：logo 與導覽連結貼齊畫面左緣（原本 max-width:1400px 置中，
       在寬螢幕上會讓 logo+選單整組看起來落在畫面中央） */
    max-width: none;
    margin: 0 auto;
    padding: 0 24px;
    height: 88px;
    display: flex;
    align-items: center;
    /* 由左依序排列；不再用 space-between（會把選單推往中間） */
    justify-content: flex-start;
    gap: 24px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.logo-img {
    height: 84px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}

.logo-text .name-cn {
    /* 1.25rem → 1.15rem：品牌區塊原本寬達 510px，會把選單擠到畫面中央 */
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

.logo-text .name-en {
    /* 0.82rem → 0.72rem：英文副標是 logo 區塊最寬的部分（實測 400px） */
    font-size: 0.72rem;
    color: #d4af37 !important;
    -webkit-text-fill-color: #d4af37 !important;
    letter-spacing: 0.8px;
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
    align-self: flex-start;
}

.nav-menu {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.nav-menu a {
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    font-size: 1.15rem;
    font-weight: 500;
    color: #ffffff;
    transition: var(--transition);
    position: relative;
    white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--gold);
    background: var(--gold-dim);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 自動吃掉剩餘空間 → 動作區固定在最右側，
       左側的 logo 與導覽連結才能維持整組靠左 */
    margin-left: auto;
    /* v1.9.10：改為可壓縮（原本 flex-shrink: 0）。
       空間不足時優先壓縮會員名稱（已有 ellipsis），確保最後一顆「登出」
       永遠留在視窗內 —— body 有 overflow-x: hidden，一旦溢出不會產生捲軸，
       而是直接把右側按鈕裁掉（使用者回報「登出被擠出視窗」）。
       ⚠️ .user-name 已有 white-space: nowrap，不會再被壓成直排。 */
    flex-shrink: 1;
    min-width: 0;
}

/* Phone button in nav */
.nav-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
}

.nav-phone:hover {
    background: var(--gold-dim);
    border-color: var(--gold);
    transform: translateY(-1px);
}

/* v1.9.10：登入後收掉導覽列的電話 —— 把空間讓給會員名稱／等級／登出，
   這是「登出不被擠出視窗」的第一道手段（省下約 140px）。
   電話在頁尾與「聯絡我們」區塊都還在，訪客狀態完全不受影響。
   <body> 的 is-logged-in 由 app.js 的 updateAuthUI() 切換。 */
body.is-logged-in .nav-phone { display: none; }

.phone-icon {
    font-size: 1rem;
    color: var(--gold);
    animation: ring 2s ease infinite;
}

@keyframes ring {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-15deg); }
    20%, 40% { transform: rotate(15deg); }
    50%, 90% { transform: rotate(0deg); }
}

/* User menu */
.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    /* 徽章／名稱／登出維持同一橫列，不被壓縮換行 */
    /* v1.9.10：改為可壓縮（原本 flex-shrink: 0）→ 內部由
       .user-name（優先）與 .user-tier 讓位，最後的 .btn-logout 不讓位。 */
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
}

.user-badge {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--bg-primary);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    /* 會員名稱一律橫向單行顯示（原本會被壓縮成一直排字） */
    white-space: nowrap;
    line-height: 1.2;
    /* 安全閥：極長的名稱才以 … 收尾，正常 2~4 字名稱不受影響 */
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    /* v1.9.10：空間不足時「優先」壓縮名稱（badge 已顯示姓氏首字），
       flex-shrink 給 3，比 .user-tier 的 1 更早讓位。 */
    flex: 0 3 auto;
    min-width: 0;
}

/* 會員等級標籤（v1.9.9）：「同一帳號可同時有多個等級」→ 顯示目前有效的全部等級。
   以金色系與姓名區隔，字級略小、不搶視覺。
   v1.9.10：導覽列改用簡稱（一般／特別／總統，見 app.js TIER_SHORT），
   並允許在極窄時讓位（ellipsis），但「登出」永遠優先保留。 */
.user-tier {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-logout {
    padding: 4px 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    transition: var(--transition);
    /* v1.9.10：「登出」是最後一顆按鈕，任何情況下都不讓位 */
    flex-shrink: 0;
}

.btn-logout:hover {
    color: var(--red);
    border-color: var(--red);
}

/* Auth buttons */
.auth-buttons { display: flex; gap: 10px; }

.btn-login {
    padding: 9px 22px;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    writing-mode: horizontal-tb;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-login:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-signup {
    padding: 9px 22px;
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.btn-signup:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-gold);
}

/* Nav toggle (mobile) */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

.nav-toggle span {
    width: 24px; height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

/* ==================== Hero ==================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 72px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(33, 150, 243, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% { opacity: 0; transform: translateY(100vh) scale(0); }
    10% { opacity: 0.5; }
    90% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-100px) scale(1); }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 800px;
    width: 100%;
    animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 首頁品牌中文全名（置於英文標籤上方，白色、大於英文字） */
.hero-brand-cn {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 3px;
    text-indent: 3px;   /* 補償字距造成的視覺偏移，維持置中 */
    margin-bottom: 14px;
    line-height: 1.4;
}

.hero-badge {
    display: inline-block;
    padding: 6px 18px;
    font-size: 0.85rem;
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid var(--border);
    border-radius: 100px;
    margin-bottom: 24px;
    letter-spacing: 2px;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 24px;
    background: linear-gradient(180deg, #ffffff 30%, var(--gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 80px rgba(212, 175, 55, 0.15);
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Buttons */
.btn-primary, .btn-outline, .btn-tier, .btn-tier-primary {
    padding: 14px 36px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.btn-primary {
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-outline {
    color: var(--text-primary);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
}

.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-dim);
}

.btn-lg { padding: 16px 44px; font-size: 1.05rem; }
.btn-full { width: 100%; margin-top: 8px; }

.hero-scroll {
    display: none;
}

.scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(180deg, var(--gold), transparent);
    animation: scrollDown 2s ease infinite;
}

@keyframes scrollDown {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==================== Section Headers ==================== */
.section-header {
    text-align: center;
    margin-bottom: 28px;
}

/* .section-tag（各區塊標題上方的英文標籤）已於 v1.8.2 移除，
   對應的 <div class="section-tag"> 亦已自 index.html 刪除，
   故此處不再保留樣式規則。 */

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.section-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
}

/* ==================== About ==================== */
.about { padding: 12px 0 36px; }

.about-top {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 28px;
}

.about-text p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 16px;
}
.about-text p:last-child { margin-bottom: 0; }

/* 關於我們：公司全名（白）＋ 英文名（金） */
.about-brand-cn { color: #ffffff; }
.about-brand-en { color: var(--gold); }

.about-photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    aspect-ratio: 16 / 10;
}
.about-photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
.about-photo::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--border);
    pointer-events: none;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.feature-item {
    padding: 16px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    transition: var(--transition);
}

.feature-item:hover {
    border-color: var(--border);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.feature-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.feature-icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    color: var(--gold);
    background: var(--gold-dim);
    border-radius: 10px;
}

.feature-icon svg { width: 20px; height: 20px; }

.feature-head h3 {
    font-size: 1rem;
    margin: 0;
}

.feature-item p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ==================== Teachers ==================== */
.teachers {
    padding: 20px 0 48px;
    background: var(--bg-secondary);
}

.teachers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.teacher-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.teacher-card:hover {
    border-color: var(--border);
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.teacher-featured {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06), var(--bg-card) 40%);
}

.teacher-featured:hover {
    border-color: var(--gold-light);
}

/* Horizontal featured teacher layout */
.teacher-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
}

.teacher-row .teacher-avatar {
    height: 100%;
    min-height: 280px;
    background: linear-gradient(135deg, var(--bg-card-hover), var(--bg-secondary));
    border-right: 1px solid var(--border-soft);
}

.teacher-row .avatar-circle {
    width: 120px;
    height: 120px;
    font-size: 3rem;
    box-shadow: 0 4px 24px rgba(212, 175, 55, 0.35);
}

.teacher-row .teacher-info {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-badge {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 5;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-radius: 100px;
    box-shadow: var(--shadow-gold);
}

.teacher-avatar {
    width: 100%;
    height: 180px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bg-card-hover), var(--bg-secondary));
    position: relative;
}

.teacher-avatar .avatar-circle {
    width: 90px; height: 90px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem; font-weight: 700;
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}

/* 師資照片：填滿頭像區塊。
   object-position 設 20% 而非 top，是為了讓窄螢幕（頭像區變成扁平橫條）時
   仍能保留臉部，不會只裁到額頭。 */
.teacher-avatar .teacher-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
/* 桌機與手機共用同一張照片（zhang-zhen.jpg）*/
.teacher-photo-mobile { display: none; }

.teacher-info { padding: 24px; }

.teacher-name {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.teacher-title {
    font-size: 0.9rem;
    color: var(--gold);
    margin-bottom: 12px;
    font-weight: 500;
}

.teacher-specialty {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: var(--blue-light);
    background: var(--blue-dim);
    border-radius: 6px;
    margin-bottom: 14px;
}

.teacher-bio {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 4px;
}

.teacher-meta {
    display: flex;
    gap: 18px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.teacher-meta span { display: flex; align-items: center; gap: 4px; }

/* ==================== Research Team ==================== */
.research-team {
    margin-top: 48px;
    padding-top: 40px;
    border-top: 1px solid var(--border-soft);
    text-align: center;
}

.research-team-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.research-team-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.research-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.research-team-card {
    padding: 32px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    transition: var(--transition);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.research-team-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: var(--transition);
}

.research-team-card:hover {
    border-color: var(--border);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.research-team-card:hover::before { opacity: 1; }

.team-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid;
}
.team-icon svg { width: 28px; height: 28px; }

.team-gold .team-icon {
    color: var(--gold);
    background: var(--gold-dim);
    border-color: var(--gold);
}

.team-blue .team-icon {
    color: var(--blue-light);
    background: var(--blue-dim);
    border-color: var(--blue);
}

.team-cyan .team-icon {
    color: var(--cyan);
    background: rgba(0, 188, 212, 0.12);
    border-color: var(--cyan);
}

.research-team-card h4 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-weight: 600;
}

.team-role {
    font-size: 0.82rem;
    color: var(--gold);
    margin-bottom: 14px;
    font-weight: 500;
    letter-spacing: 1px;
}

.research-team-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.65;
    text-align: left;
}

/* ==================== Reports ==================== */
.reports { padding: 20px 0 48px; }

.reports-filters {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 22px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border-soft);
    border-radius: 100px;
    transition: var(--transition);
}

.filter-btn:hover {
    color: var(--text-primary);
    border-color: var(--border);
}

.filter-btn.active {
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: transparent;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.report-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 28px;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.report-card:hover {
    border-color: var(--border);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

/* v1.9.14：非自己等級的報告「顯示但鎖住」
   —— 整張卡片淡化＋虛線框，但仍可點擊（點擊後顯示「專屬內容」提示與會員方案入口）。
   標題與摘要刻意保持可讀：目的是讓會員看到「還有這些報告」而願意加入／升級方案。 */
.report-card.is-locked {
    opacity: 0.62;
    border-style: dashed;
    border-color: var(--border-soft);
    filter: saturate(0.7);
}

.report-card.is-locked:hover {
    opacity: 0.85;
    border-color: var(--border);
    filter: none;
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.report-card.is-locked .report-title {
    color: var(--text-secondary);
}

/* 未登入時的「分析報告」提示（v1.9.5：報告只顯示自己等級的內容，
   未登入者不顯示任何報告，改以此提示引導登入） */
.report-guest-notice {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.report-guest-notice .lock-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.report-guest-notice h3 {
    font-size: 1.35rem;
    color: var(--gold);
    margin-bottom: 12px;
}

.report-guest-notice p {
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.8;
}

/* 該會員等級目前沒有任何專屬報告／此分類暫無報告 */
.reports-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
}

.report-category {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    color: var(--blue-light);
    background: var(--blue-dim);
    border-radius: 6px;
    margin-bottom: 16px;
}

.report-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    margin-left: 8px;
}

.report-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.report-summary {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.report-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-author .author-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--bg-primary);
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ==================== Membership ==================== */
.membership {
    padding: 20px 0 48px;
    background: var(--bg-secondary);
}

.membership-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.tier-card {
    position: relative;
    /* 直向 flex：讓底部按鈕可用 margin-top:auto 貼齊卡片底部。
       三個方案的說明長度不同，唯有如此按鈕才會落在同一水平線上。 */
    display: flex;
    flex-direction: column;
    /* 預設為一般卡片外觀（無金框），游標移入時才出現金框 */
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

/* 游標移入時出現金色外框與金色光暈 */
.tier-card:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
    transform: translateY(-6px);
}

.tier-badge {
    position: absolute;
    /* v1.8.5：橢圓與字級同步放大（原 0.75rem／padding 5px 18px）。
       高度 = 8×2 + 0.95rem × 1.2 ≈ 34px，取一半 17px，
       讓橢圓正好騎在卡片上緣、上下各露出一半。 */
    top: -17px; left: 50%;
    transform: translateX(-50%);
    padding: 8px 26px;
    font-size: 0.95rem; font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-radius: 100px;
    white-space: nowrap;
    box-shadow: var(--shadow-gold);
}

.tier-header { text-align: center; margin-bottom: 28px; }

.tier-name {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 方案說明：靠左對齊、行高放寬。
   原本是短標語（置中），字數變多後置中會參差不齊、不易閱讀。 */
.tier-tagline {
    margin-top: 12px;
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 0 4px;
    text-align: left;
}

/* v1.8.4：三個方案的「特色項目」起點統一對齊。
   三欄並排時卡片寬度固定（.membership-grid 上限 1000px、扣掉內距後約 253px），
   尊榮專案的方案說明在最窄情況下為 4 行。把說明區的最小高度固定為 4 行，
   三個方案的特色項目就會從同一水平線開始（以 VIP總統會員／尊榮專案為基準）。
   單欄堆疊（≤968px）時不需要對齊，套用反而會在 (B)方案 卡片留下空白，故排除。 */
@media (min-width: 969px) {
    .tier-tagline { min-height: calc(4 * 1.7em); }
}

.tier-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}

.price-currency { font-size: 1rem; color: var(--text-secondary); }
.price-amount { font-size: 2.5rem; font-weight: 900; color: var(--gold); }
.price-period { font-size: 0.9rem; color: var(--text-muted); }

/* 「適合資金」標籤：避免訪客把資金門檻誤讀成收費金額 */
.price-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-right: 2px;
}

.tier-features { margin-bottom: 32px; }

.tier-features ul { display: flex; flex-direction: column; gap: 12px; }

.tier-features li {
    font-size: 0.92rem;
    padding-left: 28px;
    position: relative;
    color: var(--text-secondary);
}

.tier-features li.included::before {
    content: '\2713';
    position: absolute; left: 0;
    color: var(--green);
    font-weight: 700;
}

.tier-features li.excluded {
    color: var(--text-muted);
    opacity: 0.5;
}

.tier-features li.excluded::before {
    content: '\2715';
    position: absolute; left: 0;
    color: var(--text-muted);
}

.btn-tier {
    width: 100%;
    /* auto：吸收剩餘空間把按鈕推到卡片底部，三張卡片的按鈕因而對齊。
       與 .tier-features 的 margin-bottom 搭配，確保仍有最小間距。 */
    margin-top: auto;
    padding: 14px;
    color: var(--text-primary);
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.btn-tier:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.btn-tier-primary {
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-color: transparent;
}

.btn-tier-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
    color: var(--bg-primary);
}

/* Membership CTA */
.membership-cta {
    text-align: center;
    margin-top: 40px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.membership-cta a {
    color: var(--gold);
    font-weight: 700;
    font-size: 1.15rem;
    transition: var(--transition);
}

.membership-cta a:hover { text-decoration: underline; }

/* ==================== Trading Strategy ==================== */
.strategy {
    padding: 20px 0 48px;
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.strategy-flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.strategy-step {
    flex: 1;
    min-width: 220px;
    max-width: 320px;
    padding: 24px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition);
    position: relative;
}

.strategy-step:hover {
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: var(--shadow-gold);
}

.step-number {
    font-size: 0.72rem;
    color: var(--gold);
    letter-spacing: 3px;
    margin-bottom: 16px;
    font-weight: 600;
}

.step-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-radius: 50%;
    box-shadow: 0 4px 24px rgba(212, 175, 55, 0.3);
}

.strategy-step h3 {
    font-size: 1.3rem;
    margin-bottom: 4px;
    color: var(--gold);
}

.step-sub {
    font-size: 0.88rem;
    color: var(--blue-light);
    margin-bottom: 10px;
    font-weight: 500;
}

.step-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: left;
}

.strategy-arrow {
    align-self: center;
    font-size: 2.5rem;
    color: var(--gold);
    font-weight: 300;
    min-width: 40px;
}

.strategy-highlight {
    max-width: 984px;
    margin: 0 auto;
    padding: 18px 32px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(33, 150, 243, 0.08));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.strategy-highlight strong { color: var(--gold); }

/* ==================== MBA研究室 ==================== */
.mba-lab {
    padding: 14px 0 34px;
    background: var(--bg-secondary);
}

/* v1.8.9：壓縮區塊高度，讓兩張卡片完整落在同一頁 */
.mba-lab .section-header { margin-bottom: 18px; }
.mba-lab .section-title { font-size: 2.2rem; margin-bottom: 10px; }

.mba-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 760px;
    margin: 0 auto;
}

.mba-card {
    padding: 34px 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    transition: var(--transition);
    text-align: center;
}

.mba-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* 股市MBA 頻道 logo（單一卡片，放大顯示）*/
.mba-logo {
    margin: 0 auto 20px;
    max-width: 340px;
}
.mba-logo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.mba-card h3 {
    font-size: 1.5rem;
    margin-bottom: 14px;
}

.mba-card p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 14px;
}

.mba-yt-desc strong { color: var(--red); }

.mba-yt-link {
    display: inline-block;
    padding: 13px 34px;
    color: var(--text-primary);
    background: var(--gold-dim);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    transition: var(--transition);
}

.mba-yt-link:hover {
    background: rgba(212, 175, 55, 0.25);
    border-color: var(--gold-light);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.25);
}

/* YouTube 連結按鈕：置中 */
.mba-yt-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    max-width: 280px;
    margin: 0 auto;
}

.mba-yt-links .mba-yt-link {
    display: block;
    text-align: center;
}

/* ==================== Footer ==================== */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-soft);
    padding: 60px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    font-size: 1.4rem; font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}

.footer-logo-img {
    height: 88px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    flex-shrink: 0;
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.footer-logo {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;          /* v1.8.9：中文公司全名改白色 */
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    white-space: nowrap;     /* 不折行 */
}

.footer-sub {
    font-size: 0.8rem;
    color: var(--gold);      /* v1.8.9：英文名改金色 */
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;     /* 不折行（原會斷成兩行） */
}

.footer-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer-license-title {
    margin-top: 20px;
    color: var(--text-primary);
}

.footer-license {
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 500;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

.footer-col p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.footer-col h4 {
    font-size: 1rem;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.footer-col ul { display: flex; flex-direction: column; gap: 8px; }

.footer-col li {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.footer-col li a {
    transition: var(--transition);
}

.footer-col li a:hover { color: var(--gold); }

/* 地址不斷行（2026-10-14）；窄機真的放不下時才允許折行 */
.footer-col li.footer-nowrap { white-space: nowrap; }
@media (max-width: 360px) {
    .footer-col li.footer-nowrap { white-space: normal; }
}

.footer-disclaimer {
    padding-top: 32px;
    border-top: 1px solid var(--border-soft);
}

.footer-disclaimer p {
    font-size: 0.9rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.75;
    margin-bottom: 8px;
}

.footer-copyright { text-align: center; }

.footer-admin-link {
    margin-left: 10px;
    font-size: 0.85rem;
    color: #ffffff;
    border: 1px solid var(--border-soft);
    padding: 2px 10px;
    border-radius: 10px;
    transition: var(--transition);
}
.footer-admin-link:hover { color: var(--gold); border-color: var(--gold); }

/* ==================== Modals ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(5, 15, 25, 0.75);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.3s ease;
}

.modal-overlay.active { display: flex; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    /* v1.8.3：高度上限＋自身捲動。
       原本只設 max-width，彈窗內容（登入 552px、申請開通 780px）一旦高於視窗，
       .modal-overlay 的 align-items:center 會讓它「上下同時」被切掉，
       底部的送出鈕就落在畫面外；而 overlay 沒有 overflow，
       使用者無法捲動去搆到按鈕。加上上限後，送出鈕在任何視窗高度都搆得到。
       100dvh 供行動瀏覽器（網址列會改變可視高度）使用，前一行 100vh 為後備。 */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-modal);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 高度上限與捲動已由 .modal 基礎規則提供，此處只需放寬寬度 */
.modal-large { max-width: 800px; }

/* 矮視窗（手機橫向、或開著開發者工具的筆電）：壓縮內距與間距，
   讓送出鈕盡量不必捲動就能看到 */
@media (max-height: 620px) {
    .modal { padding: 24px 20px; }
    .modal-header { margin-bottom: 16px; }
    .modal-header h2 { font-size: 1.3rem; }
    .auth-form { gap: 12px; }
}

/* v1.8.7：會員申請表單（原「免費諮詢」）專屬版面。
   目標 —— 整個彈窗在一般筆電視窗內完整呈現，不產生捲軸。

   做法：
     1) 四個欄位兩欄並排（稱謂在姓名右側）
     2) 內距、欄位間距、輸入框內距全面收斂
     3) 空白的 .form-message 不再固定佔 20px 高度
     4) 矮視窗再壓兩層（@media max-height）
   實測（1440 寬，單位 px）：
     一般            484  → 視窗高 ≥ 532 不出捲軸（約等於瀏覽器視窗 628）
     ≤700px 一層     455  → 視窗高 ≥ 503（瀏覽器視窗 599）
     ≤620px 兩層     400  → 視窗高 ≥ 448（瀏覽器視窗 544）
   捲軸的出現條件是「內容高度 > 100vh - 48px」（48px 為 .modal-overlay 的上下內距）。
   改版前為 629px（瀏覽器視窗需 ≥ 773 才不出捲軸）。
   .modal 基礎規則的 overflow-y 仍保留，僅作為極矮視窗（手機橫向）的最後保險，
   否則送出鈕會落在畫面外、使用者完全搆不到。 */
#signupModal .modal {
    max-width: 660px;
    padding: 22px 32px;
}
#signupModal .modal-header { margin-bottom: 12px; }
#signupModal .modal-header h2 { font-size: 1.35rem; margin-bottom: 4px; }
#signupModal .auth-form { gap: 8px; }
#signupModal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#signupModal .form-group { gap: 4px; }
#signupModal .form-group input,
#signupModal .form-group select { padding: 10px 14px; }
/* 下拉選單要留出右側箭頭的空間（須排在上一行之後才不會被覆寫） */
#signupModal .form-group select { padding-right: 38px; }
/* 空的訊息區不佔高度；有錯誤訊息時才撐開 */
#signupModal .form-message { min-height: 0; }
#signupModal .privacy-notice > summary { padding: 8px 14px; }
#signupModal .privacy-body { max-height: 150px; }
#signupModal .btn-full { margin-top: 2px; padding: 12px; }

/* 矮視窗第一層（瀏覽器視窗高 ≤ 700px）：收內距與間距 */
@media (max-height: 700px) {
    #signupModal .modal { padding: 16px 28px; }
    #signupModal .modal-header { margin-bottom: 8px; }
    #signupModal .auth-form { gap: 6px; }
    #signupModal .privacy-consent { font-size: 0.75rem; }
}

/* 矮視窗第二層（瀏覽器視窗高 ≤ 620px，如 1366×768 筆電）
   再省下副標題與輸入框內距。
   實測：內容高度 484px → 445px，視窗高 ≥ 493px 即不出現捲軸。
   這是刻意的最終取捨 —— 副標題（「留下資料，將有專人為您服務」）
   在矮視窗讓位給「所有欄位與送出鈕同時可見」，因為後者才影響能否完成申請。 */
@media (max-height: 620px) {
    #signupModal .modal { padding: 14px 24px; }
    #signupModal .modal-header p { display: none; }
    #signupModal .modal-header h2 { font-size: 1.2rem; margin-bottom: 0; }
    #signupModal .form-group input,
    #signupModal .form-group select { padding: 8px 12px; }
    #signupModal .form-group select { padding-right: 34px; }
    #signupModal .privacy-notice > summary { padding: 6px 14px; }
    #signupModal .btn-full { padding: 10px; }
}

/* 窄視窗：退回單欄，避免欄位被壓得過窄 */
@media (max-width: 560px) {
    #signupModal .modal { padding: 20px 18px; }
    #signupModal .form-row { grid-template-columns: 1fr; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    font-size: 1.5rem;
    color: var(--text-muted);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
}

.modal-header { text-align: center; margin-bottom: 28px; }
.modal-header h2 { font-size: 1.6rem; margin-bottom: 8px; }
.modal-header p { font-size: 0.9rem; color: var(--text-secondary); }

/* Forms */
.auth-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-group input,
.form-group select {
    padding: 12px 16px;
    font-size: 0.95rem;
    font-family: var(--font);
    /* v1.8.5：明確指定行高，讓 <select> 與 <input> 的框高完全一致，
       兩欄並排時上下緣才會對齊（表單控制項預設為 line-height:normal，高度不一）。 */
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

.form-group input::placeholder { color: var(--text-muted); }

/* 下拉選單（感興趣的方案，v1.8.5）
   1) appearance:none 移除系統箭頭 —— 原生箭頭在深色底上幾乎看不見。
   2) 自繪金色箭頭（inline SVG，不需額外檔案請求）。
   3) option 指定底色，避免 Windows 上展開清單是白底黑字、與網站風格不符。 */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d4af37' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 6px;
    cursor: pointer;
}

.form-group select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* 停留在預設的「請選擇方案」時，文字比照 input 的 placeholder 用弱化色，
   與左側輸入框的視覺層級一致；一旦選了方案就恢復正常文字色。 */
.form-group select:has(option[value=""]:checked) { color: var(--text-muted); }

/* 稱謂（先生／小姐，v1.8.7）
   使用原生 radio 小圓圈，與登入頁「同意個資告知」的勾選框同一套視覺
   （accent-color: var(--gold)），不做大面積金色填底。
   flex:1 讓這一列自動長到與左側姓名輸入框同高，圓圈再垂直置中，
   兩欄並排時就不會一高一低（不必寫死高度）。
   置於 .form-group 內會吃到 .form-group label 的字級與顏色，
   靠「排在檔案較後面」以同特異度覆寫。 */
.radio-row {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 26px;
    min-height: 24px;
}

.radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}

.radio-row label:hover { color: var(--gold); }

.radio-row input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--gold);
    cursor: pointer;
}

.radio-row input[type="radio"]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* 欄位說明文字（v1.6：身分證字號 / 密碼規則） */
.form-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* 個人資料蒐集告知事項（v1.8：個資法第 8 條、第 21 條跨境傳輸告知）
   預設收合，避免諮詢表單過長；點開後可完整閱讀。 */
.privacy-notice {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.privacy-notice > summary {
    cursor: pointer;
    padding: 10px 14px;
    color: var(--gold);
    font-weight: 500;
    list-style: none;
    user-select: none;
}

.privacy-notice > summary::-webkit-details-marker { display: none; }

.privacy-notice > summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 0.2s ease;
}

.privacy-notice[open] > summary::before { content: '▾ '; }

.privacy-notice[open] > summary { border-bottom: 1px solid var(--border-soft); }

.privacy-body {
    padding: 12px 14px 14px;
    max-height: 190px;
    overflow-y: auto;
}

.privacy-body p { margin: 0 0 8px; }
.privacy-body p:last-child { margin-bottom: 0; }
.privacy-body b { color: var(--text-primary); font-weight: 600; }

/* 同意勾選 */
.privacy-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
}

.privacy-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: var(--gold);
    cursor: pointer;
}

/* 密碼欄位 + 顯示／隱藏切換（v1.6.2）
   會員密碼僅 6 位數字，打錯一位就登入失敗，讓使用者能自行核對 */
.pw-field { position: relative; display: block; }
.pw-field input { width: 100%; padding-right: 66px; }

.pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font);
    font-size: 0.75rem;
    color: var(--gold);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: var(--transition);
}
.pw-toggle:hover { background: var(--gold-dim); }
.pw-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.form-message {
    font-size: 0.85rem;
    text-align: center;
    min-height: 20px;
}

.form-message.error { color: var(--red); }
.form-message.success { color: var(--green); }

.auth-switch {
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.auth-switch a {
    color: var(--gold);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.auth-switch a:hover { text-decoration: underline; }

/* Report detail */
.report-detail { padding: 8px; }

.report-detail-header {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-soft);
}

.report-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.report-detail-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.report-detail-body {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.9;
}

.report-detail-body p { margin-bottom: 16px; }

.report-detail-body h3 {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 24px 0 12px;
}

.report-detail-locked {
    text-align: center;
    padding: 40px 20px;
}

.report-detail-locked .lock-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.report-detail-locked h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.report-detail-locked p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.report-detail-pdf {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
}

.report-detail-pdf .pdf-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-download:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 外部連結按鈕 */
.btn-link-report {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.btn-link-report:hover {
    background: var(--gold-dim);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

/* 報告詳情的次要動作按鈕（例如「下載 PDF」）——與主要按鈕同尺寸但為外框樣式 */
.btn-report-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.btn-report-ghost:hover {
    color: var(--text-primary);
    border-color: var(--gold);
    background: var(--gold-dim);
    transform: translateY(-2px);
}

/* PDF 詳情下方的小提示（說明會另開視窗） */
.report-pdf-hint {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* 報告詳情動作按鈕群 */
.report-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

/* 卡片上的「含連結」標記 */
.report-type.report-has-link {
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid var(--border);
}

/* 卡片上的「可閱讀會員等級」標籤（v1.9.11）
   在每張報告卡片的框框內顯示該篇報告對應的會員等級（完整名稱）。
   色彩沿用後台徽章（basic／vip／institutional），讓前後台語彙一致；
   同一帳號有多個等級時，一眼就能分辨哪篇屬於哪個等級。
   ⚠️ 公開報告（總經分析）不加此標籤 → 改顯示綠色「公開閱讀」。 */
.report-type.report-tier {
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-soft);
    font-weight: 600;
}

.report-type.report-tier-basic {
    color: #a9c0dc;
    background: rgba(139, 163, 196, 0.15);
    border: 1px solid rgba(139, 163, 196, 0.35);
}

.report-type.report-tier-vip {
    color: var(--blue-light);
    background: var(--blue-dim);
    border: 1px solid rgba(33, 150, 243, 0.35);
}

.report-type.report-tier-institutional {
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid var(--border);
}

/* 公開報告標記（v1.9.8）：「總經分析」分類不需登入即可閱讀，
   以綠色系區別於金色的「含連結」標記，也呼應後台的「公開」徽章。 */
.report-type.report-public {
    color: #7bd18a;
    background: rgba(76, 175, 80, 0.14);
    border: 1px solid rgba(76, 175, 80, 0.35);
}

/* 鎖頭徽章（v1.9.14）：非自己等級的報告卡片上顯示「🔒 專屬」 */
.report-type.report-lock {
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid var(--border);
    font-weight: 600;
}

/* 鎖頭提示（v1.9.14）：卡片摘要下方的「此報告為 XX 專屬」 */
.report-lock-hint {
    margin: 12px 0 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--gold);
}

.report-lock-hint strong {
    color: var(--gold-light);
    font-weight: 600;
}

/* 報告詳情頁的「公開閱讀」字樣 */
.report-public-label {
    color: #7bd18a;
    font-weight: 600;
}

/* ==================== Toast ==================== */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 3000;
    padding: 14px 28px;
    background: var(--bg-modal);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    white-space: nowrap;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.success { border-color: var(--green); }
.toast.error { border-color: var(--red); }
.toast.info { border-color: var(--blue); }

/* ==================== Responsive ==================== */

/* 1500px 以下：收掉英文副標並縮小選單，確保 logo + 選單 + 動作區
   在單列內放得下（實測 1500px 時可用寬度 1452px，本段合計約 1180px） */
@media (max-width: 1500px) {
    .nav-container { gap: 16px; }
    .logo-text .name-en { display: none; }
    .logo-text .name-cn { font-size: 1.02rem; }
    .nav-menu a { font-size: 1.08rem; padding: 8px 11px; }
    .nav-phone .phone-num { display: none; }
}

/* 1280px 以下：七個選項 + 品牌 + 電話 + 登入鍵已無法單列容納
   （實測需 1180px，1280px 時可用寬度僅 1232px，再窄就會裁掉右側按鈕），
   改為漢堡選單。手機版的尺寸調整仍留在 768px 區塊。 */
@media (max-width: 1280px) {
    .nav-menu {
        position: fixed;
        top: 88px; left: 0; right: 0;
        flex-direction: column;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-soft);
        padding: 16px 24px;
        gap: 4px;
        transform: translateY(-200%);
        transition: transform 0.4s ease;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    .nav-menu.active { transform: translateY(0); }

    .nav-toggle { display: flex; }

    .nav-phone { padding: 8px 10px; }
}

@media (max-width: 968px) {
    .hero-title { font-size: 3rem; }

    .about-top { grid-template-columns: 1fr; gap: 28px; }
    .about-features { grid-template-columns: 1fr 1fr; }

    .teachers-grid { grid-template-columns: 1fr; }
    .reports-grid { grid-template-columns: repeat(2, 1fr); }

    .membership-grid { grid-template-columns: 1fr; max-width: 420px; }
    .mba-card { padding: 26px 22px; }

    .footer-grid { grid-template-columns: 1fr 1fr; }

    .strategy-flow { gap: 8px; }
    .strategy-arrow { font-size: 1.8rem; }
}

@media (max-width: 768px) {
    .nav-container { gap: 8px; padding: 0 16px; }
    /* 品牌區塊必須可壓縮：公司全名長達 15 字，若維持 flex-shrink: 0，
       會把右側的「登入」鍵推出畫面。而 body 有 overflow-x: hidden，
       溢出不會產生捲軸、而是直接被裁掉，所以按鈕會「消失」在畫面外。 */
    .nav-logo { gap: 10px; min-width: 0; flex-shrink: 1; }
    .logo-img { height: 60px; max-width: 140px; }
    .logo-text { min-width: 0; overflow: hidden; }
    .logo-text .name-cn {
        font-size: 0.95rem;
        /* 改為 stretch 才能受父層寬度限制，進而觸發 text-overflow: ellipsis
           （原本 align-self: flex-start 會讓它撐到內容寬度，無法收窄） */
        align-self: stretch;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .logo-text .name-en { font-size: 0.68rem; letter-spacing: 0.8px; }

    /* 選單收合與 .nav-toggle 已上移至 1280px 區塊。
       v1.8.2：登入鍵一律保留在導覽列 —— 原本 .auth-buttons{display:none}
       讓手機訪客完全沒有登入入口（得先開漢堡選單才會出現，而且出現時
       因品牌區塊不可壓縮而被推出畫面外）。 */
    .auth-buttons { display: flex; }
    /* v1.9.10：維持可壓縮（與基礎規則一致）—— 這裡原本是 flex-shrink: 0，
       會讓手機版又變回「溢出就被裁掉」，登出照樣被擠出視窗。 */
    .nav-actions { flex-shrink: 1; min-width: 0; }
    .nav-toggle { flex-shrink: 0; }

    .nav-phone .phone-num { display: none; }

    .hero-title { font-size: 2.5rem; }
    .hero-brand-cn { font-size: 1.05rem; letter-spacing: 2px; text-indent: 2px; margin-bottom: 10px; }
    .hero-subtitle { font-size: 1rem; }
    .hero-actions { flex-direction: column; gap: 12px; }

    .section-title { font-size: 2rem; }

    .about-features { grid-template-columns: 1fr; }

    .teacher-row {
        grid-template-columns: 1fr;
    }
    .teacher-row .teacher-avatar {
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
        min-height: 200px;
    }
    .research-team-grid { grid-template-columns: 1fr; }

    .reports-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; }

    .modal { padding: 28px 20px; }
    /* v1.8.3：移除 .modal-large 的 max-height: 85vh，
       改由 .modal 基礎規則的 calc(100vh - 48px) / calc(100dvh - 48px) 統一處理，
       避免 85vh 覆蓋掉 dvh 後備值（且 85vh 未計入 overlay 的 24px 內距）。 */

    .strategy-flow { flex-direction: column; align-items: center; }
    .strategy-arrow { transform: rotate(90deg); }

    .strategy-step { max-width: 100%; }
}

/* v1.9.10：620px 以下且已登入 → 收掉會員名稱（頭像徽章已顯示姓氏首字），
   只留「等級 ＋ 登出」，確保登出一定留在視窗內。 */
@media (max-width: 620px) {
    body.is-logged-in .user-name { display: none; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2rem; }
    .hero-brand-cn { font-size: 0.92rem; letter-spacing: 1px; text-indent: 1px; }

    .reports-filters { gap: 6px; }
    .filter-btn { padding: 6px 14px; font-size: 0.82rem; }

    .nav-phone { display: none; }

    /* v1.9.10：更窄時連頭像徽章也收掉，只留「等級 ＋ 登出」 */
    body.is-logged-in .user-badge { display: none; }

    .footer-brand { flex-direction: column; align-items: flex-start; }

    /* v1.8.2：品牌全名在窄機上縮小並取消字距，讓 15 字公司名盡量完整顯示
       （空間不足時仍由 768px 區塊的 ellipsis 收尾）。
       .name-en 已於 1500px 斷點隱藏，此處不需重複宣告。 */
    .logo-text .name-cn { font-size: 0.85rem; letter-spacing: 0; }

    /* v1.8.9：底部品牌全名與英文名在窄機縮小，維持單行不折行 */
    .footer-logo { font-size: 1rem; letter-spacing: 0; }
    .footer-sub { font-size: 0.6rem; letter-spacing: 0.2px; }
}

/* ==================== 股市專業插圖（v1.8.9） ====================
   全部為向量 SVG，配色沿用官網變數（紅漲 #ef5350、綠跌 #4caf50、金色 #d4af37）。
   圖檔置於 assets/：hero-chart.svg（首頁 K 線）、step-1~3.svg（策略三步驟）。 */

/* --- ① Hero：AI 照片背景 + 暗色蒙版（v1.8.9）--- */
.hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
/* 蒙版：左側加深（讓中央文字更清楚）、上下也壓暗 */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(10, 25, 41, 0.92) 0%, rgba(10, 25, 41, 0.55) 45%, rgba(10, 25, 41, 0.35) 100%),
        linear-gradient(180deg, rgba(10, 25, 41, 0.55) 0%, rgba(10, 25, 41, 0) 35%, rgba(10, 25, 41, 0.65) 100%);
}

/* --- ③ 關於我們：特色圖示已在主 about 區塊定義 --- */

/* --- ④ 交易策略：上方背景照片（細窄橫帶，標題嵌入）--- */
.strategy-photo {
    position: relative;
    width: 100%;
    height: 160px;
    margin: 0 auto 20px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.strategy-photo img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
.strategy-photo::before {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 25, 41, 0.85) 0%, rgba(10, 25, 41, 0.45) 50%, rgba(10, 25, 41, 0.15) 100%);
    z-index: 1;
}
.strategy-photo-caption {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 0 48px;
    max-width: 60%;
}
.strategy-photo-title {
    font-size: 2.4rem;
    color: #ffffff;
    margin: 0 0 8px;
    line-height: 1.2;
}
.strategy-photo-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin: 0;
}
@media (max-width: 768px) {
    .strategy-photo { height: 130px; margin-bottom: 16px; }
    .strategy-photo-caption { padding: 0 24px; max-width: 80%; }
    .strategy-photo-title { font-size: 1.6rem; }
    .strategy-photo-desc { font-size: 0.9rem; }
}

/* --- ⑥ 交易策略：迷你走勢圖（SVG）--- */
.step-visual {
    position: relative;
    margin: 0 auto 16px;
    padding: 10px 12px 4px;
    background: rgba(10, 25, 41, 0.55);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    transition: var(--transition);
}
.strategy-step:hover .step-visual { border-color: var(--border); }
.step-chart { width: 100%; height: auto; display: block; }
.step-visual .step-icon {
    position: absolute; top: -15px; left: -15px;
    width: 46px; height: 46px; margin: 0;
    font-size: 1.35rem;
    border: 3px solid var(--bg-card);
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35);
}

/* --- 窄機調整 --- */
@media (max-width: 768px) {
    .hero-overlay {
        background:
            linear-gradient(180deg, rgba(10, 25, 41, 0.7) 0%, rgba(10, 25, 41, 0.55) 50%, rgba(10, 25, 41, 0.8) 100%);
    }
}

/* ============================================================================
   PDF 線上閱讀器（v1.9.4，方案 B）
   以 PDF.js 在站內自行把 PDF 畫到 canvas，完全不依賴瀏覽器／系統的 PDF 檢視器。
   原因：
     · Safari（iOS 與 macOS）拒絕對 window.open 開出的視窗導向 blob: URL → 新視窗空白
     · iOS Safari 13 起禁止 <iframe> 載入 PDF
     · LINE／FB／IG 內建瀏覽器多半完全無法顯示 PDF
   ============================================================================ */

.pdf-viewer {
    position: fixed;
    inset: 0;
    z-index: 2200;                 /* 高於 .modal-overlay(2000) 與 .toast */
    display: none;
    flex-direction: column;
    background: #06111d;
}

.pdf-viewer.active { display: flex; }

/* --- 頂部工具列 --- */
.pdf-viewer-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    /* iPhone 瀏海／動態島：加上安全區內距 */
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.pdf-viewer-title {
    flex: 1 1 140px;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-viewer-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 觸控目標一律 40px 以上 */
.pdf-viewer-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.pdf-viewer-btn:hover:not(:disabled) {
    color: var(--gold-light);
    border-color: var(--border);
}

.pdf-viewer-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pdf-viewer-btn.pdf-viewer-download {
    color: var(--gold);
    border-color: var(--border);
}

.pdf-viewer-page {
    min-width: 72px;
    text-align: center;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pdf-viewer-close {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.pdf-viewer-close:hover { color: var(--red); border-color: var(--red); }

/* --- 內容區（可捲動） --- */
.pdf-viewer-body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.pdf-viewer-body canvas {
    display: block;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
    max-width: 100%;
    height: auto;
}

/* 載入中／錯誤訊息 */
.pdf-viewer-msg {
    margin: auto;
    padding: 24px;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

.pdf-viewer-msg .pdf-viewer-msg-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
}

.pdf-viewer-msg .pdf-viewer-msg-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 載入動畫 */
.pdf-viewer-spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 3px solid var(--border-soft);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: pdfSpin 0.9s linear infinite;
}

@keyframes pdfSpin { to { transform: rotate(360deg); } }

/* --- 窄機：工具列換行，頁碼與縮放縮小 --- */
@media (max-width: 640px) {
    .pdf-viewer-bar { padding: 8px 10px; gap: 6px; }
    .pdf-viewer-title { flex: 1 1 100%; order: -1; font-size: 0.86rem; }
    .pdf-viewer-body { padding: 10px; }
}