:root {
    --bg-dark: #09090B;           /* 升级为家族主站同款：极致奢华深黑底色，彻底告别偏蓝暗底 */
    --panel-bg: rgba(22, 25, 37, 0.65); /* 调优毛玻璃舱体底色，完美承托白色和绿色文本 */
    
    /* [Pro Developer Trick] 
       名字依然叫 --accent-blue，但值强行换成电动紫（#BF5AF2）！
       这样你完全不需要去全局修改你原本做好的完整代码里的各种 var(--accent-blue)，
       它们会自动在一瞬间全部安全地蜕变为高贵的 AI 专属神经网络紫！ */
    --accent-blue: #BF5AF2;       
    
    --accent-green: #30D158;      /* 升级为苹果标准高亮荧光绿，确保 99% SLASHED 极其刺眼醒目 */
    --text-main: #FFFFFF;         /* 强行拉满到极致纯白，确保 4K 任何角度都字字清晰 */
    --text-muted: #A1A1A6;        /* 升级为高对比明灰色，彻底解决之前死黑看不清的硬伤 */
    --border-color: rgba(255, 255, 255, 0.08); /* 换成大厂极简半透明微光边框线，更有高级感 */
    
    /* 额外增补：供下方音频等高级高亮块使用的呼吸发光灯晕 */
    --accent-glow: rgba(191, 90, 242, 0.4);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
    background-color: #0A0A0C; /* 调整为苹果专业工作站经典的超深曜石黑 */
    color: #E3E3E8;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased; /* 强制开启全屏抗锯齿渲染 */
}

.app-container {
    display: flex;
    height: 100vh;
}

