/* app.css —— Altium Designer 25 网页版的界面样式（深色工程风；含浅色主题）。
   关键词：深色主题 / 停靠面板 / 菜单栏 / 工具栏 / 文档标签 / 图层栏 / 状态栏 / 对话框 / 表格 / 表单。
   约定：颜色一律走 CSS 变量；渲染层（canvas）通过 getComputedStyle 读同一批变量，保证配色统一。 */

/* ── 主题变量 ─────────────────────────────────────────────────────────── */
:root {
  --ad-bg: #1b1d21;
  --ad-panel: #24272c;
  --ad-panel-2: #2b2f35;
  --ad-panel-3: #33383f;
  --ad-line: #3a3f46;
  --ad-line-soft: #30343a;
  --ad-text: #d7dae0;
  --ad-text-dim: #8f97a3;
  --ad-text-bright: #f2f4f7;
  --ad-accent: #e8a33d;
  --ad-accent-2: #4a9eff;
  --ad-ok: #5cc98a;
  --ad-warn: #e0b341;
  --ad-error: #e05a5a;
  --ad-input-bg: #1f2228;
  --ad-hover: #32373f;
  --ad-active: #3c4149;

  /* 画布配色（render 层直接读） */
  --ad-sch-bg: #f4f2ec;
  --ad-sch-grid: #ded9cb;
  --ad-sch-grid-major: #cbc4b2;
  --ad-sch-wire: #1f5fbf;
  --ad-sch-bus: #143f86;
  --ad-sch-pin: #8a6d3b;
  --ad-sch-body: #f7e9c8;
  --ad-sch-body-line: #8a6d3b;
  --ad-sch-text: #24262b;
  --ad-sch-frame: #4a4f58;
  --ad-pcb-bg: #12141a;
  --ad-pcb-grid: #1f232b;
  --ad-pcb-grid-major: #2a2f39;
  --ad-pcb-board: #1a1f27;
  --ad-pcb-edge: #e8c04a;
  --ad-pcb-top: #c83232;
  --ad-pcb-bottom: #2f6fd0;
  --ad-pcb-silk: #e6e6e6;
  --ad-pcb-drill: #0b0d11;
  --ad-pcb-ratsnest: #ffffff;
  --ad-selection: #ff8c1a;
  --ad-hover: #ffd479;

  --ad-radius: 6px;
  --ad-radius-sm: 4px;
  --ad-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ad-font: system-ui, -apple-system, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

body.theme-light {
  --ad-bg: #eceef2;
  --ad-panel: #f7f8fa;
  --ad-panel-2: #eef0f4;
  --ad-panel-3: #e3e6eb;
  --ad-line: #c9cfd8;
  --ad-line-soft: #d8dde5;
  --ad-text: #1f2430;
  --ad-text-dim: #5b6472;
  --ad-text-bright: #0d1117;
  --ad-accent: #b9741a;
  --ad-accent-2: #1d4ed8;
  --ad-input-bg: #ffffff;
  --ad-hover: #e4e8ee;
  --ad-active: #d9dee6;
  --ad-pcb-bg: #e9ebef;
  --ad-pcb-grid: #dfe2e8;
  --ad-pcb-grid-major: #cfd4dc;
  --ad-pcb-board: #f2f4f7;
  --ad-pcb-edge: #a5751c;
  --ad-pcb-silk: #2a2f36;
}

/* ── 基础 ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.ad25 {
  display: grid;
  grid-template-rows: 30px 40px 1fr 26px;
  height: 100vh;
  overflow: hidden;
  background: var(--ad-bg);
  color: var(--ad-text);
  font: 13px/1.45 var(--ad-font);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.mono { font-family: var(--ad-mono); font-size: 12px; }
.dim { color: var(--ad-text-dim); }
.fine { color: var(--ad-text-dim); font-size: 12px; }
.error { color: var(--ad-error); }
button { font: inherit; color: inherit; }

/* ── 菜单栏 ───────────────────────────────────────────────────────────── */
#app-menubar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, var(--ad-panel-2), var(--ad-panel));
  border-bottom: 1px solid var(--ad-line);
  padding: 0 10px; user-select: none; position: relative; z-index: 60;
}
.menubar-left { display: flex; align-items: center; gap: 2px; height: 100%; }
.brand {
  font-weight: 800; letter-spacing: .06em; color: var(--ad-accent);
  padding: 0 10px 0 2px; font-size: 13px;
}
.menu {
  position: relative; padding: 6px 10px; border-radius: var(--ad-radius-sm);
  cursor: pointer; color: var(--ad-text); font-size: 12.5px;
}
.menu:hover, .menu.open { background: var(--ad-hover); }
.menu-popup {
  position: absolute; top: 100%; left: 0; min-width: 260px; z-index: 70;
  background: var(--ad-panel-3); border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius); box-shadow: 0 10px 26px rgba(0,0,0,.45);
  padding: 5px;
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 6px 10px; background: none; border: 0; border-radius: var(--ad-radius-sm);
  text-align: left; cursor: pointer; font-size: 12.5px; color: var(--ad-text);
}
.menu-item:hover { background: var(--ad-accent); color: #1a1c20; }
.menu-shortcut { color: var(--ad-text-dim); font-size: 11.5px; font-family: var(--ad-mono); }
.menu-item:hover .menu-shortcut { color: #2c2a24; }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--ad-line); }
#menubar-right { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.doc-crumb { color: var(--ad-text-dim); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  background: var(--ad-panel-3); color: var(--ad-text-dim); border: 1px solid var(--ad-line);
}
.badge-prod { background: rgba(92,201,138,.16); color: var(--ad-ok); border-color: rgba(92,201,138,.35); }
.badge-dev { background: rgba(224,179,65,.16); color: var(--ad-warn); border-color: rgba(224,179,65,.35); }

/* ── 工具栏 ───────────────────────────────────────────────────────────── */
#app-toolbars {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ad-panel); border-bottom: 1px solid var(--ad-line); padding: 0 8px;
  overflow-x: auto;
}
.toolbar { display: flex; align-items: center; height: 100%; gap: 4px; }
.tb-group { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-right: 1px solid var(--ad-line-soft); height: 22px; }
.tb-group:last-child { border-right: 0; }
.tb-btn, .icon-btn, .panel-btn, .mini-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--ad-radius-sm);
  color: var(--ad-text); cursor: pointer; padding: 3px;
}
.tb-btn { width: 26px; height: 24px; }
.tb-btn .ico svg, .icon-btn .ico svg, .panel-btn svg, .mini-btn svg { width: 16px; height: 16px; display: block; }
.tb-btn:hover, .icon-btn:hover, .panel-btn:hover, .mini-btn:hover { background: var(--ad-hover); border-color: var(--ad-line); }
.tb-btn:active { background: var(--ad-active); }
.icon-btn { padding: 3px 5px; }
.panel-btn { width: 20px; height: 20px; font-size: 13px; color: var(--ad-text-dim); }

