/* ============================================================
   theme-v3.css — 组件级视觉重构覆盖层（UI-F / t54）
   ------------------------------------------------------------
   设计系统：统一设计系统 v1（极简基调）
   · 中性灰阶五档 + 单强调色；圆角 4/8/12 三档；4px 网格
   · 单层轻影或边框二选一；文字三档层级；无彩色装饰线堆叠
   · 本文件为覆盖层：不修改任何 id/class 钩子，仅视觉。
     必须在 style.css 之后加载（<link> 顺序：style.css → theme-v3.css）。

   消费的 DS token（由 style.css :root 提供，t65 已删除本地兜底段——
   token 层以 style.css 为唯一权威；本文件所有 var() 保留字面 fallback 仅作
   防御性兜底，不影响 token 单源）：
   --g0 画布  --g1 表面  --g2 浮起  --g3 hover  --g4 active/描边
   --tx1 主文 --tx2 次文 --tx3 弱化 --line 分隔线 --accent 强调色
   --r-s 4px  --r-m 8px  --r-l 12px
   --ease-out/--ease-inout 缓动  --blur 浮层模糊(新增请求，见 output)
   ============================================================ */

/* ============================================================
   1. 终端面板（三 tab）
      目标：去"2px 蓝顶边 + 3px 蓝 resizer"双蓝条；
      g0 底融入画布；tab 用 accent 下划线；单层轻影。
   ============================================================ */

#terminal-panel {
    background-color: var(--g0, #161616);
    border-top: 1px solid var(--line, #2e2e2e);          /* 替代 2px 蓝色顶边 */
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);         /* 单层轻影 */
}

