/* cpp2c Web — STC 在线 IDE 风格（SPEC-9）
 * 浅色蓝为默认主题；[data-theme="dark"] 为原黑灰色调，可一键切换。 */
:root, [data-theme="light"] {
  --bg:        #ffffff;
  --bg-soft:   #f3f6fb;
  --bg-panel:  #f7f9fc;
  --border:    #dfe4ee;
  --text:      #2b3444;
  --text-dim:  #7d8797;
  --accent:    #2563eb;      /* STC 蓝 */
  --accent-hi: #3b82f6;
  --gutter-bg: #f7f9fc;
  --gutter-fg: #a6b0c0;
  --readonly-fg: #5b6b82;
  --err:       #e5534b;
  --warn:      #d99a2b;
  --mono:      Consolas, "Courier New", monospace;
}
[data-theme="dark"] {
  --bg:        #1e1e1e;
  --bg-soft:   #252526;
  --bg-panel:  #1b1b1c;
  --border:    #3c3c3c;
  --text:      #d4d4d4;
  --text-dim:  #8a8a8a;
  --accent:    #0e7a3d;      /* STC 绿（原暗色主题） */
  --accent-hi: #12a150;
  --gutter-bg: #1e1e1e;
  --gutter-fg: #6e6e6e;
  --readonly-fg: #c8d3df;
  --err:       #f14c4c;
  --warn:      #cca700;
}

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

[hidden] { display: none !important; }   /* 防止 display:flex 覆盖 hidden 属性 */

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 "Microsoft YaHei", "Segoe UI", sans-serif;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 44px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
a.brand { text-decoration: none; color: inherit; }
a.brand:hover { filter: brightness(1.1); }
.logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: .5px;
}
.sub { color: var(--text-dim); font-size: 12px; }
/* 测试阶段标识（顶栏品牌后） */
.beta-tag {
  font-size: 11px;
  line-height: 1.5;
  color: #fff;
  background: var(--warn);
  border-radius: 3px;
  padding: 0 6px;
  user-select: none;
  white-space: nowrap;
}

.toolbox { display: flex; align-items: center; gap: 12px; }
.toolbox label { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 12px;
}
select:focus { outline: 1px solid var(--accent-hi); }

button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
button:hover { background: var(--bg-soft); border-color: var(--accent-hi); color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { background: var(--bg); border-color: var(--border); color: var(--text); }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 22px;
}
button.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }
button.primary.busy { opacity: .6; pointer-events: none; }

/* ---------- 菜单栏（下拉菜单） ---------- */
.menu-wrap { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 176px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  padding: 4px;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.dropdown-menu button:hover { background: var(--bg-soft); border-color: var(--border); color: var(--accent); }
.dropdown-menu button:disabled { opacity: .45; cursor: not-allowed; }
.dropdown-menu button:disabled:hover { background: none; border-color: none; color: var(--text); }
.dropdown-menu button.busy { opacity: .6; pointer-events: none; }
.menu-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: var(--text-dim);
  font-size: 12px;
}
.menu-label select {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
}
.menu-label select:focus { outline: 1px solid var(--accent-hi); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.flex { flex: 1; }

/* ---------- 通用模态（替代原生 prompt/confirm） ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  width: 340px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  overflow: hidden;
}
.modal-title {
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.modal-body { padding: 12px 14px; font-size: 12px; color: var(--text); }
.modal-body input {
  width: 100%;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: 12px/1.4 var(--mono);
}
.modal-body input:focus { outline: 1px solid var(--accent-hi); }
.modal-err { color: var(--err); margin-top: 8px; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

/* ---------- 双栏 ---------- */
#setdlg .modal { width: 400px; }
.set-row { margin-bottom: 12px; }
.set-lbl { font-weight: 600; margin-bottom: 4px; }
.set-row select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: 12px/1.4 var(--mono);
}
.set-row select:focus { outline: 1px solid var(--accent-hi); }
.set-hint { margin-top: 4px; color: var(--text-dim); font-size: 11px; line-height: 1.4; }

.panes {
  flex: 1;
  display: flex;
  min-height: 0;              /* 允许收缩以容纳 console */
}