/* ── 主体布局 ─────────────────────────────────────────────────────────── */
#app-body {
  display: grid;
  grid-template-columns: var(--dock-left-width, 268px) minmax(0, 1fr) var(--dock-right-width, 288px);
  min-height: 0;
}
.dock {
  display: flex; flex-direction: column; min-height: 0; position: relative;
  background: var(--ad-panel); border-right: 1px solid var(--ad-line);
  overflow-y: auto; overflow-x: hidden;
}
.dock.dock-drop-active { outline: 1px dashed var(--ad-accent); outline-offset: -2px; }
.dock-resizer {
  position: absolute; top: 0; bottom: 0; width: 6px; z-index: 9; cursor: col-resize;
  touch-action: none; user-select: none;
}
#dock-left > .dock-resizer { right: 0; }
#dock-right > .dock-resizer { left: 0; }
.dock-resizer:hover, .dock-resizer.dragging { background: var(--ad-accent); opacity: .55; }
.panel.dragging { opacity: .45; }
.panel.collapsed .panel-body { display: none; }
.panel.collapsed .panel-title { border-bottom: 0; }
#dock-right { border-right: 0; border-left: 1px solid var(--ad-line); }
.panel { display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--ad-line); }
.panel-title {
  display: flex; align-items: center; justify-content: flex-start; gap: 4px;
  padding: 5px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ad-text-dim); background: var(--ad-panel-2); cursor: default;
  position: sticky; top: 0; z-index: 3;
}
.panel-title > span:not(.panel-grip) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-grip {
  flex: 0 0 auto; cursor: grab; color: var(--ad-text-dim); letter-spacing: 0;
  padding: 0 2px; font-size: 12px; line-height: 1;
}
.panel-grip:active { cursor: grabbing; }
.panel-collapse { flex: 0 0 auto; }
.panel-body { padding: 8px 9px 12px; overflow-y: auto; font-size: 12.5px; }
#panel-projects .panel-body { max-height: 32vh; }
#panel-components .panel-body { max-height: 40vh; }
#panel-nets .panel-body { max-height: 26vh; }
#panel-messages .panel-body { max-height: 28vh; }

