/* ==========================================================================
   ⚠️  CRITICAL: LEGACY ASSET (FROZEN) / 遗留资产（已冻结）
   ==========================================================================
   
   [ STRATEGY: STRANGLER FIG PATTERN / 绞杀植物模式 ]

   ⛔️ STOP! READ BEFORE EDITING / 编辑前必读
   
   1. DO NOT ADD NEW CSS HERE / 严禁在此添加新样式
      - All new features/components MUST go to `static/css/modules/`.
      - 所有新功能组件的样式必须写在 `modules/` 目录下的独立文件中。

   2. MAINTENANCE ONLY / 仅限维护
      - This file is for backward compatibility (Global Layout, Resets).
      - You are ONLY allowed to edit this file to:
        a. Fix critical global layout bugs (e.g., .stage grid width).
        b. Remove code (when migrating logic to modules).
        c. Resolve global style conflicts.

   3. MIGRATION GOAL / 最终目标
      - Ideally, code should be moved OUT of this file, not IN.
   
   ========================================================================== */

:root {
    /* --- 核心变量 --- */
    --bg-deep: #070A13;
    
    /* 面板与玻璃拟态 */
    --glass-panel: rgba(20, 20, 20, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --blur-strength: 12px;

    /* 字体颜色 */
    --text-main: #ffffff;
    --text-dim: #888;
    
    /* 地图滤镜 */
    --map-filter: invert(1) opacity(0.8);

    /* --- 颜色系统 --- */
    --accent-cyan: #00f3ff;  /* 主题色 */
    --accent-rgb: 0, 243, 255; 
    --accent-gold: #ffd700;  /* P1 / 冠军 */
    --accent-green: #00ff9d; /* PB / 刷新 */
    --accent-purple: #b026ff;/* SB / 紫段 */
    --accent-red: #ff3333;   /* 错误 / 关闭 */
    --accent-blue: #007bff;  /* 进站 */
    
    /* 对比模式颜色 */
    --comp-red: #b41468;
    --comp-blue: #22529b;
}

/* 全局重置 */
* { box-sizing: border-box; user-select: none; margin: 0; padding: 0; }

/* === [布局骨架] === */
body { 
    margin: 0; background: var(--bg-deep); color: var(--text-main); 
    font-family: 'Inter', sans-serif; overflow: hidden;
    display: grid; 
    grid-template-rows: 64px 1fr 64px; /* 顶栏 | 主舞台 | 底栏 */

    width: 100vw; height: 100vh; 
}

/* --- 1. Header (顶部栏) --- */
header {
    background: var(--glass-panel); backdrop-filter: blur(var(--blur-strength));
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center; justify-content: space-between; 
    padding: 0 32px; z-index: 20; grid-row: 1;
}
.brand { font-weight: 900; font-size: 24px; letter-spacing: 1px; color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.1); }
.brand span { color: var(--accent-cyan); }

/* 直播状态指示器 */
.live-badge { 
    display: flex; align-items: center; gap: 6px; 
    font-size: 12px; font-weight: 800; color: var(--accent-green); 
    text-shadow: 0 0 10px rgba(0,255,157,0.3); 
    cursor: pointer; transition: all 0.2s ease;
}
.live-badge:hover { filter: brightness(1.3); transform: scale(1.05); }
.live-dot { width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 8px var(--accent-green); animation: pulse 1.5s infinite; transition: background 0.3s, box-shadow 0.3s; }
.live-badge.paused { color: var(--accent-gold); text-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
.live-badge.paused .live-dot { background: var(--accent-gold); box-shadow: none; animation: none; opacity: 0.6; }

/* --- 2. Main Stage (中间区域) --- */
.stage { 
    display: grid; 
    grid-template-columns: 600px 1fr; /* 左侧列表 | 右侧地图 */
    overflow: hidden; height: 100%; min-height: 0; 
    grid-row: 2;
}

/* [左侧] 排行榜容器 */
.lb-panel { 
    background: var(--glass-panel); 
    backdrop-filter: blur(var(--blur-strength)); 
    border-right: 1px solid var(--glass-border); 
    display: flex; flex-direction: column; 
    z-index: 10; height: 100%; min-height: 0;
}

/* [右侧] 地图容器 */
.map-panel { 
    position: relative; 
    background-size: 40px 40px; 
    background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); 
    background-position: center; 
    display: flex; justify-content: center; align-items: center; 
    overflow: hidden; box-shadow: inset 0 0 100px rgba(0,0,0,0.8); 
    min-width: 0; min-height: 0;
}

