/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 应用容器 */
.app-container {
    display: flex;
    height: 100vh;
    padding: 20px;
    gap: 20px;
}

/* 左侧边栏 */
.ui-sidebar {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 仪表盘 */
.dashboard {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    backdrop-filter: blur(10px);
}

/* 标题 */
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.title span {
    font-size: 20px;
    font-weight: bold;
    color: #38bdf8;
}

.guide-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #38bdf8;
    background: transparent;
    color: #38bdf8;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

.guide-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

/* 模式切换器 */
.mode-switcher {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 5px;
    position: relative;
    margin-bottom: 15px;
}

.mode-option {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    z-index: 1;
}

.mode-option.active {
    color: #0f172a;
    font-weight: bold;
}

.mode-indicator {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(33.33% - 3px);
    height: calc(100% - 10px);
    background: #38bdf8;
    border-radius: 8px;
    transition: transform 0.3s ease;
    z-index: 0;
}

/* 计数显示 */
.count-display {
    font-size: 72px;
    font-weight: 900;
    text-align: center;
    color: #00e5ff;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
    margin: 20px 0;
    transition: all 0.3s ease;
}

.count-display.count-flash {
    color: #ffffff;
    text-shadow: 0 0 30px #ffffff, 0 0 60px #00e5ff;
    transform: scale(1.1);
}

/* 难度控制 */
.difficulty-control {
    margin: 15px 0;
}

.difficulty-label {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 8px;
}

.difficulty-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    outline: none;
    -webkit-appearance: none;
}

.difficulty-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #38bdf8;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* 心率区域 */
.heart-rate-section {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.heart-rate-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.heart-rate-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
}

.heart-icon {
    font-size: 24px;
    animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.connect-btn {
    padding: 8px 16px;
    border: 1px solid #38bdf8;
    background: transparent;
    color: #38bdf8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.connect-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

.age-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
}

.age-input input {
    width: 60px;
    padding: 5px;
    border: 1px solid rgba(56, 189, 248, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #e2e8f0;
    border-radius: 4px;
    text-align: center;
}

.hr-zone-label {
    text-align: center;
    margin-top: 10px;
    padding: 5px;
    background: rgba(56, 189, 248, 0.1);
    border-radius: 6px;
    font-size: 12px;
    color: #38bdf8;
}

/* 指标面板 */
.metrics {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    margin-top: 15px;
}

.metrics div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.metric-value {
    color: #00e5ff;
    font-weight: bold;
}

/* 信息区域 */
.info-section {
    margin-top: 15px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #94a3b8;
}

.info-emoji {
    font-size: 18px;
}

.highlight {
    color: #38bdf8;
    font-weight: bold;
}

/* 进度面板 */
.progress-panel {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    flex: 1;
    overflow-y: auto;
}

.progress-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.progress-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    margin-bottom: 15px;
}

.progress-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(56, 189, 248, 0.1);
}

.progress-day.completed {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: white;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #94a3b8;
}

/* 右侧区域 */
.right-section {
    flex: 1;
    display: flex;
    gap: 20px;
}

/* 视频区域 */
.video-section {
    flex: 1;
    position: relative;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(56, 189, 248, 0.3);
}

.video-section video,
.video-section .output_canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* 核心修复：完整显示 16:9 画布，拒绝裁剪边缘 */
}

/* HUD 计数器 */
.hud-counter {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 120px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.15);
    text-shadow: 0 0 30px rgba(0, 229, 255, 0.3);
    z-index: 10;
    transition: all 0.2s ease;
}

.hud-counter.pop {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 50px rgba(0, 229, 255, 0.8);
    transform: scale(1.2);
}

/* 警告信息 */
.warning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(239, 68, 68, 0.9);
    color: white;
    padding: 20px 40px;
    border-radius: 12px;
    font-size: 24px;
    font-weight: bold;
    display: none;
    z-index: 100;
}

.heart-rate-warning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(239, 68, 68, 0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 200;
}

.heart-rate-warning.show {
    display: flex;
}

.warning-text {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.warning-message {
    font-size: 24px;
    margin-bottom: 10px;
}

.warning-instruction {
    font-size: 18px;
    opacity: 0.8;
}

/* AI 教练区域 */
#ai-coach-section {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(56, 189, 248, 0.2);
}

#ai-coach-section h3 {
    text-align: center;
    color: #fbbf24;
    margin-bottom: 15px;
    font-size: 18px;
}