/* ── 工作区 ───────────────────────────────────────────────────────────── */
#workspace { display: grid; grid-template-rows: 32px minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: var(--ad-bg); }
#doc-tabs { display: flex; align-items: stretch; gap: 1px; background: var(--ad-panel-2); border-bottom: 1px solid var(--ad-line); overflow-x: auto; }
.doc-tab {
  display: flex; align-items: center; gap: 6px; padding: 0 10px; min-width: 92px;
  background: var(--ad-panel); border-right: 1px solid var(--ad-line); color: var(--ad-text-dim);
  cursor: pointer; font-size: 12.5px; position: relative; user-select: none;
}
.doc-tab .ico svg { width: 14px; height: 14px; }
.doc-tab:hover { background: var(--ad-hover); color: var(--ad-text); }
.doc-tab.active { background: var(--ad-bg); color: var(--ad-text-bright); }
.doc-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ad-accent);
}
.doc-tab-add { min-width: 34px; justify-content: center; color: var(--ad-text-dim); }
.doc-close { background: none; border: 0; color: var(--ad-text-dim); cursor: pointer; padding: 0 2px; line-height: 1; }
.doc-close:hover { color: var(--ad-error); }

#doc-host { position: relative; min-height: 0; background: var(--ad-bg); overflow: hidden; }
.doc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#canvas-sch { background: var(--ad-sch-bg); }
#canvas-pcb { background: var(--ad-pcb-bg); }
#canvas-3d { background: radial-gradient(circle at 50% 30%, #1d222b, #0c0e12 75%); }
.doc-empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: var(--ad-bg); z-index: 2;
}
.empty-card {
  max-width: 560px; background: var(--ad-panel); border: 1px solid var(--ad-line);
  border-radius: 12px; padding: 24px 26px; box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.empty-card h2 { margin: 0 0 8px; font-size: 18px; color: var(--ad-text-bright); }
.empty-card p { margin: 6px 0; color: var(--ad-text-dim); }
.empty-card.error { border-color: var(--ad-error); }
.empty-card .btn { margin-right: 8px; margin-top: 10px; }

/* 图层栏 */
#layer-tabs {
  display: flex; align-items: center; gap: 2px; padding: 4px 8px;
  background: var(--ad-panel-2); border-top: 1px solid var(--ad-line); overflow-x: auto;
}
.layer-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  background: var(--ad-panel); border: 1px solid var(--ad-line); border-radius: 999px;
  color: var(--ad-text-dim); cursor: pointer; font-size: 11.5px; white-space: nowrap;
}
.layer-tab:hover { color: var(--ad-text); border-color: var(--ad-text-dim); }
.layer-tab.active { color: var(--ad-text-bright); border-color: var(--ad-accent); background: var(--ad-panel-3); }
.layer-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ── 状态栏 ───────────────────────────────────────────────────────────── */
#statusbar {
  display: flex; align-items: center; gap: 12px; padding: 0 10px;
  background: var(--ad-panel-2); border-top: 1px solid var(--ad-line);
  font-size: 11.5px; color: var(--ad-text-dim);
}
.status-msg { color: var(--ad-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.status-spacer { flex: 1; }
.status-cell { white-space: nowrap; }
#status-tool { color: var(--ad-accent); }

/* ── 面板内容：工程树 ──────────────────────────────────────────────────── */
.proj-name { font-weight: 700; color: var(--ad-text-bright); margin-bottom: 2px; }
.proj-meta { color: var(--ad-text-dim); font-size: 11.5px; margin-bottom: 8px; }
.proj-section { margin: 10px 0 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ad-text-dim); }
.proj-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--ad-radius-sm);
  cursor: pointer; color: var(--ad-text);
}
.proj-row:hover { background: var(--ad-hover); }
.proj-row.active { background: var(--ad-active); color: var(--ad-text-bright); }
.proj-icon { color: var(--ad-accent-2); }
.proj-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-badge { font-size: 10.5px; color: var(--ad-text-dim); background: var(--ad-panel-3); border-radius: 999px; padding: 0 6px; }
.proj-actions, .panel-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