/* --- 3. Tape Box (底部栏) --- */
.tape-box { 
    background: var(--glass-panel); 
    backdrop-filter: blur(var(--blur-strength)); 
    border-top: 1px solid var(--glass-border); 
    position: relative; 
    display: flex; align-items: center; 
    padding: 0 60px; z-index: 20; 
    grid-row: 3; grid-column: 1 / -1; width: 100%;
}
.tape-track-line { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; position: relative; }
.tape-track-line::before { content:'START'; position:absolute; left:-45px; top:-6px; font-size:10px; font-weight:800; color: var(--text-dim); }
.tape-track-line::after { content:'FINISH'; position:absolute; right:-45px; top:-6px; font-size:10px; font-weight:800; color: var(--text-dim); }

/* === [排行榜组件] === */

/* 表格列定义 */
.lb-grid { display: grid; align-items: center; gap: 6px; }
.lb-grid.cols-2 { grid-template-columns: 26px 1fr 36px 44px 48px 48px 68px; }
.lb-grid.cols-3 { grid-template-columns: 26px 1fr 36px 44px 48px 48px 48px 68px; }

.lb-header { 
    padding: 16px 10px; font-size: 11px; font-weight: 700; color: var(--text-dim); 
    background: rgba(0,0,0,0.3); border-bottom: 1px solid var(--glass-border); 
    text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
}

.lb-container { 
    flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; 
    display: flex; flex-direction: column; 
}
.lb-container::-webkit-scrollbar { width: 4px; }
.lb-container::-webkit-scrollbar-track { background: transparent; }
.lb-container::-webkit-scrollbar-thumb { background: transparent; transition: background 0.3s; border-radius: 2px; }
.lb-container:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
#lb-online-list { display: flex; flex-direction: column; width: 100%; }

/* 分组标题 */
.group-header { 
    padding: 8px 10px; font-size: 11px; font-weight: 800; 
    color: var(--accent-cyan); background: rgba(var(--accent-rgb), 0.08); 
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15); border-top: 1px solid rgba(255, 255, 255, 0.05); 
    letter-spacing: 1px; text-transform: uppercase; 
    display: flex; justify-content: space-between; align-items: center; 
}
.group-header.offline { color: #666; background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); }
.group-header.clickable { cursor: pointer; transition: background 0.2s; }

/* [V53.0] 通用表头 Hover 效果 */
.group-header:hover { 
    background: rgba(var(--accent-rgb), 0.15); 
    color: var(--accent-cyan) !important; 
    border-color: rgba(var(--accent-rgb), 0.3);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
    cursor: pointer; 
}
.toggle-icon { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #666; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-icon.collapsed { transform: rotate(-90deg); }

/* --- 车手行 (Row) --- */
.row { 
    padding: 0 !important; /* [Fix] 强制归零，防止叠加 */
    border-bottom: 1px solid rgba(255,255,255,0.02); 
    border-left: 2px solid transparent; transition: background 0.2s ease, border-color 0.2s ease; 
    cursor: pointer; position: relative; overflow: hidden; 
}

/* [通用 Hover] (0.08 透明度优化) */
.row:hover { 
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 0%, transparent 100%); 
    border-left: 2px solid var(--accent-cyan); 
}
/* 扫光动画 */
.row::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%); transform: skewX(-25deg); pointer-events: none; }
.row:hover::after { animation: glare 0.6s ease-in-out; }