/* 赛博教练实时字幕 */
.coach-subtitles {
    /* 覆盖原有字幕位置 - 绝对定位悬浮在教练图片上 */
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1.4;
    
    /* 极清赛博冰蓝特效 */
    color: #ffffff;
    text-shadow:
        0 0 2px #ffffff,
        0 0 8px #00e5ff,  /* 核心冰蓝 */
        0 0 15px #00e5ff,
        0 0 25px #00e5ff;
        
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0; /* 默认隐藏 */
    transform: translateY(10px); /* 默认微下沉 */
    z-index: 10;
}

/* 触发显示时的动画类 */
.coach-subtitles.show {
    opacity: 1;
    transform: translateY(0);
}

/* 模态框 */
.guide-modal,
.report-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.guide-content,
.report-content {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 20px;
    padding: 30px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border: 2px solid rgba(56, 189, 248, 0.3);
    position: relative;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(56, 189, 248, 0.3);
    background: transparent;
    color: #38bdf8;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

/* 里程碑提示 */
#milestone-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #0f172a;
    padding: 20px 40px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    z-index: 1000;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 40px rgba(251, 191, 36, 0.4);
}

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

/* 危险脉冲效果 */
.danger-pulse {
    animation: dangerPulse 1s infinite;
}

@keyframes dangerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
}

/* 休息计时器 */
.rest-timer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.95);
    z-index: 500;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.rest-timer-display {
    font-size: 120px;
    font-weight: 900;
    color: #10b981;
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
    margin-bottom: 30px;
}

.rest-timer-display.warning {
    color: #fbbf24;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}

.rest-timer-display.danger {
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
    animation: timerPulse 0.5s infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.rest-timer-controls {
    display: flex;
    gap: 20px;
}

.rest-timer-btn {
    padding: 15px 30px;
    border: 2px solid #38bdf8;
    background: transparent;
    color: #38bdf8;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rest-timer-btn:hover {
    background: #38bdf8;
    color: #0f172a;
}

/* 独立情绪互动蒙版 (全息对讲舱) */
.reaction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.reaction-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* 16:9 横向全息投影框 */
.reaction-content {
    position: relative;
    width: 850px;
    max-width: 90vw;
    aspect-ratio: 16 / 9; /* 宽屏电影感 */
    background: radial-gradient(circle at 30% 50%, rgba(30, 41, 59, 1) 0%, rgba(0, 0, 0, 1) 80%);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 229, 255, 0.2); /* 冰蓝环境光 */
    border: 1px solid rgba(0, 229, 255, 0.4);
    display: flex; /* 开启左右灵活布局 */
    align-items: center;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reaction-overlay.show .reaction-content {
    transform: scale(1);
}

/* 左半边：教练立绘 */
.reaction-gif {
    width: 45%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%; /* 焦点上移，对准脸部 */
    /* 神级特效：右边缘透明渐隐，让人物完美融入黑色背景 */
    -webkit-mask-image: linear-gradient(to right, black 65%, transparent 100%);
    mask-image: linear-gradient(to right, black 65%, transparent 100%);
}

/* 右半边：交互式字幕 */
#reaction-subtitles {
    position: static; /* 解除原本的底部锁定 */
    width: 55%;
    height: 100%;
    padding: 18% 50px 0 10px; /* 顶部下压18%，让第一行字精准对齐教练的眼睛/嘴巴 */
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 靠上排布 */
    align-items: flex-start; /* 靠左对齐 */
    text-align: left; /* 文字向左排版 */
    font-size: 32px;
    line-height: 1.6;
    letter-spacing: 2px;
    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #00e5ff,
        0 0 25px #00e5ff,
        0 0 50px #00e5ff; /* 强化冰蓝锐利发光感 */
}

/* --- 赛博全息启动引导屏 --- */
.boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.boot-screen.hidden {
    opacity: 0;
    pointer-events: none;
}
.boot-title {
    color: #ffffff;
    font-size: 72px;
    font-family: 'Segoe UI', Impact, sans-serif;
    letter-spacing: 8px;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
}
.boot-subtitle {
    color: #00e5ff;
    font-size: 24px;
    letter-spacing: 6px;
    animation: cyber-blink 1.5s infinite;
}
.boot-hint {
    color: #64748b;
    font-size: 16px;
    margin-top: 40px;
    letter-spacing: 2px;
}
@keyframes cyber-blink {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px #00e5ff; }
    50% { opacity: 0.3; text-shadow: none; }
}

/* --- 教练上半区容器 --- */
.coach-avatar-container {
    flex: 1;
    min-height: 0;
    background: radial-gradient(circle at center, rgba(30,41,59,0.8) 0%, #000 100%);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; /* 从 flex-end 改为 center，让图像整体居中 */
    overflow: hidden;
}
#ai-coach-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心魔法：绝对填满，裁剪掉多余边缘，消除黑边 */
    object-position: center top; /* 焦点微调靠上，保证头部不被裁掉 */
    transform: none; /* 移除之前强加的拉伸代码 */
}

/* --- 动态训练计划面板 --- */
.workout-plan-container {
    flex: 0 0 auto;
    margin-top: 15px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 12px;
    padding: 15px;
}
.plan-header {
    color: #e2e8f0;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}
.plan-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.plan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    color: #64748b; /* 默认置灰 (未做) */
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.plan-item .set-name { font-weight: bold; }
.plan-item .set-reps { font-size: 14px; }

/* 状态：正在进行 (冰蓝呼吸闪烁) */
.plan-item.active {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    animation: active-pulse 2s infinite;
}
@keyframes active-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.2); }
    50% { box-shadow: 0 0 20px rgba(0, 229, 255, 0.6); border-color: #00e5ff; }
}

