/* ────────────────────────────────────────────────────────────
   健康養身運動 — 水墨意境樣式表
   （由 app/docs/health-exercise-mockup.html 的 <style> 區塊抽離，
    並補上實際運作用的 canvas/骨架/邊界多邊形 class）
   ──────────────────────────────────────────────────────────── */

:root {
    --ink-black: #1a1a1a;
    --ink-deep: #2c2a28;
    --ink-mid: #4a4742;
    --ink-light: #8a857e;
    --paper-cream: #f5f0e4;
    --paper-aged: #e8dfc9;
    --paper-warm: #ede4d0;
    --seal-red: #a8372c;
    --seal-deep: #7a2a23;
    --jade-green: #7a8b6f;
    --jade-deep: #5a6b52;
    --mist-gray: #b8b0a0;
    --gold-accent: #b8955a;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--paper-cream);
    font-family: 'Noto Serif TC', serif;
    color: var(--ink-deep);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    margin: 0;
}

/* 宣紙肌理 */
.paper-texture {
    background-color: #f5f0e4;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(139, 119, 80, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(139, 119, 80, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(180, 160, 120, 0.03) 0%, transparent 60%),
        repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(139, 119, 80, 0.015) 2px, rgba(139, 119, 80, 0.015) 4px);
    position: relative;
}

.paper-texture::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 10% 20%, rgba(100, 80, 50, 0.08) 0%, transparent 30%),
        radial-gradient(ellipse at 90% 80%, rgba(100, 80, 50, 0.06) 0%, transparent 35%),
        radial-gradient(ellipse at 30% 90%, rgba(120, 100, 70, 0.04) 0%, transparent 25%);
    pointer-events: none;
    z-index: 0;
}

/* 書法字體 */
.font-calligraphy { font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', serif; letter-spacing: 0.05em; }
.font-brush       { font-family: 'ZCOOL XiaoWei', serif; letter-spacing: 0.08em; }
.font-body        { font-family: 'Noto Serif TC', serif; }

.ink-title {
    font-family: 'Ma Shan Zheng', serif;
    color: var(--ink-black);
    text-shadow: 0 0 1px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
}

/* 印章 */
.seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--seal-red);
    color: var(--paper-cream);
    font-family: 'ZCOOL XiaoWei', serif;
    font-weight: 500;
    border-radius: 4px;
    position: relative;
    box-shadow:
        inset 0 0 0 2px var(--seal-red),
        inset 0 0 0 3px rgba(245, 240, 228, 0.4),
        inset 0 0 0 4px var(--seal-red),
        0 1px 2px rgba(0,0,0,0.1);
    transform: rotate(-2deg);
}

.seal::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(245, 240, 228, 0.15) 0%, transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(245, 240, 228, 0.1) 0%, transparent 25%);
    border-radius: 4px;
    pointer-events: none;
}

/* 中央分隔線（水墨筆觸） */
.ink-divider {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(26, 26, 26, 0.1) 5%,
        rgba(26, 26, 26, 0.8) 20%,
        rgba(26, 26, 26, 0.9) 50%,
        rgba(26, 26, 26, 0.8) 80%,
        rgba(26, 26, 26, 0.1) 95%,
        transparent 100%);
    filter: blur(0.3px);
    pointer-events: none;
    z-index: 5;
}

.ink-divider::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 10%;
    bottom: 10%;
    width: 11px;
    background:
        radial-gradient(ellipse 2px 20px at 50% 10%, rgba(26,26,26,0.4), transparent),
        radial-gradient(ellipse 3px 40px at 50% 35%, rgba(26,26,26,0.5), transparent),
        radial-gradient(ellipse 2px 30px at 50% 65%, rgba(26,26,26,0.4), transparent),
        radial-gradient(ellipse 2px 25px at 50% 85%, rgba(26,26,26,0.3), transparent);
    filter: blur(1.5px);
}

/* Card（仿 shadcn Card，水墨風） */
.card-ink {
    background: rgba(245, 240, 228, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(74, 71, 66, 0.2);
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 2px rgba(74, 71, 66, 0.04), 0 2px 8px rgba(74, 71, 66, 0.06);
}

.card-ink::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    background-image:
        linear-gradient(135deg, rgba(74, 71, 66, 0.15) 0%, transparent 2%, transparent 98%, rgba(74, 71, 66, 0.15) 100%),
        linear-gradient(45deg, rgba(74, 71, 66, 0.15) 0%, transparent 2%, transparent 98%, rgba(74, 71, 66, 0.15) 100%);
    pointer-events: none;
    border-radius: 2px;
}

/* Button（仿 shadcn Button，水墨風） */
.btn-ink {
    font-family: 'ZCOOL XiaoWei', serif;
    background: var(--ink-deep);
    color: var(--paper-cream);
    padding: 10px 24px;
    border-radius: 2px;
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    border: 1px solid var(--ink-deep);
    cursor: pointer;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.btn-ink:hover    { background: var(--ink-black); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.2); }