/* 离线状态 */
.row.offline { opacity: 0.5; filter: grayscale(0.6); background: rgba(255,255,255,0.01); }
.row.offline .top-speed { color: #666; font-weight: normal; } 
.row.offline .sector { color: #777; }
.row.offline .time { color: #bbb; font-weight: 700; }

/* --- 特殊状态行 (高优先级) --- */

/* P1 状态 */
.row.p1 { 
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.08) 0%, transparent 100%); 
    border-left: 2px solid var(--accent-gold); 
}
.row.p1:hover { 
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.25) 0%, transparent 100%) !important; 
    border-left: 2px solid var(--accent-gold) !important; 
}
.row.p1 .pos { color: var(--accent-gold); text-shadow: 0 0 10px rgba(255,215,0,0.4); }

/* 缠斗状态 */
.row.battle { 
    border-left: 2px solid #ff4500 !important; 
    background: linear-gradient(90deg, rgba(255, 69, 0, 0.15) 0%, transparent 100%) !important; 
}
.row.battle .pos { color: #ff4500 !important; text-shadow: 0 0 8px rgba(255, 69, 0, 0.4); }

/* 超越状态 */
.row.overtake { 
    background: linear-gradient(90deg, rgba(0, 255, 157, 0.15) 0%, transparent 100%) !important; 
    border-left: 2px solid var(--accent-green) !important; 
}
.row.overtake .pos { 
    color: var(--accent-green) !important; 
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.4) !important; 
}

/* 对比状态 */
.row.comp-red { opacity: 1 !important; filter: none !important; background: linear-gradient(90deg, rgba(255, 51, 51, 0.15) 0%, transparent 100%) !important; border-left: 2px solid var(--comp-red) !important; }
.row.comp-red .pos, .row.comp-red .time { color: var(--comp-red) !important; text-shadow: 0 0 10px rgba(255, 51, 51, 0.4) !important; }
.row.comp-red .select-box { border-color: var(--comp-red) !important; background-color: var(--comp-red) !important; }

.row.comp-blue { opacity: 1 !important; filter: none !important; background: linear-gradient(90deg, rgba(0, 136, 255, 0.15) 0%, transparent 100%) !important; border-left: 2px solid var(--comp-blue) !important; }
.row.comp-blue .pos, .row.comp-blue .time { color: var(--comp-blue) !important; text-shadow: 0 0 10px rgba(0, 136, 255, 0.4) !important; }
.row.comp-blue .select-box { border-color: var(--comp-blue) !important; background-color: var(--comp-blue) !important; }