/* ── 面板内容：库浏览器 ────────────────────────────────────────────────── */
.panel-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.lib-cell {
  background: var(--ad-panel-2); border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm);
  padding: 4px; cursor: pointer; color: var(--ad-text-dim);
}
.lib-cell:hover { border-color: var(--ad-accent); color: var(--ad-text); }
.lib-svg { width: 100%; height: auto; display: block; }
.lib-svg rect { fill: none; stroke: var(--ad-accent-2); stroke-width: 1; }
.lib-svg .lib-pad { fill: var(--ad-accent); stroke: none; }
.lib-svg .lib-court { stroke: var(--ad-text-dim); stroke-dasharray: 2 2; }
.panel-hint { color: var(--ad-text-dim); font-size: 11.5px; margin-top: 7px; }
.panel-hint.ok { color: var(--ad-ok); }
.panel-hint.error { color: var(--ad-error); }

/* 库编辑器（符号/封装） */
.le-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.le-side select { width: 100%; margin: 8px 0 6px; }
.le-preview { margin-top: 12px; min-height: 220px; padding: 8px; border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); background: var(--ad-input-bg); color: var(--ad-text); overflow: hidden; }
.le-preview svg { display: block; width: 100%; height: 260px; }
.le-table input, .le-table select { width: 100%; min-width: 58px; padding: 3px 5px; font-size: 12px; }
.le-table td { padding: 3px 3px; vertical-align: middle; }
.le-table th { white-space: nowrap; }
.le-layout h4 { margin: 12px 0 6px; }