.btn-ink:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-ink-outline {
    background: transparent;
    color: var(--ink-deep);
    border: 1px solid var(--ink-deep);
    padding: 9px 23px;
    border-radius: 2px;
    font-family: 'ZCOOL XiaoWei', serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-ink-outline:hover { background: var(--ink-deep); color: var(--paper-cream); }

/* 運動項目卡 */
.exercise-card {
    background: rgba(245, 240, 228, 0.7);
    border: 1px solid rgba(74, 71, 66, 0.15);
    border-radius: 2px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
.exercise-card:hover { background: rgba(245, 240, 228, 0.95); border-color: var(--ink-deep); transform: translateX(4px); }
.exercise-card.active { background: var(--ink-deep); color: var(--paper-cream); border-color: var(--ink-black); }
.exercise-card.active .exercise-subtitle { color: var(--paper-aged); }
.exercise-card.locked { opacity: 0.45; cursor: not-allowed; background: rgba(232, 223, 201, 0.35); }
.exercise-card.locked:hover { transform: none; border-color: rgba(74, 71, 66, 0.15); }
.exercise-subtitle { color: var(--ink-light); font-size: 12px; letter-spacing: 0.05em; }

/* 模組徽章：區分 3D 動作示範（pose-overlay） vs 角度模式（angle） */
.exercise-module-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
    border-radius: 10px;
    background: rgba(74, 71, 66, 0.1);
    color: var(--ink-light);
    border: 1px solid rgba(74, 71, 66, 0.2);
}
.exercise-card.module-angle .exercise-module-badge {
    background: rgba(168, 55, 44, 0.12);
    color: #8a3225;
    border-color: rgba(168, 55, 44, 0.3);
}
.exercise-card.active .exercise-module-badge {
    background: rgba(245, 240, 228, 0.18);
    color: var(--paper-aged);
    border-color: rgba(245, 240, 228, 0.3);
}

/* 狀態指示燈 */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.green { background: #5a7d5a; box-shadow: 0 0 8px rgba(90, 125, 90, 0.6); animation: pulse-green 2s ease-in-out infinite; }
.status-dot.red   { background: var(--seal-red); box-shadow: 0 0 8px rgba(168, 55, 44, 0.6); }
.status-dot.gray  { background: var(--ink-light); }

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 8px rgba(90, 125, 90, 0.6); }
    50%      { box-shadow: 0 0 16px rgba(90, 125, 90, 0.9); }
}

/* 3D 人體模型底座 */
.model-stage {
    background:
        radial-gradient(ellipse at center bottom, rgba(74, 71, 66, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse at center, rgba(245, 240, 228, 0.4) 0%, transparent 60%);
}

/* 中央點十字標記 */
.center-marker { position: absolute; width: 40px; height: 40px; border: 1px dashed var(--seal-red); border-radius: 50%; }
.center-marker::before, .center-marker::after { content: ''; position: absolute; background: var(--seal-red); opacity: 0.7; }
.center-marker::before { left: 50%; top: 20%; bottom: 20%; width: 1px; transform: translateX(-50%); }
.center-marker::after  { top: 50%; left: 20%; right: 20%; height: 1px; transform: translateY(-50%); }

/* 進度條 */
.progress-ink { height: 3px; background: rgba(74, 71, 66, 0.15); border-radius: 2px; overflow: hidden; position: relative; }
.progress-ink-fill { height: 100%; background: linear-gradient(90deg, var(--ink-mid) 0%, var(--ink-deep) 100%); border-radius: 2px; transition: width 0.4s ease; }

/* 數據徽章 */
.badge-ink {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-family: 'Noto Sans TC', sans-serif;
    background: rgba(74, 71, 66, 0.1);
    color: var(--ink-deep);
    border-radius: 2px;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.badge-jade { background: rgba(122, 139, 111, 0.2); color: var(--jade-deep); }
.badge-seal { background: rgba(168, 55, 44, 0.15); color: var(--seal-deep); }

/* 臨床紀錄未存的警報橫幅（只有主 2D 頁 health_exercise.html 有 #save-alert）
   刻意**不用** .badge-ink：那是 11px 的數據徽章，塞不下警告文字、長輩也看不清，
   而且會被運動狀態流（預備／正在進行／已暫停）無條件蓋掉。
   這裡走大字級 + 高對比 + 大點擊面積（長輩觸控）。 */
.save-alert {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;                       /* 窄螢幕換行，不得截斷警告文字 */
    margin-bottom: 20px;
    padding: 14px 20px;
    background: rgba(168, 55, 44, 0.12);
    border: 2px solid var(--seal-deep);
    border-radius: 4px;
    color: var(--seal-deep);
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 18px;                       /* 對比：徽章是 11px */
    font-weight: 600;
    line-height: 1.6;
}
.save-alert[hidden] { display: none; }     /* 覆蓋 display:flex，否則 hidden 屬性會失效 */
.save-alert-btn {
    flex: 0 0 auto;
    min-height: 48px; padding: 10px 28px;  /* 48px = 觸控最小點擊尺寸 */
    background: var(--seal-deep); color: #fff;
    border: none; border-radius: 4px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 17px; font-weight: 600;
    cursor: pointer;
}
.save-alert-btn:hover { filter: brightness(1.1); }
.save-alert-btn[hidden] { display: none; }

/* 豎排文字 */
.vertical-text { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.5em; }

/* 時計 */
.timer-display { font-family: 'Ma Shan Zheng', serif; font-size: 48px; color: var(--ink-black); letter-spacing: 0.05em; line-height: 1; }

/* 呼吸動畫 */
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } }
.breathe { animation: breathe 4s ease-in-out infinite; }