.row.comp-red .name, .row.comp-blue .name, .row.comp-red .car, .row.comp-blue .car { color: #fff !important; text-shadow: none !important; font-weight: 700 !important; }

/* 单元格样式 */
.cell-c { text-align: center; } .cell-l { text-align: left; } .cell-r { text-align: right; }

/* [Sync Fix] 同步 leaderboard.css 的高度修复 */
.cell-c, .cell-l, .cell-r, .driver-box {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 5px;
    padding-right: 5px;
}

.off-20 { transform: translateX(-20px); } .off-8 { transform: translateX(-8px); } .off-10 { transform: translateX(-10px); } 
.pos { font-family: 'JetBrains Mono'; font-weight: 700; font-size: 14px; color: var(--text-dim); }
.driver-box { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-right: 5px; } 
.name { font-weight: 700; font-size: 13px; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; padding-bottom: 1px; display: flex; align-items: center; }
.car { font-size: 10px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; display: flex; align-items: center; gap: 4px; }
.car span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-badge { width: 14px; height: 14px; max-width: 14px; max-height: 14px; object-fit: contain; opacity: 0.8; flex-shrink: 0; }
.sector, .time, .top-speed { font-family: 'JetBrains Mono'; font-variant-numeric: tabular-nums; }
.sector { font-size: 10px; color: var(--text-dim); display: flex; align-items: center; justify-content: flex-end; }
.time { font-size: 12px; font-weight: 700; color: var(--accent-cyan); }
.top-speed { font-size: 10px; color: var(--accent-gold); }

/* 徽章与选择框 */
.pit-badge { display: inline-flex; align-items: center; justify-content: center; height: 10px; padding: 0 2px; background: var(--accent-blue); color: #fff; font-size: 7px; font-weight: 800; border-radius: 2px; margin-left: 4px; vertical-align: middle; }
.s-badge { padding: 1px 4px; margin-right: -4px; border-radius: 3px; font-weight: normal; line-height: 1; min-width: 40px; text-align: right; transition: all 0.2s ease; color: inherit; background: transparent; }
.row:hover .s-badge.g { background-color: var(--accent-green); color: #000; }
.row:hover .s-badge.p { 
    /* [V62.2 Fix] 强制提升紫色优先级，防止被绿色(PB)覆盖 */
    background-color: var(--accent-purple) !important; 
    color: #fff !important; 
}

.select-box { width: 14px; height: 14px; border: 1px solid #666; background: rgba(0,0,0,0.5); cursor: pointer; margin: 0 auto; opacity: 0; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.select-box.checked { background: var(--accent-cyan); border-color: var(--accent-cyan); opacity: 1 !important; }
.select-box.checked::after { content: '✔'; font-size: 10px; color: #000; font-weight: 900; }
.row:hover .select-box, .lb-container.selection-mode .select-box { opacity: 1; }

/* 底部按钮 */
.lb-footer { padding: 12px; background: rgba(0,0,0,0.4); border-top: 1px solid var(--glass-border); display: flex; justify-content: center; min-height: 56px; flex-shrink: 0; }
.btn-compare { width: 100%; max-width: 300px; padding: 8px 0; border: 1px solid rgba(255,255,255,0.1); background: #1a1a1a; color: #666; font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: default; pointer-events: none; transition: all 0.3s ease; border-radius: 2px; text-align: center; }
.btn-compare.hidden { display: none; }
.btn-compare.active { background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4); cursor: pointer; pointer-events: all; }
.btn-compare.active:hover { filter: brightness(1.2); transform: translateY(-1px); }

/* Join 按钮 */
#btn-join {
    pointer-events: all !important; cursor: pointer !important;
    background: var(--accent-cyan) !important; border-color: var(--accent-cyan) !important;
    color: #000 !important; font-weight: 900 !important;
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4) !important;
}
#btn-join:hover { filter: brightness(1.2); transform: translateY(-1px); box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.6) !important; }
#btn-join:active { transform: translateY(1px); filter: brightness(0.9); }

/* === [地图与点位] === */

/* 1. 地图面板容器 - 增加溢出保护 */
.map-panel { 
    /* 必须 relative 以便内部绝对定位 */
    position: relative !important; 
    
    /* 居中核心 */
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    
    /* [关键] 防止 Flex 子项被大图撑破容器 */
    min-width: 0 !important; 
    min-height: 0 !important; 
    overflow: hidden !important;
    
    /* 确保填满 Grid 中间行 */
    width: 100%; height: 100%;
}

/* 2. 地图包裹层 - 核心对齐逻辑 */
#map-wrapper { 
    position: relative !important; 
    
    /* [关键] 收缩包裹：让 div 尺寸死死贴合内部图片 */
    display: inline-block !important; 
    
    /* 尺寸由图片撑开，但受限于图片的最大高度 */
    width: auto !important; 
    height: auto !important; 
    
    /* 消除图片底部的幽灵间隙 */
    line-height: 0 !important; 
    font-size: 0 !important;
    
    filter: drop-shadow(0 0 40px rgba(var(--accent-rgb), 0.3)); 
    transition: filter 0.5s ease; 
    z-index: 1; 
}

/* 3. 图片本身 - 物理高度限制 */
#track-img { 
    display: block !important; 
    
    /* 保持原始比例 */
    width: auto !important; 
    height: auto !important; 
    
    /* 宽度自适应 */
    max-width: 100% !important; 
    
    /* [核心修复] 不要用 100%！ */
    /* 计算公式：屏幕总高 - Header(64px) - Tape(64px) - 边距缓冲(12px) = 140px */
    /* 这强制图片永远不会比中间的剩余空间大，无论 wrapper 是什么状态 */
    max-height: calc(100vh - 140px) !important; 
    
    filter: var(--map-filter, invert(1) opacity(0.8)); 
    margin: 0 !important;
    object-fit: contain !important;
}

/* 4. 圆点层 - 绝对定位覆盖 */
#dots-layer { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: 10; 
}