/* 状态：已完成 (荧光绿常亮) */
.plan-item.completed {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
}
.plan-item.completed::after {
    content: '✅';
    font-size: 14px;
    margin-left: 8px;
}

/* =========================================
   终极版式重构：1V1 镜像对决布局
   ========================================= */

/* 1. 极限压缩左侧控制面板 */
.ui-sidebar {
    flex: 0 0 280px !important;
    max-width: 280px !important;
}

/* 2. 释放右侧教练舱，与摄像头平分天下 */
#ai-coach-section {
    flex: 1 !important; /* 解除原本的 340px 封印 */
    max-width: none !important;
}

/* 3. 稍微让摄像头区域占主导 (比例大概 1.2 : 1) */
.right-section .video-section {
    flex: 1.2 !important;
}

/* 4. 完美修复教练被裁切问题 (核心) */
.coach-avatar-container {
    background: #000000 !important; /* 使用纯黑背景，吸收由于比例不同产生的边缘 */
    align-items: center !important;
}
#ai-coach-img {
    width: 100% !important;
    height: 100% !important;
    /* 从 cover(裁切) 改回 contain(包含)，保证动作完整性 */
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important; /* 移除任何放大的特效 */
}

/* 控制组样式 */
.control-group {
    margin-bottom: 20px;
}

.control-group label {
    display: block;
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 赛博风格下拉菜单 */
.cyber-select {
    width: 100%;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #00e5ff 50%),
                      linear-gradient(135deg, #00e5ff 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px),
                        calc(100% - 15px) calc(1em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

.cyber-select:hover {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.cyber-select:focus {
    outline: none;
    border-color: #00e5ff;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4);
}

.cyber-select option {
    background: #0f172a;
    color: #e2e8f0;
    padding: 10px;
}

/* 计数显示 */
.count-display {
    font-size: 64px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    color: #00e5ff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    font-family: 'Digital', monospace;
}

/* 连接按钮 */
.connect-btn {
    background: linear-gradient(135deg, #00e5ff, #0ea5e9);
    color: #0f172a;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

.connect-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.4);
}

.connect-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 229, 255, 0.3);
}

/* --- VisionOS 极简毛玻璃控制组件 (Glassmorphism) --- */
.control-group {
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.03); /* 极淡的白色叠加层 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08); /* 高光描边 */
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}
.control-group label {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.cyber-select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2); /* 内部采用更深的半透明压住视觉 */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* 定制银色下拉箭头 */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22rgba(255,255,255,0.7)%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px top 50%;
    background-size: 12px auto;
}
.cyber-select:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}
.cyber-select option {
    background: #1e293b; /* 还原原生菜单背景色防止文字看不清 */
    color: #ffffff;
}

/* --- 全新 HUD 悬浮层样式 --- */
.hud-bar {
    position: absolute;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
}

.top-bar {
    top: 20px;
    display: flex;
    justify-content: flex-start;
    padding-left: 20px;
}

.bottom-bar {
    bottom: 20px;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
}

.hud-box {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

.hud-title {
    color: #00e5ff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

.hud-data {
    color: #e2e8f0;
    font-size: 14px;
    font-family: monospace;
    line-height: 1.4;
}

.hr-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

#ecg-canvas {
    width: 250px;
    height: 60px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.hr-info {
    text-align: right;
}

#hud-hr-val {
    color: #10b981;
    font-size: 24px;
    font-weight: bold;
}

#hud-hr-status {
    color: #94a3b8;
    font-size: 12px;
    margin-top: 4px;
}

/* =========================================
   DOM 版 HUD 面甲样式 (占据上下黑边)
   ========================================= */
.hud-bar {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    z-index: 50;
    display: flex;
    pointer-events: none; /* 穿透点击，不影响视频 */
}
.hud-bar.top-bar { top: 0; justify-content: space-between; align-items: flex-start; }
.hud-bar.bottom-bar { bottom: 0; justify-content: flex-end; }