/* 山水背景 SVG 容器 */
.mountain-bg { position: absolute; top: 0; right: 0; width: 55%; height: 100%; opacity: 0.06; pointer-events: none; z-index: 0; }

.content-wrapper { position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────
   實作用：鏡頭 canvas / 骨架 / 邊界多邊形疊圖
   ──────────────────────────────────────────────────────────── */

/* 鏡頭容器 */
.camera-container {
    position: relative;
    flex: 1;
    min-height: 420px;
    border-radius: 2px;
    overflow: hidden;
    background: linear-gradient(180deg, #2a2825 0%, #3a3632 50%, #2a2825 100%);
}

/* 鏡頭影像 <img> */
.camera-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.92) contrast(1.02);
}

/* 骨架 & 邊界多邊形疊圖 <canvas> */
.camera-overlay-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* xbot 透明放大輪廓疊圖（位於影像之上、骨架之下）
   保持 1:1 aspect、以 height 填滿容器、中央置中 —
   與 .camera-video 的 object-fit:cover 行為一致，
   確保 silhouette 與 image 的 720×720 frame 座標系對齊。 */
.camera-silhouette-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    aspect-ratio: 1 / 1;
    width: auto;
    max-width: none;
    pointer-events: none;
    z-index: 1;
}

/* 右側常駐火柴人導師（Card 0） */
.angle-demo-figure-host {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 168px;
}
.angle-demo-figure-host svg {
    height: 168px;
    width: auto;
    max-width: 100%;
    display: block;
}
.angle-demo-figure-prompt {
    text-align: center;
    font-size: 12px;
    color: #a8372c;
    min-height: 18px;
    margin-top: 4px;
    letter-spacing: 1px;
}

/* 火柴人導師在即時影像上的半透明投影（angle 模式；長輩對照示範用）
   仿易筋經 silhouette：置中、放大到罩住測試者，讓長輩把身體對進投影裡。 */
.angle-demo-projection {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 98%;
    aspect-ratio: 200 / 355;
    opacity: 0.45;
    pointer-events: none;
    z-index: 4;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.45));
    transition: color 0.25s ease;
}
.angle-demo-projection svg {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
}

/* 透明區塊大小調整滑桿（水墨風） */
.silhouette-size-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 86px;
    height: 3px;
    background: linear-gradient(
        to right,
        rgba(122, 139, 111, 0.28),
        rgba(122, 139, 111, 0.72)
    );
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    vertical-align: middle;
}
.silhouette-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--jade-deep);
    border: 1px solid var(--paper-cream);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.silhouette-size-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.silhouette-size-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--jade-deep);
    border: 1px solid var(--paper-cream);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}
.silhouette-size-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px rgba(122, 139, 111, 0.35);
}