/* 左侧文件浏览 */
.filebar {
  flex: 0 0 210px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
}
.filebar-title {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.filebar-body {
  flex: 1;
  overflow: auto;
  padding: 4px 0;
  font-size: 12px;
}
.filebar-empty { padding: 8px 10px; color: var(--text-dim); }

/* 折叠分组（include / cpp / src） */
.file-group-title {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 10px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.file-group-title:hover { background: var(--bg-soft); border-color: var(--border); color: var(--accent); }
.file-group-title .caret { font-size: 10px; width: 12px; color: var(--text-dim); }
.file-group-title .cnt { color: var(--text-dim); font-weight: 400; font-size: 11px; }
.file-group-body.collapsed { display: none; }

.file-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text);
  padding: 3px 10px 3px 22px;
  font-size: 12px;
  font-family: var(--mono);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-item:hover { background: var(--bg-soft); border-color: var(--border); color: var(--accent); }
.file-item.active { background: var(--accent); color: #fff; }
.file-item.active:hover { background: var(--accent-hi); color: #fff; }

/* 文件树可删除项：行容器 + 行尾删除按钮 */
.file-row { display: flex; align-items: center; }
.file-row .file-item { flex: 1; min-width: 0; }
.file-del {
  flex-shrink: 0;
  margin: 0 6px 0 2px;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.file-del:hover { color: var(--err); background: var(--bg-soft); border-color: var(--border); }

/* examples 静态示例条目（SPEC-10）：前置箭头图标 + 二级缩进 */
.file-item.example { padding-left: 4px; color: var(--accent); }
.file-item.kind-c::before { content: "C"; margin-right: 6px; font-size: 9px; color: var(--text-dim); }
.file-item.kind-cpp::before { content: "C++"; margin-right: 6px; font-size: 9px; color: var(--text-dim); }
.file-example-head { display: flex; align-items: center; }
.file-example-head .file-item.example { flex: 1; min-width: 0; }
.file-caret {
  flex-shrink: 0;
  width: 16px;
  padding: 3px 2px;
  background: none;
  border: none;
  font: inherit;
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
}
.file-caret:hover { color: var(--accent); }
.file-sub { padding-left: 10px; }
.file-sub.collapsed { display: none; }

/* 中间编辑区选项卡（main.cpp + 已打开的文件可堆叠） */
.tabbar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 4px 8px 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  min-height: 31px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--mono);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.tab:hover { background: var(--bg-soft); }
.tab.active {
  background: var(--bg);
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 2px 0 var(--accent);
}
.tab-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
  border-radius: 3px;
}
.tab-close:hover { color: var(--err); background: var(--bg-soft); border-color: var(--border); }

.pane {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
}
.pane:last-child { border-right: none; }

.pane-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-hi); }
.dot.out { background: var(--accent); }
.lines-info { font-size: 11px; }

.editor {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}
.gutter {
  width: 44px;
  padding: 6px 8px 6px 0;
  background: var(--gutter-bg);
  color: var(--gutter-fg);
  text-align: right;
  overflow: hidden;
  user-select: none;
  font: 12px/1.5 var(--mono);
  border-right: 1px solid var(--border);
  white-space: pre;
}
textarea {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: none;
  outline: none;
  resize: none;
  padding: 6px 10px;
  font: 12px/1.5 var(--mono);
  tab-size: 4;
  overflow: auto;
  white-space: pre;
}
textarea[readonly] { color: var(--readonly-fg); }
textarea::placeholder { color: var(--text-dim); }

/* ---------- 输出面板 ---------- */
.console {
  height: 110px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
}
.console-title {
  padding: 3px 12px;
  font-size: 11px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.console-body {
  flex: 1;
  overflow: auto;
  padding: 6px 12px;
  font: 12px/1.5 var(--mono);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
}
.console-body.err { color: var(--err); }
.console-body.ok  { color: var(--accent); }

/* ---------- 状态栏 ---------- */
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 12px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  height: 22px;
  line-height: 16px;
}
#statusText {                        /* 左侧状态文本：超长省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.statusbar-ver {                     /* 右下角版本号：不压缩 */
  flex-shrink: 0;
  font-size: 11px;
  opacity: .85;
  letter-spacing: .5px;
  user-select: none;
}
.statusbar.warn { background: var(--warn); }
.statusbar.err  { background: var(--err); }

/* ---------- 帮助视图（特性支持大表） ---------- */
.help-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.help-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
}
.help-title .hint { font-weight: 400; font-size: 11px; color: var(--text-dim); }
.help-close {
  padding: 2px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.help-close:hover { color: var(--err); border-color: var(--border); background: var(--bg); }
.help-body {
  flex: 1;
  overflow: auto;
  padding: 12px 16px 24px;
  font-size: 12px;
  line-height: 1.6;
}
.help-body h1 { font-size: 18px; margin: 8px 0 12px; }
.help-body h2 { font-size: 15px; margin: 20px 0 10px; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.help-body h3 { font-size: 13px; margin: 14px 0 6px; }
.help-body p { margin: 6px 0; }
.help-body ul { margin: 6px 0 6px 20px; }
.help-body li { margin: 2px 0; }
.help-body code { background: var(--bg-soft); padding: 1px 4px; border-radius: 3px; font-family: var(--mono); font-size: 11px; }
.help-body blockquote { margin: 8px 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--bg-soft); }
.tbl-wrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: 4px; }
.help-body table { border-collapse: collapse; width: 100%; min-width: 900px; }
.help-body th, .help-body td { border: 1px solid var(--border); padding: 5px 10px; text-align: left; }
.help-body td:nth-child(1), .help-body td:nth-child(2) { white-space: normal; min-width: 130px; }
.help-body td:nth-child(n+3) { white-space: nowrap; text-align: center; }
.help-body thead th { background: var(--bg-soft); color: var(--text); font-weight: 700; white-space: nowrap; }
.help-body tbody tr:nth-child(even) { background: var(--bg-panel); }
.help-body tbody tr:hover { background: var(--bg-soft); }

/* 支持状态符号着色：● 蓝（支持）、? 黄（部分支持）、? 与 — 红（不支持/不适用） */
.sym-ok   { color: var(--accent); }
.sym-part { color: var(--warn); }
.sym-no   { color: var(--err); }