/* ── 表格 ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow: auto; max-height: 44vh; border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mini-table th, .mini-table td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--ad-line-soft); vertical-align: top; }
.mini-table th { position: sticky; top: 0; background: var(--ad-panel-3); color: var(--ad-text-dim); font-weight: 600; font-size: 11px; }
.mini-table tr:hover td { background: var(--ad-hover); }
.mini-table .num { text-align: right; font-family: var(--ad-mono); }
.net-power .net-name { color: var(--ad-warn); }
.net-port .net-name { color: var(--ad-accent-2); }
.stat-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--ad-panel-3); color: var(--ad-text-dim); font-size: 11px;
}
.stat-pill.ok { color: var(--ad-ok); }
.stat-pill.warn { color: var(--ad-warn); }
.stat-pill.bad { color: var(--ad-error); }

/* ── 属性表单 ─────────────────────────────────────────────────────────── */
.prop-title { font-weight: 700; color: var(--ad-text-bright); margin-bottom: 8px; }
.prop-row { display: grid; grid-template-columns: 86px 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.prop-label { color: var(--ad-text-dim); font-size: 11.5px; }
.prop-input { display: flex; gap: 4px; min-width: 0; }
.prop-hint { grid-column: 2; color: var(--ad-text-dim); font-size: 11px; }
.input {
  width: 100%; min-width: 0; padding: 3px 6px; font: inherit; font-size: 12px;
  color: var(--ad-text); background: var(--ad-input-bg);
  border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm);
}
.input:focus { outline: none; border-color: var(--ad-accent); box-shadow: 0 0 0 2px rgba(232,163,61,.15); }
.input.tiny { width: 64px; padding: 2px 4px; }
textarea.input { resize: vertical; min-height: 120px; }
select.input { padding: 3px 4px; }
.stack { display: block; margin-bottom: 10px; color: var(--ad-text-dim); font-size: 12px; }
.stack .input { margin-top: 4px; }

/* ── 按钮 / 标签 ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  background: var(--ad-panel-3); color: var(--ad-text); border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius-sm); cursor: pointer; font-size: 12px;
}
.btn:hover { background: var(--ad-hover); color: #1a1c20; border-color: var(--ad-text-dim); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--ad-accent); border-color: var(--ad-accent); color: #1a1c20; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--ad-error); border-color: rgba(224,90,90,.4); }
.btn.small { padding: 2px 8px; font-size: 11.5px; }
.tab-btn {
  padding: 2px 8px; background: none; border: 1px solid transparent; border-radius: var(--ad-radius-sm);
  color: var(--ad-text-dim); cursor: pointer; font-size: 11.5px;
}
.tab-btn.active { color: var(--ad-text-bright); border-color: var(--ad-line); background: var(--ad-panel-3); }
.tag { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.tag.bad { background: rgba(224,90,90,.18); color: var(--ad-error); }
.tag.warn { background: rgba(224,179,65,.18); color: var(--ad-warn); }

/* ── 图层 / 规则 / 消息列表 ────────────────────────────────────────────── */
.layer-list, .rule-list { display: flex; flex-direction: column; gap: 2px; }
.layer-row, .rule-row {
  display: flex; align-items: center; gap: 7px; padding: 3px 5px; border-radius: var(--ad-radius-sm);
  cursor: pointer; font-size: 12px;
}
.layer-row:hover, .rule-row:hover { background: var(--ad-hover); }
.layer-row.active { background: var(--ad-active); color: var(--ad-text-bright); }
.layer-name { flex: 1; }
.layer-kind { color: var(--ad-text-dim); font-size: 10.5px; }
.rule-value { color: var(--ad-accent-2); }
.rule-scope { color: var(--ad-text-dim); font-size: 10.5px; }
.msg-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.msg-row { display: flex; gap: 6px; align-items: baseline; padding: 3px 5px; border-radius: var(--ad-radius-sm); cursor: pointer; font-size: 11.5px; }
.msg-row:hover { background: var(--ad-hover); }
.msg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ad-text-dim); flex: 0 0 auto; margin-top: 5px; }
.msg-row.error .msg-dot { background: var(--ad-error); }
.msg-row.warn .msg-dot { background: var(--ad-warn); }
.msg-row.ok .msg-dot { background: var(--ad-ok); }
.msg-text { color: var(--ad-text-dim); overflow-wrap: anywhere; }

/* ── 对话框 ───────────────────────────────────────────────────────────── */
#modal-host { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.modal-overlay {
  position: absolute; inset: 0; background: rgba(6,8,11,.55); backdrop-filter: blur(2px);
  display: grid; place-items: center; pointer-events: auto; padding: 24px;
}
.modal {
  width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--ad-panel); border: 1px solid var(--ad-line); border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.modal-wide { width: min(980px, 96vw); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 16px 9px; border-bottom: 1px solid var(--ad-line); }