/* 侧边栏 */
.sidebar {
    width: 320px;
    background-color: #0b0c13;
    border-right: 1px solid var(--border-color);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.brand h2 {
    font-size: 24px;
    color: #fff;
    font-weight: 700;
}

.badge {
    background: linear-gradient(135deg, #f25f22, #00a4ef);
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
}

.story-pitch {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.footer-note {
    margin-top: auto;
    font-size: 12px;
    color: #555870;
}

/* 主内容区 */
.main-content {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 上传条 */
.ingestion-section {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* 建立最大宽度护城河，防止企业级控制面板在 4K 屏幕上横向无限无脑拉伸 */
.dropzone-container {
    width: 100%;
    max-width: 900px; 
    background-color: var(--panel-bg);
    padding: 32px;
    border-radius: 12px;
    border: 1px dashed #3b4260;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.dropzone-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* 精准锁定大厂级文件资产摄取图标尺寸 */
.upload-icon-wrapper {
    background: rgba(0, 120, 212, 0.1);
    padding: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-svg {
    width: 56px;  /* 强行缩回到极其精致合理的极客图标尺寸 */
    height: 56px;
    color: var(--accent-blue);
}

.asset-dropdown {
    width: 100%;
    max-width: 550px;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    padding: 12px;
    color: white;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

.btn-primary-action {
    background: linear-gradient(135deg, var(--accent-blue), #00bcf2);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0, 120, 212, 0.4);
    transition: transform 0.1s, opacity 0.2s;
}
.btn-primary-action:hover { opacity: 0.9; }
.btn-primary-action:active { transform: scale(0.98); }

/* 状态面板 */
.status-panel {
    background-color: var(--panel-bg);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #3b4260;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.badge-status {
    background-color: #b17e00;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.progress-container {
    background-color: var(--bg-dark);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0078d4, #00f0ff);
    transition: width 0.2s ease;
}

.progress-text {
    font-size: 13px;
    color: var(--text-muted);
}

/* 结果展示与滑块对比 */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
}

.comparison-card, .metrics-card {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

h3 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #fff;
    letter-spacing: 0.5px;
}

/* 滑块容器设计 */
.split-slider-frame {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.image-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* 模拟画质缺陷效果：低保真层采用 CSS 特效进行模糊和去色处理 */
.original-layer {
    filter: blur(4px) contrast(0.8) grayscale(0.3);
    border-right: 2px solid #fff;
    width: 50%; /* 动态控制其宽度 */
}

.visual-slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
    top: 0;
    left: 0;
    z-index: 10;
    cursor: ew-resize;
}

.visual-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 4px;
    height: 380px;
    background: #ffffff;
    cursor: ew-resize;
}

/* 看板排版 */
.metric-group {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.metric-item {
    flex: 1;
    background-color: var(--bg-dark);
    padding: 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.metric-item label {
    font-size: 12px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

.metric-item .value {
    font-size: 20px;
    font-weight: 700;
}

.text-green { color: #107c41; }
.text-blue { color: #00a4ef; }
.text-gold { color: #ffb900; }

.hidden { display: none !important; }

/* Video Canvas Architecture Optimization */
video.canvas-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保视频完美等比填充，不留白边 */
    pointer-events: none;
}

.source-degraded-layer {
    z-index: 2;
    filter: blur(2px) contrast(0.85) noise; /* 若测试视频不够模糊，可利用CSS硬核增加历史陈旧感 */
}

.hyper-res-layer {
    z-index: 1;
}

/* 强行将隐藏的滑块控件撑满整个视频大屏，使其 100% 可响应鼠标拖拽 */
.interactive-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    z-index: 10;
    cursor: ew-resize;
    margin: 0;
}

/* 将原生滑块纽扣定制为高科技垂直发光分割线 - 升级：利用 1000px 超高溢出剪裁确保任何大屏下均垂直撑满 */
.interactive-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 1000px; 
    background: #ffffff;
    box-shadow: 0 0 14px #00f0ff, 0 0 4px #ffffff;
    cursor: ew-resize;
}

/* [Architect Update] 引入最大宽度护城河与居中，确保 4K 屏幕全屏时画面绝不横向拉伸、绝不裁剪变形 */
.split-slider-frame {
    position: relative;
    width: 100%;
    max-width: 960px;      /* 强行锁定黄金播放视窗最大宽度 */
    aspect-ratio: 16 / 9;  /* 严格锁定工业级 16:9 完整未裁剪画面比例 */
    margin: 0 auto;        /* 完美居中对齐 */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: #000000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.interactive-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    z-index: 10;
    cursor: ew-resize;
    margin: 0;
}

/* 动态同步发光白线的垂直高度 */
.interactive-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 600px; /* 完美覆盖 16:9 视区高度 */
    background: #ffffff;
    box-shadow: 0 0 14px #00f0ff, 0 0 4px #ffffff;
    cursor: ew-resize;
}

/* 苹果级两端极致对齐排版：彻底解决文字拥挤问题 */
.slider-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 960px; /* 与视频视窗宽度严格对齐 */
    margin: 12px auto 0 auto; /* 居中排版 */
    padding: 0 4px;
}

/* [Architect Balance] 强行将左右标签的字号、字重、呼吸感执行绝对对称物理对齐 */
.label-left, .label-right {
    font-size: 12px;       /* 统一轻微放大，提升 4K 屏可视读性 */
    font-weight: 700;       /* 统一强制加粗 */
    letter-spacing: 0.1em;  /* 注入微量字间距，展现高端排版细节 */
    text-transform: uppercase;
}

.label-left {
    color: #FF453A;         /* 苹果官方御用系统级警示红 */
    text-shadow: 0 0 10px rgba(255, 69, 58, 0.3);
}

.label-right {
    color: #00f0ff;         /* 还原端高科技未来蓝 */
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* 苹果生态 Premium 卡片阴影与圆角微调 - 核心修复：注入左右 32px 奢华留白边界，彻底消除贴边硬伤 */
.dropzone-container, .visualization-card, .telemetry-card, .status-panel {
    padding: 30px 32px !important; /* 赋予上下 30px，左右 32px 的标准苹果视窗内嵌留白 */
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(22, 25, 37, 0.6) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* 将左侧卡片标题的字号、字重与右侧看板执行全盘像素级对齐 */
.visualization-card h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 18px;
    opacity: 0.9;
}

/* 下拉选择框果味扁平化美化 */
.asset-dropdown {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: #1C1C1E !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s;
}
.asset-dropdown:hover {
    border-color: var(--accent-blue) !important;
}

/* macOS Batch Select List Architecture */
.asset-dropdown[multiple] {
    height: 130px !important; /* 稍微撑高，给大字号留足空间 */
    padding: 10px !important;
}
.asset-dropdown option {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 15px;          /* 从 13px 优雅放大至 15px，极具苹果列表质感 */
    font-weight: 500;
}
.asset-dropdown option:checked {
    background: linear-gradient(135deg, var(--accent-blue), #00bcf2) !important;
    color: white !important;
}

/* 核心大按钮字号与感官升级 */
.btn-primary-action {
    background: linear-gradient(135deg, var(--accent-blue), #00bcf2);
    color: white;
    border: none;
    padding: 16px 40px;       /* 增加内边距，让大按钮更加沉稳厚重 */
    border-radius: 8px;
    font-weight: 700;         /* 升级为极致粗体 */
    cursor: pointer;
    font-size: 16px;          /* 从 14px 硬核放大至 16px，直击评审眼球 */
    box-shadow: 0 6px 20px rgba(0, 120, 212, 0.45);
    transition: transform 0.1s, opacity 0.2s;
}

.concurrency-badge {
    font-size: 11px;
    background: rgba(16, 124, 65, 0.2);
    color: #107c41;
    border: 1px solid rgba(16, 124, 65, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}
.batch-tasks-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 单个多任务并行行卡片 - 纯正苹果工作站质感 */
.task-row-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.task-row-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 240, 255, 0.3);
}
.task-row-card.active-view {
    background: rgba(0, 120, 212, 0.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 12px rgba(0, 120, 212, 0.2);
}
.task-meta-flex {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 8px;
}
.task-filename { font-weight: 600; color: #fff; }
.task-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: bold; }

.track-fill-bg {
    background: #1C1C1E;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.matrix-progress-inner {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0078d4, #00f0ff);
    transition: width 0.2s ease;
}
/* macOS Modern Audio Control Matrix */
.audio-control-zone {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 16px;
}
.btn-audio-node {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-audio-node:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}
/* 选中轨道的发光高亮状态 */
.btn-audio-node.active-audio {
    background: rgba(0, 120, 212, 0.15) !important;
    border-color: var(--accent-blue) !important;
    color: #00f0ff !important;
    box-shadow: 0 0 14px rgba(0, 120, 212, 0.35);
}

/* ==========================================================================
   macOS Premium Micro-Typography & Flat Grid Systems
   ========================================================================== */

/* 左侧栏架构栈精细化去杂：移除丑陋原生圆点，替换为极简高档侧边线 */
.tech-spec-card ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tech-spec-card li {
    font-size: 13px;
    color: var(--text-muted);
    position: relative;
    padding-left: 14px;
    line-height: 1.4;
}
.tech-spec-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 1.5px;
    background-color: var(--accent-blue);
    border-radius: 1px;
}

/* 右侧硬核遥测大牌扁平化双列网格 */
.panel-section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 18px;
    opacity: 0.9;
}

.telemetry-grid-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 严格锁定一行两列对称排布 */
    gap: 12px;
    margin-bottom: 20px;
}

.matrix-tile {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 14px 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.2s;
}
.matrix-tile:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* 指标标签：强制不折行，保持优雅扁平 */
.tile-lbl {
    font-size: 11px;
    font-weight: 500;
    color: #86868B; /* 苹果官方御用中性灰色 */
    white-space: nowrap; /* 强行锁死单行，绝对禁止换行 */
    letter-spacing: 0.02em;
}

/* 指标数值：放大加粗，单行吐出 */
.tile-val {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    white-space: nowrap;
    font-family: -apple-system, SF Pro Display, BlinkMacSystemFont, sans-serif;
}

/* 高级状态追踪点阵 */
.compliance-badge-zone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 14px;
}
.compliance-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.status-dot.green {
    background-color: #34C759; /* Apple iOS 标准正绿 */
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.6);
}
.compliance-text {
    font-size: 11px;
    font-weight: 500;
    color: #636366;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   Disruptive ROI Compare Matrix & Sidebar Typography (High-Contrast Edition)
   ========================================================================== */

.story-intro {
    font-size: 13px;
    line-height: 1.5;
    color: #D1D1D6; /* 由暗灰大幅提亮至 Apple 标准明灰色，确保纯黑底色下清晰可见 */
    margin-bottom: 16px;
}

/* 建立高级对比暗色卡片舱 - 适度调亮背景半透明度以承托文本 */
.roi-comparison-matrix {
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.roi-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 传统高昂成本标签：提升字重与明暗度 */
.roi-tag-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #A1A1A6; /* 核心优化：提亮文本，拒绝死黑 */
    letter-spacing: 0.05em;
}
.roi-tag-val {
    font-size: 16px;
    font-weight: 700;
    color: #FF453A; 
    border-bottom: 1px dashed rgba(255, 69, 58, 0.6); 
    padding-bottom: 2px;
}
.roi-tag-unit {
    font-size: 11px;
    font-weight: 500;
    color: #A1A1A6;
}

/* 虚线分割线 */
.roi-matrix-divider {
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    width: 100%;
    margin: 2px 0;
}

/* 荧光翠绿增强发光半径 */
.roi-tag-lbl-active {
    font-size: 10px;
    font-weight: 800;
    color: #30D158; /* 升级为高亮翠绿 */
    letter-spacing: 0.05em;
    position: relative;
    padding-left: 10px;
}
.roi-tag-lbl-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 4px;
    background-color: #30D158;
    border-radius: 50%;
    box-shadow: 0 0 8px #30D158;
}

.roi-tag-val-active {
    font-size: 18px;
    font-weight: 900; 
    color: #30D158; 
    letter-spacing: -0.02em;
    text-shadow: 0 0 16px rgba(48, 209, 88, 0.6); /* 增强呼吸灯晕，在纯黑背景下极其扎眼 */
}

.story-outro {
    font-size: 12px;
    line-height: 1.5;
    color: #98989D; /* 提高底部旁白可见度 */
    font-style: italic; 
}

/* 将最下方 Architecture Stack 列表的银白对比度强行拉高 */
.tech-spec-card li {
    font-size: 13px;
    color: #E5E5EA; /* 强对比白灰色 */
    position: relative;
    padding-left: 14px;
    line-height: 1.4;
}

/* ==========================================================================
   Rex Pro Labs Global Header Integration
   ========================================================================== */
.lab-global-header {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 32px 10px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.btn-lab-back {
    position: absolute;
    left: 32px;
    top: 24px;
    font-size: 11px;
    font-weight: 700;
    color: #86868B;
    text-decoration: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.2s;
}
.btn-lab-back:hover {
    color: #FFFFFF;
}

.lab-present-tag {
    font-size: 10px;
    font-weight: 800;
    color: #BF5AF2; /* 使用专属神经网络紫展现尊贵感 */
    letter-spacing: 0.4em;
    text-align: center;
    text-transform: uppercase;
    margin-top: 14px;
    opacity: 0.8;
}