/* Tape Markers */
.tape-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 20px; background: #1a1a1a; border: 1px solid #666; color: #ccc; font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono'; border-radius: 3px; display: flex; align-items: center; justify-content: center; z-index: 5; transition: left 0.22s linear; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.tape-marker.highlight { transform: translate(-50%, -50%) scale(1.4) !important; background: #fff !important; color: #000 !important; z-index: 2000 !important; }

/* [V51/V52] P1 Tape Marker */
.tape-marker.p1 { 
    background: #fff !important; border: 1px solid var(--accent-gold) !important; color: #000 !important; z-index: 150 !important; box-shadow: 0 0 10px var(--accent-gold) !important; 
}
.tape-marker.p1:hover, .tape-marker.p1.highlight {
    background: var(--accent-gold) !important; color: #000 !important; border-color: #fff !important; z-index: 200 !important; transform: translate(-50%, -50%) scale(1.4) !important;
}
.tape-marker.p1.in-pit { display: none !important; }

/* ==========================================
   [V64.1 Style] Tape Marker 层级优化
   (配合 V64.0 逻辑，防止底部赛道条上的故障车挡住正常车)
   ========================================== */

/* 1. 基础黄旗状态：层级降到最低 */
.tape-marker.yellow-flag { 
    background: #1a1a1a !important; 
    border: 1px solid var(--accent-gold) !important; 
    color: var(--accent-gold) !important; 
    width: 32px !important; 
    height: 20px !important; 
    
    /* [Key Change] 降低层级到 4 (正常车是 5)，确保被正常车覆盖 */
    z-index: 4 !important; 
    
    display: flex; 
    flex-direction: column-reverse; 
}

/* 2. 强力黄旗 (刚发生的)：保持高层级 */
.tape-marker.yellow-flag.yf-massive {
    z-index: 200 !important; /* 高于 P1 (150) */
}

/* 图标与波纹保持不变 */
.tape-marker.yellow-flag::before { content: '⚠️'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 14px; z-index: 202; line-height: 1; }
.tape-marker.yellow-flag::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--accent-gold); background: rgba(255, 215, 0, 0.3); z-index: -1; animation: ripple-wave-normal 1.5s infinite ease-out; pointer-events: none; }
.tape-marker.yellow-flag.yf-massive::after { animation: ripple-wave-massive 1.2s infinite ease-out !important; border-color: #fff700; background: rgba(255, 240, 0, 0.4); }


/* === [图表系统] === */

#chart-layer {
    display: block !important; position: absolute !important; inset: 0 !important; 
    padding: 0 !important; background: rgba(0, 0, 0, 0.65) !important; 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08); z-index: 50;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.map-panel.chart-mode #dots-layer { display: none !important; }
.map-panel.chart-mode #chart-layer { opacity: 1; pointer-events: all; }
.map-panel.chart-mode #track-img { opacity: 0.6 !important; filter: grayscale(1) opacity(0.6) !important; transition: all 0.5s ease; }