.hud-box {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    border-radius: 12px;
    padding: 15px 20px;
    pointer-events: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.hud-title { color: #00e5ff; font-weight: bold; font-size: 16px; margin-bottom: 10px; }
.hud-data { color: #e2e8f0; font-family: monospace; font-size: 15px; line-height: 1.8; }

.hr-box {
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px !important;
}
.hr-info { text-align: right; min-width: 120px; }
#hud-hr-val { font-size: 32px; font-weight: 900; font-family: 'Segoe UI', Tahoma, sans-serif; }
#hud-hr-status { font-size: 14px; font-weight: bold; margin-top: 5px; }

/* =========================================
   修复：组间休息全息舱完整样式
   ========================================= */
.rest-timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(15, 23, 42, 0.85);
    padding: 50px 80px;
    border-radius: 24px;
    box-shadow: 0 0 50px rgba(0, 229, 255, 0.15);
    border: 1px solid rgba(0, 229, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.rest-timer-content {
    display: flex;
    align-items: center;
    gap: 80px; /* 强制左右分列 */
    margin-bottom: 40px;
}

/* 教练立绘区 */
.rest-timer-coach .rest-coach-img {
    max-height: 420px;
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.3));
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.rest-timer-coach .rest-coach-img:hover {
    transform: scale(1.05) translateY(-10px);
}

/* 倒计时数字区 */
.rest-timer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 250px;
}

.rest-timer-title {
    color: #e2e8f0;
    font-size: 32px;
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* 恢复发光进度条 */
.rest-timer-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    margin-top: -10px;
}

.rest-timer-progress {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    width: 100%;
    transition: width 1s linear, background-color 0.3s;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
}
.rest-timer-progress.warning { background: #fbbf24; box-shadow: 0 0 15px rgba(251, 191, 36, 0.8); }
.rest-timer-progress.danger { background: #ef4444; box-shadow: 0 0 15px rgba(239, 68, 68, 0.8); }

/* 修复按钮过小问题 (精准匹配 HTML 的类名) */
.rest-control-btn {
    padding: 16px 45px;
    border: 2px solid #00e5ff;
    background: rgba(15, 23, 42, 0.6);
    color: #00e5ff;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
}
.rest-control-btn:hover {
    background: #00e5ff;
    color: #0f172a;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.6);
    transform: translateY(-2px);
}
.rest-pause-btn.paused {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
}

/* --- 极简心率面板样式 --- */
.hr-box-simple {
    text-align: right;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hr-info-simple #hud-hr-val {
    font-size: 36px;
    font-weight: 900;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    line-height: 1;
    text-shadow: 0 0 15px currentColor; /* 颜色光晕 */
}
.hr-info-simple #hud-hr-status {
    font-size: 15px;
    font-weight: bold;
    margin-top: 8px;
    letter-spacing: 1px;
}

/* 彻底屏蔽旧的底栏防止残留干扰 */
.hud-bar.bottom-bar, #ecg-canvas {
    display: none !important;
}

/* === 终极视觉：左上角双子星仪表盘并排 === */

/* 1. 强制顶部面板靠左，并加入模块间距 */
.hud-bar.top-bar {
    justify-content: flex-start !important; /* 取消原来的分散对齐，全部吸附到左边 */
    gap: 20px !important; /* 两个模块之间保持 20px 的呼吸间距 */
    align-items: stretch !important; /* 魔法属性：强制同行内的所有盒子高度等高 */
}

/* 2. 统一盒子的最小宽度和内部居中 */
.hud-bar.top-bar .hud-box {
    min-width: 180px !important; /* 强制统一宽度 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 内容垂直居中 */
}

/* 3. 将心率文字改为靠左对齐，与左侧关节雷达的排版风格完全统一 */
.hr-box-simple {
    text-align: left !important;
    align-items: flex-start !important;
}

/* === 修复：专业战报弹窗比例与溢出问题 === */
#report-modal .guide-content {
    padding: 20px !important;
    overflow-x: hidden !important; /* 彻底消灭横向滚动条 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#report-canvas {
    width: 100% !important; /* 强制适应容器宽度 */
    max-width: 600px !important; /* 限制最大宽度，保证比例协调 */
    height: auto !important; /* 根据宽度等比缩放高度 */
    display: block !important;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- 飞向右侧面板的转场动画 --- */
.reaction-content.fly-to-right {
    transform: translateX(35vw) scale(0.1) !important; /* 向右平移并极度缩小 */
    opacity: 0 !important; /* 渐隐溶解 */
    transition: all 0.8s cubic-bezier(0.5, 0, 0.2, 1) !important;
}