/* 四角瞄準框 */
.camera-corner { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.camera-corner-tl { top: 8px; left: 8px; border-top: 1px solid rgba(200,190,170,0.6); border-left: 1px solid rgba(200,190,170,0.6); }
.camera-corner-tr { top: 8px; right: 8px; border-top: 1px solid rgba(200,190,170,0.6); border-right: 1px solid rgba(200,190,170,0.6); }
.camera-corner-bl { bottom: 8px; left: 8px; border-bottom: 1px solid rgba(200,190,170,0.6); border-left: 1px solid rgba(200,190,170,0.6); }
.camera-corner-br { bottom: 8px; right: 8px; border-bottom: 1px solid rgba(200,190,170,0.6); border-right: 1px solid rgba(200,190,170,0.6); }

/* 骨架顏色 Token（由 JS 讀取，繪製到 Canvas） */
.skeleton-color-in   { --color: #5a6b52; } /* 玉深綠：合規 */
.skeleton-color-out  { --color: #a8372c; } /* 印章紅：超出範圍 */

/* 3D 模型容器 */
.human-model-container {
    position: relative;
    flex: 1;
    min-height: 420px;
    border-radius: 2px;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(245,240,228,0.5) 0%, rgba(220,210,190,0.3) 100%);
}

.human-model-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* 資訊面板（鏡頭左上 / 右下） */
.info-panel-dark {
    background: rgba(30, 28, 24, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(200, 190, 170, 0.2);
    border-radius: 2px;
    padding: 8px 12px;
    color: var(--paper-cream);
}
.info-panel-light {
    background: rgba(245, 240, 228, 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(74, 71, 66, 0.25);
    border-radius: 2px;
    padding: 10px 14px;
}

/* 叮嚀卡片（師叮嚀右欄） */
.tip-card {
    padding: 10px 12px;
    border-left: 2px solid var(--ink-deep);
    border-radius: 2px;
    background: rgba(26, 26, 26, 0.04);
    margin-bottom: 10px;
}
.tip-card.warning { border-left-color: rgba(168, 55, 44, 0.5); background: rgba(168, 55, 44, 0.05); }
.tip-card.muted   { border-left-color: rgba(74, 71, 66, 0.4); background: transparent; }
.tip-card .tip-title { font-family: 'ZCOOL XiaoWei', serif; font-size: 14px; color: var(--ink-black); margin-bottom: 4px; }
.tip-card.warning .tip-title { color: var(--seal-deep); }
.tip-card .tip-body  { color: var(--ink-mid); font-size: 12px; line-height: 1.6; }

/* 水墨按鈕圓角變體（視角/速度切換） */
.chip-btn {
    width: 30px; height: 30px;
    border: 1px solid rgba(74, 71, 66, 0.35);
    background: transparent;
    color: var(--ink-deep);
    font-family: 'Noto Serif TC', serif;
    font-size: 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.chip-btn:hover  { background: rgba(74, 71, 66, 0.1); }
.chip-btn.active { background: var(--ink-deep); color: var(--paper-cream); }

.speed-btn {
    padding: 5px 10px;
    font-size: 11px;
    border: 1px solid rgba(74, 71, 66, 0.3);
    background: transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.speed-btn:hover  { background: rgba(245, 240, 228, 0.8); }
.speed-btn.active { background: var(--ink-deep); color: var(--paper-cream); }

/* 播放控制主按鈕 */
.play-btn-large {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--ink-black);
    border: 2px solid var(--ink-mid);
    color: var(--paper-cream);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.play-btn-large:hover { background: #000; transform: translateY(-1px); }

.play-btn-small {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(74, 71, 66, 0.35);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.play-btn-small:hover { background: rgba(74, 71, 66, 0.1); }

/* 載入態 overlay */
.model-loading-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245, 240, 228, 0.7);
    color: var(--ink-mid);
    font-family: 'ZCOOL XiaoWei', serif;
    font-size: 14px;
    z-index: 5;
}
.model-loading-overlay.hidden { display: none; }

/* 鏡頭就緒倒數遮罩 */
.camera-warmup-mask {
    position: absolute; inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(26, 26, 26, 0.55) 0%, rgba(26, 26, 26, 0.85) 75%);
    backdrop-filter: blur(3px);
    color: var(--paper-cream);
    text-align: center;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.camera-warmup-mask.hidden { opacity: 0; display: none; }
.camera-warmup-mask.fading { opacity: 0; }

.warmup-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 48px;
    border: 1px solid rgba(245, 240, 228, 0.25);
    border-radius: 3px;
    background: rgba(26, 26, 26, 0.35);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    min-width: 260px;
}
.warmup-title {
    font-size: 20px;
    letter-spacing: 0.3em;
    color: rgba(245, 240, 228, 0.85);
}
.warmup-countdown {
    font-size: 96px;
    line-height: 1;
    color: var(--paper-cream);
    text-shadow: 0 0 18px rgba(245, 240, 228, 0.35);
    animation: warmup-pulse 1s ease-in-out infinite;
}
.warmup-hint {
    font-size: 13px;
    color: rgba(245, 240, 228, 0.7);
    letter-spacing: 0.18em;
}
.warmup-dots { display: inline-flex; gap: 8px; }
.warmup-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(245, 240, 228, 0.5);
    animation: warmup-dot 1.2s ease-in-out infinite;
}
.warmup-dots span:nth-child(2) { animation-delay: 0.2s; }
.warmup-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes warmup-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.06); opacity: 0.85; }
}
@keyframes warmup-dot {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-3px); }
}

/* 針對長輩的文字放大基礎設定 */
.wellness-readable { font-size: 16px; line-height: 1.7; }

/* 保持 main/header 最大寬度一致 */
.content-max { max-width: 1800px; margin: 0 auto; }

/* ────────────────────────────────────────────────────────────
   銀髮十八式 Angle 模式 Demo 風 UI
   （shadcn 設計原則：語意 token + variant + composition）
   只在 body[data-health-mode="angle"] 啟用，不影響 pose-overlay
   ──────────────────────────────────────────────────────────── */