.chart-controls {
    position: relative !important; z-index: 1000 !important;
    padding-top: 15px !important; padding-right: 20px !important;
    text-align: right !important; margin-bottom: 5px;
}
.btn-close-chart { 
    position: relative; z-index: 1001 !important; cursor: pointer !important;
    background: transparent; border: 1px solid var(--accent-red); color: var(--accent-red); 
    padding: 6px 12px; font-weight: 800; font-family: 'Inter', sans-serif; border-radius: 2px; transition: all 0.2s; 
}
.btn-close-chart:hover { background: var(--accent-red); color: #000; }

#chart-speed {
    position: absolute !important; top: 15px !important; left: 15px !important; right: 15px !important; height: 62% !important; 
    width: auto !important; min-height: 200px !important; margin: 0 !important;
}
#chart-delta {
    position: absolute !important; top: 65% !important; left: 15px !important; right: 15px !important; bottom: 70px !important; 
    height: auto !important; width: auto !important; min-height: 80px !important; margin: 0 !important;
}

/* === [浮窗与组件] === */

/* [V59.1] Track Info Card: Compact 125% & FX */
.track-info-card { 
    position: absolute; 
    top: 25px; left: 25px; z-index: 50; 
    background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    border-left: 5px solid var(--accent-cyan); 
    padding: 10px 16px; border-radius: 4px; min-width: 180px; 
    pointer-events: none; box-shadow: 0 4px 15px rgba(0,0,0,0.4); 
}
.track-title { 
    font-size: 18px; font-weight: 900; color: #fff; 
    text-transform: uppercase; letter-spacing: 0.5px; 
    line-height: 1.1; margin-bottom: 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.session-label { 
    display: inline-block; 
    font-size: 12px; font-weight: 800; color: var(--accent-cyan); 
    text-transform: uppercase; letter-spacing: 1px; 
    padding: 2px 8px; border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.05); border-radius: 3px;
    transition: all 0.3s ease; line-height: 1.2;
}

/* Session FX */
.session-label.qualify-mode { 
    color: var(--accent-gold); border-color: var(--accent-gold); 
    background: rgba(255, 215, 0, 0.1); box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
    animation: session-breath-gold 2s infinite ease-in-out;
}
.session-label.race-mode { 
    color: #fff; background: rgba(0, 255, 157, 0.2); 
    border-color: var(--accent-green); text-shadow: 0 0 4px rgba(0,0,0,0.5);
    animation: session-pulse-green 1.5s infinite ease-in-out;
}

/* [V57.0] Log Window: Consolidated Styles */
.log-window {
    position: absolute; bottom: 0; right: 0; width: 320px; height: 220px;
    background: rgba(5, 5, 5, 0.9); backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--accent-rgb), 0.3); 
    border-right: none; border-bottom: none; border-radius: 8px 0 0 0;
    z-index: 30000 !important;
    opacity: 0.6; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    display: flex; flex-direction: column; margin: 0 !important;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}
.log-window:hover, .log-window:not(.collapsed) { opacity: 1.0; }
.log-window.collapsed { transform: translateY(196px); opacity: 0.5; }

.log-header { 
    height: 28px; background: rgba(255, 255, 255, 0.03); 
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 0 12px; cursor: pointer; user-select: none; 
}
.log-title { font-size: 11px; font-weight: 800; color: var(--accent-cyan); letter-spacing: 1px; }
.log-toggle { font-size: 10px; color: var(--accent-cyan); transition: transform 0.3s ease; }
.log-window.collapsed .log-toggle { transform: rotate(180deg); }

.log-body { 
    flex: 1; overflow-y: auto; padding: 10px 12px; 
    font-family: 'JetBrains Mono', 'Consolas', monospace; 
    font-size: 11px; color: #ccc; 
    display: flex; flex-direction: column; gap: 3px; line-height: 1.2; 
}
.log-body::-webkit-scrollbar { width: 4px; }
.log-body::-webkit-scrollbar-track { background: transparent; }
.log-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.log-body:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