/* resizer：默认隐入分隔线，hover 才显 accent（去常驻蓝条） */
#terminal-resizer {
    height: 4px;
    background: transparent;
    border-bottom: none;
    cursor: ns-resize;
    position: relative;
}
#terminal-resizer::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 1px;
    background-color: var(--line, #2e2e2e);
    transition: background-color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
#terminal-resizer:hover::after {
    background-color: var(--accent, #4daafc);
}

#terminal-header {
    background-color: transparent;                        /* 告别独立亮底 #1e1e1e */
    border-bottom: 1px solid var(--line, #2e2e2e);
    color: var(--tx1, #e8e8e8);
}

.terminal-tab {
    position: relative;
    color: var(--tx3, #6e6e6e);
    padding: 8px 16px;
    border-bottom: none;                                  /* 下划线改由 ::after 承担 */
    border-radius: var(--r-s, 4px) var(--r-s, 4px) 0 0;
    transition: color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                background-color 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
/* 技能精华②：双层技法——::after 为 accent 底色层，用 inset clip-path 裁切
   实现左→右无缝色彩过渡（非透明度淡入），切换 tab 时重排触发动画 */
.terminal-tab::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 2px;
    background-color: var(--accent, #4daafc);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 240ms var(--ease-inout, cubic-bezier(0.77, 0, 0.175, 1));
}
.terminal-tab:hover {
    color: var(--tx1, #e8e8e8);
    background-color: var(--g2, #262626);
}
.terminal-tab.active {
    color: var(--tx1, #e8e8e8);
    background-color: transparent;
}
.terminal-tab.active::after {
    clip-path: inset(0 0 0 0);
}

.terminal-content-body {
    color: var(--tx2, #9d9d9d);
}
.terminal-content-body .out-title { color: var(--accent, #4daafc); }
.terminal-content-body .out-res   { color: var(--tx1, #e8e8e8); }

/* 终端头部按钮（最小化/关闭等）统一幽灵样式 */
.debug-header-btn,
#terminal-close-btn {
    color: var(--tx2, #9d9d9d);
    border-radius: var(--r-s, 4px);
    transition: background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.debug-header-btn:hover {
    background-color: var(--g3, #333333);
    color: var(--tx1, #e8e8e8);
}
#terminal-close-btn:hover {
    background-color: rgba(244, 135, 113, 0.15);
    color: var(--danger, #f48771);
}
.debug-header-btn:active,
#terminal-close-btn:active {
    transform: scale(0.97);
}

/* 调试输入行：与终端融为一体
   [t9#③] 收窄：!important 覆盖面排除 minimized 态——style.css:749 对 minimized
   #debug-input-line 施 display:none，本条原裸 id+!important 虽不直接对抗 display，
   但为杜绝未来同属性冲突，显式 :not(.minimized) 收窄作用域 */
#terminal-panel:not(.minimized) #debug-input-line {
    background: var(--g0, #161616) !important;
    border-top: 1px solid var(--line, #2e2e2e) !important;
}

/* ============================================================
   2. 调试控制区
      目标：按钮组卡片化、变量面板卡片化；去硬编码色。
   ============================================================ */

.debug-control-btn {
    background-color: transparent;
    border: 1px solid var(--line, #2e2e2e);
    color: var(--tx2, #9d9d9d);
    border-radius: var(--r-m, 8px);
    padding: 8px 5px;
    transition: background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), border-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.debug-control-btn:hover {
    background-color: var(--g2, #262626);
    border-color: var(--g4, #404040);
    color: var(--tx1, #e8e8e8);
}
.debug-control-btn:active {
    transform: scale(0.97);
    background-color: var(--g3, #333333);
}
.debug-control-btn:disabled {
    opacity: 0.4;
}

.debug-small-btn {
    background-color: transparent;
    border: 1px solid var(--line, #2e2e2e);
    color: var(--tx2, #9d9d9d);
    border-radius: var(--r-s, 4px);
    transition: background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.debug-small-btn:hover {
    background-color: var(--g2, #262626);
    color: var(--tx1, #e8e8e8);
}
.debug-small-btn:active {
    transform: scale(0.94);
}

/* 变量列表：行式 → 卡片内列表 */
#debug-variables-list {
    border: 1px solid var(--line, #2e2e2e);
    border-radius: var(--r-m, 8px);
    background-color: var(--g1, #1f1f1f);
    padding: 4px;
}
.debug-variable-item {
    border-radius: var(--r-s, 4px);
    padding: 4px 8px;
    color: var(--tx1, #e8e8e8);
    transition: background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.debug-variable-item:hover {
    background-color: var(--g2, #262626);
}
.debug-variable-item.selected {
    background-color: rgba(77, 170, 252, 0.14);           /* accent 12-15% 面 */
}
.debug-var-name  { color: var(--accent, #4daafc); }
.debug-var-value { color: var(--tx2, #9d9d9d); }
.debug-var-type  { color: var(--tx3, #6e6e6e); }

/* 添加变量输入 */
.debug-add-var-dialog input {
    background-color: var(--g0, #161616);
    border: 1px solid var(--line, #2e2e2e);
    color: var(--tx1, #e8e8e8);
    border-radius: var(--r-s, 4px);
}
.debug-add-var-dialog input:focus {
    outline: none;
    border-color: var(--accent, #4daafc);
    box-shadow: 0 0 0 2px rgba(77, 170, 252, 0.25);
}

/* 当前执行行高亮降刺眼度 */
.debug-execution-line {
    background-color: rgba(255, 214, 0, 0.12) !important;
}

/* ============================================================
   3. 模态框内部排版（首选项/关于/教程/输入模态通用）
      目标：主次按钮组、标题留白、表单控件统一。
   ============================================================ */

.modal-overlay,
#input-modal {
    backdrop-filter: blur(var(--blur, 12px));
    -webkit-backdrop-filter: blur(var(--blur, 12px));
}

.about-modal,
.preferences-modal,
.modal-content {
    border-radius: var(--r-l, 12px);
    border: 1px solid var(--line, #2e2e2e);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);           /* 单层 */
    overflow: hidden;
}

/* 标题区：靠留白不靠字号（18→14/600），底部细分隔线 */
.modal-header h2 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tx1, #e8e8e8);
}
.modal-header {
    background-color: var(--g1, #1f1f1f);
    border-bottom: 1px solid var(--line, #2e2e2e);
    padding: 16px 20px;
}
.modal-body {
    padding: 20px;
    color: var(--tx2, #9d9d9d);
    line-height: 1.65;
}
.modal-body a { color: var(--accent, #4daafc); }

.close-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--r-s, 4px);
    color: var(--tx3, #6e6e6e);
    transition: background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.close-btn:hover {
    background-color: var(--g3, #333333);
    color: var(--tx1, #e8e8e8);
}

/* 表单控件统一：g0 凹陷底 + --line 边 + focus 内环 */
#modal-textarea,
.preferences-modal textarea#default-code-editor,
.setting-item input[type="number"],
.cph-test-case-textarea {
    background-color: var(--g0, #161616);
    color: var(--tx1, #e8e8e8);
    border: 1px solid var(--line, #2e2e2e);
    border-radius: var(--r-s, 4px);
    transition: border-color 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
#modal-textarea:focus,
.preferences-modal textarea#default-code-editor:focus,
.cph-test-case-textarea:focus {
    outline: none;
    border-color: var(--accent, #4daafc);
    box-shadow: 0 0 0 2px rgba(77, 170, 252, 0.25);
}

/* 主次按钮组：主=accent 实底，次=透明+1px 边。按 id 精确命中，不改类钩子 */
.modal-btn {
    border-radius: var(--r-s, 4px);
    font-size: 13px;
    padding: 8px 16px;
    transition: filter 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.modal-btn:active { transform: scale(0.97); }

#modal-run,
#save-preferences,
.prefs-setup-confirm {
    background-color: var(--accent, #4daafc) !important;
    color: #101418 !important;                            /* accent 上深字，对比 > AA */
    font-weight: 600;
}
#modal-run:hover,
#save-preferences:hover,
.prefs-setup-confirm:hover {
    filter: brightness(1.12);
}

#modal-cancel,
#cancel-preferences,
#reset-default-code,
.prefs-setup-back,
.prefs-setup-skip {
    background-color: transparent !important;
    border: 1px solid var(--g4, #404040);
    color: var(--tx2, #9d9d9d) !important;
}
#modal-cancel:hover,
#cancel-preferences:hover,
#reset-default-code:hover,
.prefs-setup-back:hover,
.prefs-setup-skip:hover {
    background-color: var(--g2, #262626) !important;
    color: var(--tx1, #e8e8e8) !important;
}

/* [t9#④] .btn-small 视觉皮肤单一权威（style.css 仅留结构基座；浅色作用域死覆盖已删）：
   accent 底 + 深字，hover 走 brightness 滤镜（不与基座 background-color:hover 叠加变色，
   实际观感以本层为准） */
.btn-small {
    background-color: var(--accent, #4daafc);
    color: #101418;
    border-radius: var(--r-s, 4px);
    font-weight: 500;
    transition: filter 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.btn-small:hover  { filter: brightness(1.12); }
.btn-small:active { transform: scale(0.97); }

.plugin-btn {
    background-color: transparent;
    border: 1px solid var(--accent, #4daafc);
    color: var(--accent, #4daafc);
    border-radius: var(--r-s, 4px);
    transition: background-color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
                transform 100ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.plugin-btn:hover {
    background-color: rgba(77, 170, 252, 0.12);
}
.plugin-btn:active { transform: scale(0.97); }


/* 键盘可达性：组件层 focus 环 */
.dropdown-item:focus-visible,
.menu-item:focus-visible,
.terminal-tab:focus-visible,
.debug-control-btn:focus-visible,
.modal-btn:focus-visible,
.btn-small:focus-visible,
.plugin-btn:focus-visible {
    outline: 2px solid var(--accent, #4daafc);
    outline-offset: 2px;
}

/* ============================================================
   4. CPH 卡片语言统一（与插件中心/vfs 同语言：g1 卡 + --line + r-m）
   ============================================================ */

.cph-test-case,
.cph-file-item {
    background-color: var(--g1, #1f1f1f);
    border: 1px solid var(--line, #2e2e2e);
    border-radius: var(--r-m, 8px);
}
.cph-test-case-header {
    background-color: transparent;
    border-bottom: 1px solid var(--line, #2e2e2e);
    border-radius: var(--r-m, 8px) var(--r-m, 8px) 0 0;
    color: var(--tx1, #e8e8e8);
}
.cph-controls,
.cph-all-files-container {
    border-color: var(--line, #2e2e2e);
}
.cph-test-case-name,
.cph-file-name {
    color: var(--tx1, #e8e8e8);
}
.cph-file-info {
    color: var(--tx3, #6e6e6e);
}
.cph-empty-state {
    color: var(--tx3, #6e6e6e);
    border: 1px dashed var(--g4, #404040);
    border-radius: var(--r-m, 8px);
}

/* 插件中心卡片同语言收口 */
.plugin-item {
    background-color: var(--g1, #1f1f1f);
    border: 1px solid var(--line, #2e2e2e);
    border-radius: var(--r-m, 8px);
}
.plugin-description { color: var(--tx2, #9d9d9d); }

/* ============================================================
   5. 列表入场 stagger（技能精华③）：vfs 文件行 / CPH 测试点
      每项延迟步进 10ms、上限 80ms（第 9 项起不再递增），
      仅 opacity/translateY(4px)，240ms --ease-out。
   ============================================================ */
@keyframes tv3-item-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.vfs-folder, .vfs-file,
.cph-test-case {
    animation: tv3-item-in 240ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}
.vfs-folder:nth-child(n+2), .vfs-file:nth-child(n+2) { animation-delay: 20ms; }
.vfs-folder:nth-child(n+3), .vfs-file:nth-child(n+3) { animation-delay: 40ms; }
.vfs-folder:nth-child(n+4), .vfs-file:nth-child(n+4) { animation-delay: 60ms; }
.vfs-folder:nth-child(n+5), .vfs-file:nth-child(n+5),
.cph-test-case:nth-child(n+5) { animation-delay: 80ms; }
.cph-test-case:nth-child(2) { animation-delay: 20ms; }
.cph-test-case:nth-child(3) { animation-delay: 40ms; }
.cph-test-case:nth-child(4) { animation-delay: 60ms; }

/* 悬浮态仅在具备 hover 能力的指针设备生效（技能精华③） */
@media (hover: hover) {
    .debug-variable-item:hover {
        background-color: var(--g2, #262626);
    }
}

/* F5 仲裁：reduced-motion 全站归零以 style.css 批6 全局块为唯一权威，
   本文件原第 6 节 reduce 块已删（避免双源漂移）。 */

/* ============================================================
   6. 模态居中豁免（技能精华⑤）：模态/弹层出现动画的
      transform-origin 一律 center，不做 origin-aware 偏移。
      （当前覆盖层未引入模态入场缩放；此规则为后续扩展预留约束。）
   ============================================================ */
.about-modal, .preferences-modal,
.modal-content {
    transform-origin: center center;
}