.modal-head h3 { margin: 0; font-size: 15px; color: var(--ad-text-bright); }
.modal-sub { margin: 4px 0 0; color: var(--ad-text-dim); font-size: 11.5px; }
.modal-body { padding: 13px 16px; overflow: auto; font-size: 12.5px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--ad-line); }
.modal-error { padding: 0 16px 10px; color: var(--ad-error); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 3px; color: var(--ad-text-dim); font-size: 11.5px; }
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.check-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ad-text); }
.pick-list { display: flex; flex-direction: column; gap: 3px; max-height: 46vh; overflow: auto; margin-top: 8px; }
.pick-row { display: grid; grid-template-columns: 1.2fr 90px 2fr auto; gap: 10px; align-items: center; padding: 4px 6px; border-radius: var(--ad-radius-sm); }
.pick-row:hover { background: var(--ad-hover); }
.pick-name { font-weight: 600; color: var(--ad-text); }
.code-block {
  background: var(--ad-input-bg); border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm);
  padding: 10px 12px; font-family: var(--ad-mono); font-size: 11.5px; line-height: 1.55;
  max-height: 52vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.stack-preview { margin-top: 12px; }
.stack-canvas { width: 100%; height: auto; border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); background: var(--ad-input-bg); }

/* ── 评论 / 需求评审 ─────────────────────────────────────────────────── */
.tag.ok { background: rgba(92,201,138,.18); color: var(--ad-ok); }
.review-list { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow: auto; padding-right: 3px; }
.review-card { border: 1px solid var(--ad-line); border-radius: var(--ad-radius-sm); background: var(--ad-panel-3); padding: 9px 11px; }
.review-card.resolved { opacity: .74; }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.review-meta { color: var(--ad-text-dim); font-size: 11.5px; margin-top: 4px; }
.review-body { white-space: pre-wrap; margin: 7px 0; font-size: 12.5px; line-height: 1.45; }
.review-replies { border-left: 2px solid var(--ad-line); padding-left: 8px; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.review-reply { white-space: pre-wrap; font-size: 11.5px; color: var(--ad-text-dim); }
.review-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.review-actions .input { flex: 1; min-width: 120px; }
.review-stats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── Toast ────────────────────────────────────────────────────────────── */
#toast-host { position: fixed; right: 16px; bottom: 40px; display: flex; flex-direction: column; gap: 8px; z-index: 300; pointer-events: none; }
.toast {
  padding: 8px 14px; border-radius: 8px; font-size: 12.5px; max-width: 420px;
  background: var(--ad-panel-3); color: var(--ad-text); border: 1px solid var(--ad-line);
  box-shadow: 0 8px 22px rgba(0,0,0,.4); animation: toast-in .18s ease-out;
}
.toast-ok { border-color: rgba(92,201,138,.5); }
.toast-warn { border-color: rgba(224,179,65,.5); }
.toast-error { border-color: rgba(224,90,90,.6); color: #ffd7d7; }
.toast-out { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 诊断输出（默认隐藏，但浏览器自检读得到）─────────────────────────── */
#js-errors, #selftest-output, #app-diagnostics { display: none; }

/* ── 响应式 ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  #app-body { grid-template-columns: min(var(--dock-left-width, 232px), 232px) minmax(0, 1fr) min(var(--dock-right-width, 252px), 252px); }
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  #app-body { grid-template-columns: min(var(--dock-left-width, 210px), 210px) minmax(0, 1fr); }
  #dock-right { display: none; }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  #app-menubar, #app-toolbars, .dock, #doc-tabs, #layer-tabs, #statusbar { display: none !important; }
  body.ad25 { display: block; height: auto; }
  #workspace { display: block; }
  #doc-host { height: 100vh; }
}