:root {
    /* Demo 大字級（高齡友善） */
    --text-prompt-display: 36px;   /* 雙手向上推 */
    --text-prompt-body:    18px;   /* 請慢慢抬高手臂 */
    --text-metric-large:   44px;   /* 4/8 次 */
    --text-metric-angle:   34px;   /* 168° */
    --text-card-title:     14px;
    --text-card-label:     11px;

    /* Demo 鏡頭區深底色 */
    --camera-bg-deep:      #1c1815;
    --camera-bg-mid:       #2a2520;
    --overlay-card-bg:     rgba(20, 18, 15, 0.88);
    --overlay-card-bd:     rgba(245, 240, 228, 0.18);

    /* Demo 卡片暖白 */
    --metric-card-bg:      rgba(252, 248, 238, 0.95);
    --metric-card-bd:      rgba(74, 71, 66, 0.18);
    --metric-card-shadow:  0 1px 3px rgba(74, 71, 66, 0.06), 0 4px 14px rgba(74, 71, 66, 0.07);

    /* 評分色（jade=良好 / gold=可調 / seal=待修） */
    --eval-good:  #4a7c4a;
    --eval-mid:   #b8955a;
    --eval-warn:  #a8372c;
}

/* angle 模式整體偏深底鏡頭區，paper-texture 維持 */
body[data-health-mode="angle"] .camera-container {
    background: linear-gradient(180deg, var(--camera-bg-deep) 0%, var(--camera-bg-mid) 50%, var(--camera-bg-deep) 100%);
}

/* ── Demo Card 變體（shadcn-style composition）─────────────── */

.angle-metric-card {
    background: var(--metric-card-bg);
    border: 1px solid var(--metric-card-bd);
    border-radius: 4px;
    padding: 16px 18px;
    box-shadow: var(--metric-card-shadow);
    position: relative;
    transition: border-color 0.2s ease;
}
.angle-metric-card .amc-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.angle-metric-card .amc-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Noto Serif TC', serif;
    font-size: var(--text-card-title);
    font-weight: 600;
    color: var(--ink-deep);
    letter-spacing: 0.08em;
}
.angle-metric-card .amc-title-icon {
    width: 14px; height: 14px;
    color: var(--seal-red);
}
.angle-metric-card .amc-body {
    display: flex; flex-direction: column; gap: 8px;
}
.angle-metric-card .amc-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px;
}
.angle-metric-card .amc-row-label { color: var(--ink-mid); }

/* Eval pill：良好/可調/待修 */
.eval-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    background: rgba(74, 124, 74, 0.12);
    color: var(--eval-good);
    border: 1px solid rgba(74, 124, 74, 0.25);
}
.eval-pill.mid  { background: rgba(184, 149, 90, 0.12); color: var(--eval-mid);  border-color: rgba(184, 149, 90, 0.25); }
.eval-pill.warn { background: rgba(168, 55, 44, 0.12);  color: var(--eval-warn); border-color: rgba(168, 55, 44, 0.30);  }

/* ── 鏡頭區 demo 疊加層 ──────────────────────────────────── */

/* 動作指引：右側中段大字 */
.angle-prompt-overlay {
    position: absolute;
    top: 22%;
    right: 16px;
    max-width: 240px;
    background: var(--overlay-card-bg);
    border: 1px solid var(--overlay-card-bd);
    border-radius: 4px;
    padding: 14px 18px;
    color: var(--paper-cream);
    backdrop-filter: blur(6px);
    z-index: 4;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.angle-prompt-overlay .apo-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(245, 240, 228, 0.6);
    margin-bottom: 6px;
}
.angle-prompt-overlay .apo-display {
    font-family: 'Noto Serif TC', 'Ma Shan Zheng', serif;
    font-size: var(--text-prompt-display);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 4px;
    color: var(--paper-cream);
}
.angle-prompt-overlay .apo-body {
    font-size: var(--text-prompt-body);
    color: rgba(245, 240, 228, 0.82);
    line-height: 1.5;
}

