/* ide.html（C++ Studio）页面壳样式：body / 顶栏 / .workbench 外框 / 文件树。
IDE 主体（编辑器+运行条+监视+IO+Flow+分割条）组件样式已抽至 ide-core/ide-core.css，
由 ide-core.js 自动注入；变量在组件内收敛到 .ide-core，此处 :root 供壳自身使用。 */
:root {
--bg: #14161a;
--pane: #1d2026;
--pane2: #262a31;
--border: #33373f;
--text: #d7dae0;
--muted: #8b919c;
--accent: #58a6ff;
--accent-hover: #79b8ff;
--ok: #3fb950;
--err: #f85149;
--warn: #d29922;
--exec: #f0883e;
--purple: #bc8cff;
--blue: #58a6ff;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
display: flex; flex-direction: column;
overflow: hidden;
font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background: var(--bg);
color: var(--text);
font-size: 15px;
}
/* ---- 顶栏 ---- */
.topbar {
flex: none;
display: flex; align-items: center; gap: 12px;
height: 42px; padding: 0 12px;
background: var(--pane); border-bottom: 1px solid var(--border);
}
.logo { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.logo-mark { height: 22px; width: auto; display: block; }
.topbar .spacer { flex: 1; }
/* 状态在反馈按钮左侧（顶栏最右是「反馈」），与按钮拉开一点间距 */
#status { font-size: 13px; color: var(--muted); margin-right: 4px; }
#status.err { color: var(--err); }
#status.done { color: var(--ok); }
/* 顶栏按钮：分享（主操作，实心）/ 反馈（次操作，描边）统一规格，只区分层级 */
#share-btn, #feedback-btn {
font-size: 13px; height: 28px; padding: 0 12px; border-radius: 6px;
line-height: 1; cursor: pointer; border: 1px solid var(--border);
}
#share-btn { background: var(--accent); border-color: transparent; color: #0a1a2b; font-weight: 600; }
#share-btn:hover:not(:disabled) { background: var(--accent-hover); }
#share-btn:disabled { opacity: 0.85; }
#feedback-btn { background: transparent; color: var(--muted); }
#feedback-btn:hover { color: var(--text); border-color: #4a505a; }
#feedback-pop {
position: absolute; top: 46px; right: 12px; z-index: 50;
display: flex; gap: 6px; align-items: center;
padding: 8px; border-radius: 6px;
background: var(--pane); border: 1px solid var(--border);
box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
#feedback-pop[hidden] { display: none; }
#feedback-input {
width: 300px; padding: 6px 10px; font-size: 13px;
color: var(--text); background: var(--bg);
border: 1px solid var(--border); border-radius: 6px; outline: none;
}
#feedback-input:focus { border-color: var(--accent); }
#feedback-send {
font-size: 13px; padding: 6px 12px; border-radius: 6px;
border: 1px solid var(--border); background: var(--pane2); color: var(--text); cursor: pointer;
}
#feedback-send:hover:not(:disabled) { border-color: #4a505a; }
/* ---- 工作台外框：树 | 分割条 | IDE 主体（ide-core 组件，内部自带中/右栏分割） ---- */
.workbench {
flex: 1; min-height: 0;
display: grid;
grid-template-columns: var(--tree-w, 180px) 4px 1fr;
gap: 0;
padding: 4px;
}
/* ---- 裸 IDE 模式（body.mode-bare）：分享打开（#code=）/ 互动课（?lesson=）----
无目录树：内核五区独占工作台。顶栏保留（品牌 + 状态 + 分享/反馈），
树、树分割条、手机抽屉开关与遮罩全部隐藏。 */
body.mode-bare .workbench { grid-template-columns: 1fr; }
body.mode-bare .file-tree,
body.mode-bare #split-tree,
body.mode-bare #tree-toggle,
body.mode-bare #tree-backdrop { display: none !important; }
/* ---- 嵌入播放器模式（body.mode-embed）：教程页弹窗/iframe 用 ----
bare 之上再藏顶栏，五区撑满全窗口。 */
body.mode-embed .topbar { display: none; }
/* 文件树 */
.file-tree { min-height: 0; overflow-y: auto; padding: 6px 4px; margin-right: 2px; }
#file-list { list-style: none; margin: 0; padding: 0; }
#file-list li {
font: 13px ui-monospace, Menlo, monospace; color: var(--text);
padding: 5px 8px; border-radius: 6px; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#file-list li:hover { background: var(--pane2); }
#file-list li.on { background: var(--pane2); color: var(--accent); }
#file-list li.group {
color: var(--muted); font-size: 12px; cursor: default;
padding: 10px 8px 3px;
}
#file-list li.group:hover { background: none; }
#file-list li.shelved { opacity: 0.55; } /* ?all=1 唤回的被筛示例：淡色区分 */
/* 手机端目录树抽屉开关（桌面隐藏，文件树恒为左侧栏） */
#tree-toggle { display: none; }
/* ---- 手机端（≤768px，含微信内置浏览器）页面壳配套 ----
与 ide-core/ide-core.css 的手机规则配对：body 放开纵向滚动、顶栏折行、
文件树收进「📚 示例」抽屉（默认收起省首屏）、隐藏树与主体间的分割条。 */
@media (max-width: 768px) {
body { overflow-y: auto; }
.topbar { height: auto; min-height: 42px; flex-wrap: wrap; gap: 8px; padding: 6px 10px; }
#status { order: 9; flex-basis: 100%; margin: 0; font-size: 12px; }
.workbench { display: flex; flex-direction: column; overflow: visible; }
.workbench > .vsplit { display: none; }
/* 目录树抽屉：顶栏左侧汉堡钮（CSS 画三道杠，不吃系统字体）+ 浮层侧栏 */
#tree-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 28px; padding: 0; margin: 0 2px 0 -4px;
background: transparent; border: 1px solid transparent; border-radius: 6px;
}
#tree-toggle::before {
content: ''; width: 16px; height: 2px; border-radius: 1px;
background: var(--text);
box-shadow: 0 -5px 0 var(--text), 0 5px 0 var(--text);
}
#tree-toggle:active { background: var(--pane2); }
#tree-toggle[aria-expanded="true"] { background: var(--pane2); border-color: var(--border); }
#tree-backdrop {
position: fixed; inset: 0; z-index: 60;
background: rgba(0, 0, 0, 0.5);
}
#tree-backdrop[hidden] { display: none; }
.file-tree { display: none; }
.file-tree.open {
display: block;
position: fixed; top: 0; left: 0; bottom: 0; z-index: 61;
width: 78%; max-width: 320px; margin: 0; padding: 10px 6px;
border-radius: 0; overflow-y: auto;
background: var(--pane); border-right: 1px solid var(--border);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
animation: tree-drawer-in 0.22s ease-out;
-webkit-overflow-scrolling: touch;
}
@keyframes tree-drawer-in {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* 反馈弹出条手机窄屏适配 */
#feedback-pop { left: 10px; right: 10px; }
#feedback-input { width: 100%; min-width: 0; flex: 1; }
}
/* ---- 互动课程引导条（?lesson= 模式，lesson.js 注入） ---- */
#lesson-bar {
position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
z-index: 80; width: min(680px, 94vw);
background: rgba(29, 32, 38, 0.96); border: 1px solid var(--border, #33373f);
border-radius: 14px; padding: 12px 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
}
#lesson-bar .lb-head {
display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
font-size: 12px; color: #8b919c;
}
#lesson-bar .lb-title { font-weight: 700; color: #d7dae0; font-size: 13px; }
#lesson-bar .lb-exit {
margin-left: auto; background: none; border: 1px solid #33373f; border-radius: 6px;
color: #8b919c; font-size: 12px; padding: 2px 10px; cursor: pointer;
}
#lesson-bar .lb-exit:hover { color: #d7dae0; border-color: #58a6ff; }
#lesson-bar .lb-text {
font-size: 17px; line-height: 1.6; color: #eef1f5; min-height: 28px;
margin-bottom: 10px;
}
#lesson-bar .lb-question { font-size: 13px; color: #a6adb8; margin-top: 6px; }
#lesson-bar .lb-links { margin-top: 8px; display: flex; gap: 16px; }
#lesson-bar .lb-links a { font-size: 13px; color: #58a6ff; text-decoration: none; }
#lesson-bar .lb-links a:hover { text-decoration: underline; }
#lesson-bar .lb-controls { display: flex; align-items: center; gap: 10px; }
#lesson-bar .lb-controls button {
background: #262a31; border: 1px solid #33373f; border-radius: 8px;
color: #d7dae0; font-size: 14px; padding: 7px 16px; cursor: pointer;
}
#lesson-bar .lb-controls button:hover:not(:disabled) { border-color: #58a6ff; }
#lesson-bar .lb-controls button:disabled { opacity: 0.35; cursor: default; }
#lesson-bar .lb-next { background: #58a6ff; border-color: #58a6ff; color: #0b0e12; font-weight: 700; }
#lesson-bar .lb-next:hover:not(:disabled) { filter: brightness(1.1); }
#lesson-bar .lb-pos { font-size: 12px; color: #8b919c; margin: 0 auto; }
#lesson-bar .lb-replay { font-size: 13px; }
@media (max-width: 768px) {
#lesson-bar { bottom: 8px; padding: 10px 12px; border-radius: 12px; }
#lesson-bar .lb-text { font-size: 15px; }
#lesson-bar .lb-controls button { padding: 8px 12px; font-size: 13px; }
}