.log-row { 
    display: flex; align-items: flex-start; 
    border-bottom: 1px solid rgba(255,255,255,0.02); padding-bottom: 4px;
}
.log-time { 
    color: #bbb; font-weight: normal; font-size: 10px; margin-right: 10px; 
    min-width: 35px; text-align: right; flex-shrink: 0; padding-top: 1px; 
    font-variant-numeric: tabular-nums; 
}
.log-msg { color: #ddd; word-break: break-word; flex: 1; }


/* Loading Screen */
#loader-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(5, 5, 5, 0.9); backdrop-filter: blur(10px); z-index: 999999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
#loader-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring {
    width: 60px; height: 60px; border-radius: 50%; margin-bottom: 20px; position: relative;
    border: 3px solid rgba(var(--accent-rgb), 0.1); border-top: 3px solid var(--accent-cyan);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2); animation: loader-spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.loader-ring::after {
    content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%;
    border: 2px solid transparent; border-bottom: 2px solid var(--accent-gold); animation: loader-spin-rev 2s linear infinite;
}
.loader-text {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800; color: var(--accent-cyan);
    letter-spacing: 2px; text-transform: uppercase; animation: text-blink 1.5s infinite; text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

/* 暂停时隐藏 */
body.is-paused .dot, body.is-paused .tape-marker { display: none !important; opacity: 0 !important; }
body.is-paused .map-flash-green, body.is-paused .map-flash-purple { animation: none !important; box-shadow: none !important; }

/* === [动画库] === */
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
/* [Performance] Optimized: Removed expensive box-shadow */
@keyframes pulse-gold { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } }

/* [MIGRATED] Keyframes moved to static/css/modules/components/map.css */

/* [Performance] Optimized Glare: Use transform instead of left */
@keyframes glare { 
    0% { transform: skewX(-25deg) translateX(0); } 
    100% { transform: skewX(-25deg) translateX(600%); } 
}
@keyframes glare-green { 
    0% { transform: skewX(-25deg) translateX(0); } 
    100% { transform: skewX(-25deg) translateX(600%); } 
}
@keyframes glare-purple { 
    0% { transform: skewX(-25deg) translateX(0); } 
    100% { transform: skewX(-25deg) translateX(600%); } 
}

/* [Performance] Map Pulse Removed */
/* @keyframes map-pulse-green ... */
/* @keyframes map-pulse-purple ... */

@keyframes ripple-wave-normal { 0% { width: 14px; height: 14px; opacity: 0.8; border-width: 4px; } 100% { width: 40px; height: 40px; opacity: 0; border-width: 0px; } }
@keyframes ripple-wave-massive { 0% { width: 14px; height: 14px; opacity: 0.9; border-width: 6px; } 100% { width: 80px; height: 80px; opacity: 0; border-width: 0px; } }
@keyframes loader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes loader-spin-rev { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
@keyframes text-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* [Performance] Optimized Session Animations */
@keyframes session-breath-gold {
    0% { border-color: rgba(255, 215, 0, 0.5); background-color: rgba(255, 215, 0, 0.05); }
    50% { border-color: rgba(255, 215, 0, 1.0); background-color: rgba(255, 215, 0, 0.2); }
    100% { border-color: rgba(255, 215, 0, 0.5); background-color: rgba(255, 215, 0, 0.05); }
}
@keyframes session-pulse-green {
    0% { border-color: var(--accent-green); opacity: 0.8; }
    50% { border-color: #fff; opacity: 1; } 
    100% { border-color: var(--accent-green); opacity: 0.8; }
}

.row.new-pb::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(0, 255, 157, 0.4) 50%, transparent 100%); transform: skewX(-25deg); pointer-events: none; animation: glare-green 2.5s ease-in-out forwards; }
.row.new-sb::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(176, 38, 255, 0.5) 50%, transparent 100%); transform: skewX(-25deg); pointer-events: none; animation: glare-purple 4s ease-in-out forwards; }
#map-wrapper.map-flash-green { animation: map-pulse-green 3.0s ease-out forwards; }
#map-wrapper.map-flash-purple { animation: map-pulse-purple 4.5s ease-out forwards; }