/* 動作品質：右側下段 */
.angle-quality-overlay {
    position: absolute;
    top: calc(22% + 150px);
    right: 16px;
    max-width: 240px;
    background: var(--overlay-card-bg);
    border: 1px solid var(--overlay-card-bd);
    border-radius: 4px;
    padding: 12px 18px;
    color: var(--paper-cream);
    backdrop-filter: blur(6px);
    z-index: 4;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.angle-quality-overlay .aqo-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(245, 240, 228, 0.6);
    margin-bottom: 6px;
}
.angle-quality-overlay .aqo-headline {
    font-size: 18px;
    font-weight: 600;
    color: var(--paper-cream);
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
}
.angle-quality-overlay .aqo-headline.good   { color: #94d28e; }
.angle-quality-overlay .aqo-headline.mid    { color: #e9c891; }
.angle-quality-overlay .aqo-headline.warn   { color: #f0a89e; }
.angle-quality-overlay .aqo-body {
    font-size: 13px;
    color: rgba(245, 240, 228, 0.78);
    line-height: 1.5;
}

/* 鏡頭左下：mini 半圓 gauges（姿勢穩定 / 動作流暢） */
.angle-mini-gauges {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: flex; gap: 14px;
    background: rgba(20, 18, 15, 0.7);
    border: 1px solid rgba(245, 240, 228, 0.15);
    border-radius: 4px;
    padding: 10px 14px;
    backdrop-filter: blur(6px);
    z-index: 4;
}
.angle-mini-gauges .mg-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.angle-mini-gauges .mg-arc { width: 48px; height: 28px; }
.angle-mini-gauges .mg-arc-track   { fill: none; stroke: rgba(245, 240, 228, 0.2); stroke-width: 4; stroke-linecap: round; }
.angle-mini-gauges .mg-arc-fill    { fill: none; stroke: #d4a96a; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray 0.3s ease; }
.angle-mini-gauges .mg-percent     { font-size: 14px; font-weight: 600; color: var(--paper-cream); line-height: 1; margin-top: -4px; }
.angle-mini-gauges .mg-label       { font-size: 10px; color: rgba(245, 240, 228, 0.65); letter-spacing: 0.1em; }

/* 鏡頭右下：鏡頭切換群組 */
.angle-camera-pickbox {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex; align-items: center; gap: 10px;
    background: rgba(20, 18, 15, 0.7);
    border: 1px solid rgba(245, 240, 228, 0.15);
    border-radius: 4px;
    padding: 8px 12px;
    backdrop-filter: blur(6px);
    z-index: 4;
}
.angle-camera-pickbox .acp-label {
    font-size: 11px; letter-spacing: 0.15em;
    color: rgba(245, 240, 228, 0.65);
}
.angle-camera-pickbox select {
    background: rgba(245, 240, 228, 0.1);
    border: 1px solid rgba(245, 240, 228, 0.25);
    color: var(--paper-cream);
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
    max-width: 160px;
}
.angle-camera-pickbox select:disabled { opacity: 0.5; }
.angle-camera-pickbox .acp-redetect {
    width: 24px; height: 24px;
    border-radius: 3px;
    border: 1px solid rgba(245, 240, 228, 0.3);
    background: transparent;
    color: var(--paper-cream);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.angle-camera-pickbox .acp-redetect:hover { background: rgba(245, 240, 228, 0.1); }

/* 鏡頭左上：連線狀態 */
.angle-camera-status-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(20, 18, 15, 0.7);
    border: 1px solid rgba(245, 240, 228, 0.15);
    border-radius: 4px;
    padding: 8px 12px;
    color: var(--paper-cream);
    backdrop-filter: blur(6px);
    z-index: 4;
    font-size: 12px;
    letter-spacing: 0.05em;
}
.angle-camera-status-overlay .acs-line { display: flex; align-items: center; gap: 6px; }

/* 鏡頭右上：LIVE indicator */
.angle-live-indicator {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(168, 55, 44, 0.92);
    color: var(--paper-cream);
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    z-index: 4;
    box-shadow: 0 2px 8px rgba(168, 55, 44, 0.35);
}
.angle-live-indicator .ali-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--paper-cream);
    animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

/* ── 大字 metric / gauge typography ───────────────────────── */

.angle-big-num {
    font-family: 'Noto Serif TC', serif;
    font-size: var(--text-metric-large);
    font-weight: 700;
    color: var(--seal-deep);
    line-height: 1;
    letter-spacing: 0.02em;
}
.angle-big-num .abn-divider { color: var(--ink-light); margin: 0 4px; font-weight: 300; }
.angle-big-num .abn-target  { color: var(--ink-mid); font-size: 0.5em; font-weight: 500; }

.angle-joint-card {
    text-align: center;
    padding: 12px 8px;
}
.angle-joint-card .ajc-label {
    font-size: 12px;
    color: var(--ink-mid);
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.angle-joint-card .ajc-value {
    font-family: 'Noto Serif TC', serif;
    font-size: var(--text-metric-angle);
    font-weight: 700;
    color: var(--ink-black);
    line-height: 1;
}
.angle-joint-card .ajc-range {
    font-size: 11px;
    color: var(--ink-light);
    margin-top: 4px;
    letter-spacing: 0.05em;
}

/* 進度條（demo 紅色漸變） */
.angle-progress-bar {
    height: 8px;
    background: rgba(74, 71, 66, 0.12);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.angle-progress-bar .apb-fill {
    height: 100%;
    background: linear-gradient(90deg, #c64a3d 0%, #a8372c 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* 完成次數卡的書法 char 與紅章 stamp */
.angle-calligraphy-board {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background:
        linear-gradient(rgba(74, 71, 66, 0.12), rgba(74, 71, 66, 0.12)) center/1px 100%   no-repeat,
        linear-gradient(rgba(74, 71, 66, 0.12), rgba(74, 71, 66, 0.12)) center/100% 1px no-repeat,
        rgba(252, 248, 238, 0.6);
    border: 1px dashed rgba(74, 71, 66, 0.3);
    border-radius: 4px;
}
.angle-calligraphy-board > svg { width: 100%; height: 100%; }
.angle-calligraphy-stamp {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 26px; height: 26px;
    background: var(--seal-red);
    color: var(--paper-cream);
    border-radius: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Ma Shan Zheng', serif;
    font-size: 16px;
    transform: rotate(-3deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Header（angle-mode 大標題列） ───────────────────────── */

.angle-header-block {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 12px 0 24px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(74, 71, 66, 0.12);
}
.angle-header-title {
    display: flex; align-items: baseline; gap: 14px;
    margin-bottom: 6px;
}
.angle-header-name {
    font-family: 'Ma Shan Zheng', 'Noto Serif TC', serif;
    font-size: 56px;
    line-height: 1;
    color: var(--ink-black);
    letter-spacing: 0.04em;
}
.angle-header-stage {
    font-family: 'Noto Serif TC', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--seal-red);
    letter-spacing: 0.1em;
}
.angle-header-subtitle {
    font-size: 14px;
    color: var(--ink-mid);
    letter-spacing: 0.18em;
    margin-top: 2px;
}
.angle-header-stamp {
    width: 58px; height: 58px;
    background: var(--seal-red);
    color: var(--paper-cream);
    border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'ZCOOL XiaoWei', serif;
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
    transform: rotate(-3deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ── 左欄編號樣式（angle 模式） ───────────────────────────── */

body[data-health-mode="angle"] .exercise-card.module-angle {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 12px 14px;
}
body[data-health-mode="angle"] .exercise-card.module-angle::before {
    content: attr(data-action-num);
    grid-column: 1;
    grid-row: 1 / span 2;
    font-family: 'Noto Serif TC', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-light);
    letter-spacing: 0.06em;
}
body[data-health-mode="angle"] .exercise-card.module-angle.active {
    background: rgba(168, 55, 44, 0.04);
    border: 2px solid var(--seal-red);
    color: var(--ink-black);
}
body[data-health-mode="angle"] .exercise-card.module-angle.active::before {
    color: var(--seal-red);
    font-weight: 700;
}
body[data-health-mode="angle"] .exercise-card.module-angle.active::after {
    content: '';
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--seal-red);
    box-shadow: 0 0 6px rgba(168, 55, 44, 0.5);
}
body[data-health-mode="angle"] .exercise-card.module-angle .exercise-module-badge {
    display: none;  /* angle 模式下徽章變多餘，編號就足夠 */
}

/* ── 底部控制條 angle 模式群組 ────────────────────────────── */

.angle-bottom-icon-group {
    display: flex; align-items: center; gap: 14px;
}
.angle-bottom-icon-btn {
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ink-mid);
    transition: color 0.2s ease;
}
.angle-bottom-icon-btn:hover { color: var(--seal-red); }
.angle-bottom-icon-btn .abi-icon { width: 22px; height: 22px; }
.angle-bottom-icon-btn .abi-label { font-size: 10px; letter-spacing: 0.15em; }

.angle-bottom-text-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 3px;
    border: 1px solid rgba(74, 71, 66, 0.3);
    background: transparent;
    color: var(--ink-deep);
    font-family: 'Noto Serif TC', serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.angle-bottom-text-btn:hover { background: rgba(74, 71, 66, 0.08); }
.angle-bottom-text-btn.danger {
    background: var(--seal-red);
    color: var(--paper-cream);
    border-color: var(--seal-red);
}
.angle-bottom-text-btn.danger:hover {
    background: var(--seal-deep);
    border-color: var(--seal-deep);
}

/* ── 動作示範 demo overlay ──────────────────────────────── */

.angle-demo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 15, 0.55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: ado-fade-in 0.25s ease;
}

@keyframes ado-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.angle-demo-overlay .ado-card {
    background: var(--paper-cream);
    border: 1px solid var(--ink-mid);
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.4);
    padding: 32px 40px;
    min-width: 480px;
    max-width: 600px;
    text-align: center;
    position: relative;
}

.angle-demo-overlay .ado-card::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(135deg, transparent, rgba(168, 55, 44, 0.15), transparent);
    border-radius: 8px;
    pointer-events: none;
}

.angle-demo-overlay .ado-header {
    display: flex; align-items: baseline; justify-content: center; gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(74, 71, 66, 0.18);
}

.angle-demo-overlay .ado-tag {
    display: inline-block;
    background: var(--seal-red);
    color: var(--paper-cream);
    padding: 4px 12px;
    font-size: 13px;
    letter-spacing: 0.2em;
    border-radius: 3px;
    font-family: 'ZCOOL XiaoWei', serif;
}

.angle-demo-overlay .ado-title {
    font-family: 'Ma Shan Zheng', serif;
    font-size: 32px;
    color: var(--ink-black);
    letter-spacing: 0.05em;
}

.angle-demo-overlay .ado-body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    height: 320px;
}

.angle-demo-overlay .ado-body svg {
    width: 200px;
    height: 320px;
    display: block;
}

.angle-demo-overlay .ado-prompt {
    font-family: 'Noto Serif TC', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--seal-deep);
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    min-height: 36px;
}

.angle-demo-overlay .ado-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.angle-demo-overlay .ado-counter {
    flex: 1;
    text-align: left;
    font-size: 13px;
    color: var(--ink-mid);
    letter-spacing: 0.15em;
    font-family: 'Noto Serif TC', serif;
}

.angle-demo-overlay .ado-skip-btn {
    background: transparent;
    color: var(--ink-mid);
    border: 1px solid var(--ink-mid);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Noto Serif TC', serif;
    letter-spacing: 0.1em;
    transition: all 0.2s ease;
}
.angle-demo-overlay .ado-skip-btn:hover {
    background: rgba(74, 71, 66, 0.08);
}

.angle-demo-overlay .ado-start-btn {
    background: var(--seal-red);
    color: var(--paper-cream);
    border: 1px solid var(--seal-red);
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Noto Serif TC', serif;
    letter-spacing: 0.15em;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(168, 55, 44, 0.25);
}
.angle-demo-overlay .ado-start-btn:hover {
    background: var(--seal-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(168, 55, 44, 0.35);
}

/* angle 模式：camera 區單欄全寬 + 隱藏右半 mode 容器與分隔裝飾 */
body[data-health-mode="angle"] .camera-mode-grid {
    grid-template-columns: 1fr !important;
}
body[data-health-mode="angle"] .right-mode-container,
body[data-health-mode="angle"] .ink-divider,
body[data-health-mode="angle"] .center-mode-decor {
    display: none !important;
}

/* angle 模式：主 grid col-span 重排 2/6/4（從 2/8/2 加寬右欄） */
body[data-health-mode="angle"] main .grid.grid-cols-12 > section.col-span-8 {
    grid-column: span 6 / span 6 !important;
}
body[data-health-mode="angle"] main .grid.grid-cols-12 > aside.col-span-2.angle-mode-only {
    grid-column: span 4 / span 4 !important;
}

/* angle 模式：camera section 改為 flex 置中容器，內含 4:3 容器 */
body[data-health-mode="angle"] .camera-section {
    padding: 18px 22px;
    align-items: stretch;
    justify-content: flex-start;
}

/* angle 模式：camera-container 鎖 1:1
 * 後端 video_frame 實際是 720×720 方形（不是 640×480），匹配 1:1 才能讓 keypoints 對齊
 * 否則 cover-fit 會縱向裁掉約 90px、骨架繪製座標系跟影像不重合 */
body[data-health-mode="angle"] .camera-section > .camera-container {
    aspect-ratio: 1 / 1;
    width: auto;
    height: 100%;
    max-width: 100%;
    flex: 0 1 auto;
    margin: 0 auto;
}

/* 1:1 鏡頭區（523×523）下，動作指引縮小避免擋人體 */
body[data-health-mode="angle"] .angle-prompt-overlay {
    right: 16px;
    top: 14%;
    max-width: 200px;
    padding: 10px 14px;
}
body[data-health-mode="angle"] .angle-prompt-overlay .apo-display {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 4px;
}
body[data-health-mode="angle"] .angle-prompt-overlay .apo-body {
    font-size: 13px;
    line-height: 1.45;
}
body[data-health-mode="angle"] .angle-prompt-overlay .apo-label {
    font-size: 10px;
    margin-bottom: 4px;
}

/* angle 模式：右欄 4 卡放寬 + 字級加大 */
body[data-health-mode="angle"] aside.angle-mode-only .angle-metric-card {
    padding: 20px 22px;
}
body[data-health-mode="angle"] aside.angle-mode-only .amc-title {
    font-size: 16px;
    letter-spacing: 0.1em;
}
body[data-health-mode="angle"] aside.angle-mode-only .amc-row {
    font-size: 14px;
    padding: 4px 0;
}
body[data-health-mode="angle"] aside.angle-mode-only .angle-big-num {
    font-size: 52px;
}
body[data-health-mode="angle"] aside.angle-mode-only .angle-joint-card .ajc-value {
    font-size: 38px;
}
body[data-health-mode="angle"] aside.angle-mode-only .angle-joint-card .ajc-label {
    font-size: 14px;
}
body[data-health-mode="angle"] aside.angle-mode-only .angle-joint-card .ajc-range {
    font-size: 12px;
}

/* 書法 board 大幅放大（78→150） */
body[data-health-mode="angle"] aside.angle-mode-only .angle-calligraphy-board {
    width: 150px !important;
    height: 150px !important;
}
body[data-health-mode="angle"] aside.angle-mode-only .angle-calligraphy-stamp {
    width: 36px;
    height: 36px;
    font-size: 22px;
    bottom: 8px;
    right: 8px;
}

/* eval-pill 在右欄稍微加大 */
body[data-health-mode="angle"] aside.angle-mode-only .eval-pill {
    font-size: 13px;
    padding: 3px 12px;
}

/* angle 模式：catalog 標題用「動 · 作 · 選 · 單」 */
body[data-health-mode="angle"] #catalog-list > div:first-child + div + div + div + div + div + div + div + div + div + div + div + div + div {
    /* fallback no-op */
}