/* app.css —— AutoCAD 2014 网页复刻的界面样式（浅色为默认，深色可切）。全部原创，无第三方主题。 */

:root {
  --shell-bg: #eef0f2;
  --titlebar-bg: #2c3136;
  --titlebar-ink: #e8edf2;
  --titlebar-muted: #9aa6b2;
  --ribbon-bg: #f2f4f6;
  --ribbon-tab-bg: #dfe3e7;
  --ribbon-tab-active: #f8f9fa;
  --ribbon-tab-ink: #2a2f34;
  --ribbon-border: #c8ced4;
  --panel-bg: #fafbfc;
  --panel-hover: #dceafb;
  --panel-active: #bcdcf7;
  --ink: #1f242a;
  --ink-muted: #5c6771;
  --accent: #1a6fb5;
  --accent-ink: #ffffff;
  --danger: #b4232a;
  --command-bg: #e9ecef;
  --command-ink: #1d2226;
  --command-line-bg: #f7f8f9;
  --status-bg: #dde2e7;
  --status-ink: #23282d;
  --palette-bg: #f4f6f8;
  --palette-head-bg: #e3e8ec;
  --modal-bg: #fbfcfd;
  --border: #c4cbd2;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
  --toolbar-bg: #e8ebee;
  --badge-bg: #b4232a;
  --focus: #1a6fb5;
  --qat-hover: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] {
  --shell-bg: #23282d;
  --titlebar-bg: #1b1f23;
  --ribbon-bg: #2b3136;
  --ribbon-tab-bg: #242a2f;
  --ribbon-tab-active: #363d43;
  --ribbon-tab-ink: #dbe3ea;
  --ribbon-border: #171b1f;
  --panel-bg: #31383e;
  --panel-hover: #3d4a56;
  --panel-active: #465a6c;
  --ink: #e6edf3;
  --ink-muted: #9fb0be;
  --command-bg: #23282d;
  --command-ink: #dbe4ec;
  --command-line-bg: #2b3136;
  --status-bg: #23282d;
  --status-ink: #cfdae5;
  --palette-bg: #2b3136;
  --palette-head-bg: #23282d;
  --modal-bg: #2b3136;
  --border: #151a1e;
  --toolbar-bg: #23282d;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: var(--shell-bg);
}

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

.hidden { display: none !important; }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

/* ===================== 标题栏 ===================== */
#titlebar {
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 0;
  background: var(--titlebar-bg);
  color: var(--titlebar-ink);
  user-select: none;
}

.app-menu-btn {
  width: 46px;
  height: 36px;
  border: 0;
  background: #b4232a;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: filter 0.15s;
}
.app-menu-btn:hover { filter: brightness(1.12); }
.a-mark { font-size: 21px; font-weight: 700; font-style: italic; line-height: 1; }

.qat { display: flex; align-items: center; gap: 2px; }
.qat-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 3px;
  background: transparent; color: var(--titlebar-ink);
  cursor: pointer;
}
.qat-btn:hover { background: var(--qat-hover); }
.qat-btn .ico { width: 17px; height: 17px; }
.qat-workspace {
  display: flex; align-items: center; gap: 5px;
  height: 26px; margin-left: 4px; padding: 0 8px;
  border: 0; border-radius: 3px;
  background: transparent; color: var(--titlebar-muted);
  cursor: pointer; font-size: 12px;
}
.qat-workspace:hover { background: var(--qat-hover); color: var(--titlebar-ink); }
.qat-workspace .ico { width: 16px; height: 16px; }
.caret { font-style: normal; font-size: 10px; opacity: 0.8; }

.title-text {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  color: var(--titlebar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.edition-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 9px;
  background: var(--badge-bg);
  color: #fff;
}

.infocenter {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 12px;
  color: var(--titlebar-muted);
  cursor: pointer; font-size: 12px;
}
.infocenter:hover { background: var(--qat-hover); color: var(--titlebar-ink); }
.ic-dot { width: 7px; height: 7px; border-radius: 50%; background: #48b06b; box-shadow: 0 0 6px #48b06b; }

.title-search { margin-left: 6px; }
.title-search-input {
  width: 170px; height: 24px;
  border-radius: 12px;
  border: 1px solid #454c53;
  background: #3a4148;
  color: #e6edf3;
  padding: 0 11px;
  outline: none;
  font-size: 12px;
}
.title-search-input::placeholder { color: #8a97a4; }
.title-search-input:focus { border-color: #6f8ea8; background: #414a52; }

/* ===================== 应用程序菜单 ===================== */
#appmenu {
  display: none;
  position: fixed;
  top: 36px; left: 0;
  width: 560px;
  background: #f6f7f9;
  color: #23282d;
  border: 1px solid #b9c1c8;
  box-shadow: var(--shadow);
  z-index: 80;
  grid-template-columns: 1fr 220px;
}
#appmenu.open { display: grid; }
.appmenu-main { padding: 10px 0; border-right: 1px solid #d7dde3; }
.appmenu-item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 10px 18px;
  border: 0; background: transparent; text-align: left;
  cursor: pointer; font-size: 14px;
}
.appmenu-item:hover { background: #dceafb; }
.appmenu-item em { font-style: normal; font-size: 11px; color: #7a858f; letter-spacing: 0.5px; }
.appmenu-recent { padding: 10px 18px; border-top: 1px solid #dfe4e9; margin-top: 8px; }
.appmenu-recent h4 { margin: 0 0 6px; font-size: 12px; color: #4c5761; }
.appmenu-recent p { margin: 0; font-size: 11.5px; }
.muted { color: #7a858f; }
.appmenu-side { padding: 12px; background: #eceff2; display: flex; flex-direction: column; gap: 4px; }
.appmenu-link {
  border: 0; background: transparent; text-align: left;
  padding: 7px 8px; cursor: pointer; border-radius: 3px; font-size: 12.5px;
}
.appmenu-link:hover { background: #dceafb; }
.appmenu-note { margin-top: auto; font-size: 10.5px; line-height: 1.5; color: #6b7681; }

/* ===================== 功能区 ===================== */
#ribbon {
  flex: 0 0 auto;
  background: var(--ribbon-bg);
  border-bottom: 1px solid var(--ribbon-border);
}
#ribbon-tabs {
  display: flex; align-items: stretch;
  height: 27px;
  padding-left: 6px;
  background: var(--ribbon-tab-bg);
  border-bottom: 1px solid var(--ribbon-border);
}
.ribbon-tab {
  border: 0;
  padding: 0 15px;
  background: transparent;
  color: var(--ribbon-tab-ink);
  cursor: pointer;
  font-size: 12.5px;
  border-radius: 3px 3px 0 0;
  position: relative;
  top: 1px;
}
.ribbon-tab:hover { background: rgba(255, 255, 255, 0.45); }
[data-theme="dark"] .ribbon-tab:hover { background: rgba(255, 255, 255, 0.07); }
.ribbon-tab.active {
  background: var(--ribbon-tab-active);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--accent);
}
.ribbon-tab-filler { flex: 1; }
.ribbon-collapse {
  width: 30px; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.ribbon-collapse:hover { background: rgba(0, 0, 0, 0.06); }

#ribbon-panels {
  display: flex;
  align-items: stretch;
  gap: 1px;
  height: 104px;
  padding: 4px 6px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
body.ribbon-min #ribbon-panels { display: none; }

.ribbon-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 76px;
  padding: 2px 6px 0;
  border-right: 1px solid var(--ribbon-border);
  background: var(--panel-bg);
}
.ribbon-panel-body { flex: 1; display: flex; gap: 4px; align-items: flex-start; min-width: 0; }
.ribbon-row { display: flex; flex: 0 0 auto; }
.large-row { gap: 2px; }
.small-grid {
  display: grid;
  grid-template-rows: repeat(3, 21px);
  grid-auto-flow: column;
  grid-auto-columns: minmax(78px, max-content);
  gap: 1px 5px;
  align-content: start;
}
.ribbon-panel-label {
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-muted);
  padding: 1px 0 3px;
  white-space: nowrap;
}

.rb-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 3px 5px;
  text-align: left;
  white-space: nowrap;
}
.rb-btn:hover { background: var(--panel-hover); border-color: #b6d3ee; }
.rb-btn:active { background: var(--panel-active); }
.rb-btn.large {
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  width: 56px;
  min-height: 70px;
  padding: 4px 2px;
  font-size: 11px;
}
.rb-btn.large .ico { width: 27px; height: 27px; }
.rb-btn.small { font-size: 11px; padding: 1px 3px; height: 20px; gap: 3px; }
.rb-btn.small .ico { width: 14px; height: 14px; }
.rb-btn.large span { line-height: 1.15; text-align: center; white-space: normal; }
.rb-btn.disabled { opacity: 0.45; cursor: not-allowed; }
.rb-btn.disabled:hover { background: transparent; border-color: transparent; }

.ribbon-selects { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.ribbon-select { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-muted); }
.rs-label { width: 28px; text-align: right; }
.rs-input {
  height: 21px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: #fff;
  color: #1f242a;
  padding: 0 3px;
  max-width: 118px;
  font-size: 11.5px;
}
[data-theme="dark"] .rs-input { background: #1f2428; color: #dbe4ec; }
select.rs-input { min-width: 66px; }

.ribbon-panel.ribbon-hidden { display: none; }
#ribbon-more {
  align-self: flex-start;
  margin: 26px 5px 0;
  padding: 5px 8px;
  border: 1px dashed var(--border);
  background: transparent;
  font-size: 11px;
  color: var(--ink-muted);
  cursor: pointer;
  height: auto;
}
#ribbon-more:hover { background: var(--panel-hover); color: var(--ink); }
.ribbon-flyout {
  position: fixed;
  z-index: 95;
  display: flex;
  gap: 6px;
  padding: 8px;
  max-width: calc(100vw - 20px);
  overflow-x: auto;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.flyout-panel { display: flex; flex-direction: column; gap: 5px; padding: 2px 8px; border-right: 1px solid var(--border); }
.flyout-panel:last-child { border-right: 0; }
.flyout-title { font-size: 10.5px; color: var(--ink-muted); text-align: center; }

/* ===================== 经典菜单 / 工具栏 ===================== */
#menubar {
  display: flex;
  gap: 2px;
  height: 24px;
  padding: 0 6px;
  align-items: stretch;
  background: var(--ribbon-tab-bg);
  border-bottom: 1px solid var(--ribbon-border);
}
.menu-item { position: relative; }
.menu-title {
  border: 0; background: transparent; height: 24px; padding: 0 9px;
  cursor: pointer; color: var(--ribbon-tab-ink); font-size: 12px;
}
.menu-title:hover { background: var(--panel-hover); }
.menu-drop {
  display: none;
  position: absolute; top: 24px; left: 0;
  min-width: 230px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 60;
  padding: 4px 0;
}
.menu-drop.open { display: block; }
.menu-row {
  display: flex; justify-content: space-between; gap: 16px;
  width: 100%; border: 0; background: transparent;
  padding: 5px 12px; text-align: left; cursor: pointer; font-size: 12px;
}
.menu-row:hover { background: var(--panel-hover); }
.menu-row em { font-style: normal; color: var(--ink-muted); font-size: 10.5px; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 8px; }

#toolbars {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 6px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--ribbon-border);
}
.classic-toolbar {
  display: flex; align-items: center; gap: 1px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel-bg);
}
.ctb-label { font-size: 10.5px; color: var(--ink-muted); padding: 0 5px 0 2px; border-right: 1px solid var(--border); margin-right: 3px; }
.ctb-btn {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 2px;
  background: transparent; cursor: pointer; color: var(--ink);
}
.ctb-btn:hover { background: var(--panel-hover); border-color: #b6d3ee; }
.ctb-btn .ico { width: 17px; height: 17px; }

/* ===================== 工作区 ===================== */
#workspace {
  flex: 1;
  display: flex;
  min-height: 0;
  background: var(--shell-bg);
}
#drawing-area {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
}
#canvas-wrap { position: relative; flex: 1; min-height: 0; }
#cad-canvas {
  display: block;
  background: #1e2226;
  cursor: crosshair;
  touch-action: none;
}
#cad-canvas:active { cursor: crosshair; }

.view-overlay {
  position: absolute; top: 8px; left: 10px;
  display: flex; flex-direction: column; gap: 3px;
  pointer-events: none;
  font-size: 10.5px;
  color: #9fb2c2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.vo-badge {
  align-self: flex-start;
  padding: 1px 7px;
  border: 1px solid #3c4a56;
  border-radius: 9px;
  background: rgba(24, 30, 36, 0.72);
  color: #cfe0ee;
  font-size: 10.5px;
  letter-spacing: 0.3px;
}
.vo-hint { opacity: 0.65; }

#quick-props {
  position: absolute; top: 46px; left: 10px;
  max-width: calc(100% - 20px);
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #3b4854;
  border-radius: 3px;
  background: rgba(28, 34, 40, 0.92);
  color: #dbe6ef;
  z-index: 5;
  font-size: 11px;
}
.qp-item { display: flex; align-items: center; gap: 4px; }
.qp-label { color: #8fa4b6; font-size: 10.5px; }
.qp-input {
  height: 20px;
  max-width: 130px;
  border: 1px solid #46535f;
  border-radius: 2px;
  background: #1c2226;
  color: #e3edf5;
  padding: 0 4px;
  font-size: 11px;
}
.qp-empty { color: #8fa4b6; }
.qp-count { color: #9ad9ff; font-weight: 600; }

#model-tabs {
  display: flex;
  align-items: stretch;
  height: 24px;
  padding-left: 2px;
  background: var(--command-bg);
  border-top: 1px solid var(--border);
  flex: 0 0 24px;
}
.mtab {
  border: 0; border-right: 1px solid var(--border);
  background: transparent; padding: 0 13px;
  cursor: pointer; font-size: 11.5px; color: var(--ink);
}
.mtab:hover { background: var(--panel-hover); }
.mtab.active { background: var(--panel-bg); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent); }
.mtab-add { font-size: 14px; padding: 0 9px; color: var(--ink-muted); }
.mtab-spacer { flex: 1; }
.mtab-note { display: flex; align-items: center; padding-right: 10px; font-size: 10.5px; color: var(--ink-muted); }

/* ===================== 命令行 ===================== */
#command-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--command-bg);
  border-top: 1px solid var(--border);
  height: 118px;
  min-height: 62px;
}
#command-history {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 2px;
  font-family: Consolas, "Cascadia Mono", "SF Mono", monospace;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--command-ink);
  scrollbar-width: thin;
}
.cmd-line { white-space: pre-wrap; word-break: break-word; }
.cmd-command { color: #0e5a9c; font-weight: 600; }
.cmd-error { color: #b4232a; }
.cmd-success { color: #1f7a45; }
.cmd-muted { color: #6f7b85; }
.cmd-info { color: #2f6f8f; }
[data-theme="dark"] .cmd-command { color: #7cc4ff; }
[data-theme="dark"] .cmd-error { color: #ff8b86; }
[data-theme="dark"] .cmd-success { color: #7fdd9d; }
[data-theme="dark"] .cmd-muted { color: #8ea1b1; }
[data-theme="dark"] .cmd-info { color: #86c8e8; }

#command-entry {
  display: flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-top: 1px solid var(--border);
  background: var(--command-line-bg);
  position: relative;
}
.chev { font-family: Consolas, monospace; color: var(--accent); font-weight: 700; }
#cmd-input {
  flex: 1;
  height: 24px;
  border: 0; outline: none;
  background: transparent;
  color: var(--command-ink);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 12.5px;
}
#cmd-input::placeholder { color: #8a97a2; }

#cmd-autocomplete {
  display: none;
  position: absolute; bottom: 30px; left: 26px;
  min-width: 300px;
  max-height: 220px; overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 40;
  padding: 3px;
}
#cmd-autocomplete.open { display: block; }
.ac-row {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; border: 0; background: transparent;
  padding: 4px 8px; cursor: pointer; text-align: left; font-size: 12px;
}
.ac-row:hover, .ac-row.active { background: var(--panel-hover); }
.ac-row b { font-family: Consolas, monospace; color: var(--accent); min-width: 110px; }
.ac-row em { font-style: normal; color: var(--ink-muted); font-size: 10.5px; margin-left: auto; }

/* ===================== 状态栏 ===================== */
#statusbar {
  flex: 0 0 28px;
  height: 28px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 0 8px;
  background: var(--status-bg);
  color: var(--status-ink);
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  user-select: none;
}
#status-left { display: flex; align-items: center; gap: 12px; min-width: 270px; }
#status-coords { font-family: Consolas, monospace; letter-spacing: 0.2px; }
#status-coords b { color: var(--ink-muted); font-weight: 600; }
.coord-snap { color: #1f7a45; margin-left: 6px; }
#status-prompt { color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 320px; }
#status-toggles { display: flex; align-items: stretch; gap: 1px; flex: 1; overflow-x: auto; }
.status-toggle {
  display: flex; align-items: center; gap: 4px;
  border: 0; border-radius: 2px;
  background: transparent; color: var(--status-ink);
  padding: 0 7px; cursor: pointer; font-size: 11px; white-space: nowrap;
}
.status-toggle .ico { width: 14px; height: 14px; opacity: 0.65; }
.status-toggle:hover { background: rgba(0, 0, 0, 0.07); }
.status-toggle.on { background: #cfe3f5; color: #0d4f86; box-shadow: inset 0 0 0 1px #a8c9e6; }
.status-toggle.on .ico { opacity: 1; }
[data-theme="dark"] .status-toggle.on { background: #2f5a7d; color: #dff0ff; box-shadow: inset 0 0 0 1px #4a7ba3; }
#status-right { display: flex; align-items: center; gap: 2px; }
.status-item {
  display: flex; align-items: center; gap: 5px;
  height: 22px; align-self: center;
  border: 0; border-radius: 2px;
  background: transparent; color: var(--status-ink);
  padding: 0 8px; cursor: pointer; font-size: 11px; white-space: nowrap;
}
.status-item .ico { width: 14px; height: 14px; opacity: 0.7; }
.status-item:hover { background: rgba(0, 0, 0, 0.07); }
.status-selection { color: var(--ink-muted); }

/* ===================== 右侧面板 ===================== */
#dock-right {
  width: 306px;
  flex: 0 0 306px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-left: 1px solid var(--border);
  min-height: 0;
}
.palette {
  display: flex;
  flex-direction: column;
  background: var(--palette-bg);
  min-height: 0;
  flex: 1 1 50%;
}
.palette.collapsed { flex: 0 0 26px; }
.palette.collapsed .palette-body, .palette.collapsed .layer-list, .palette.collapsed .palette-note { display: none; }
.palette-head {
  height: 26px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  background: var(--palette-head-bg);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 12px;
  flex: 0 0 26px;
}
.ph-key { margin-left: auto; font-size: 9.5px; color: var(--ink-muted); letter-spacing: 0.7px; }
.palette-collapse, .palette-mini {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-muted); font-size: 13px; padding: 0 3px;
}
.palette-mini { font-size: 10.5px; color: var(--accent); }
.palette-collapse:hover, .palette-mini:hover { color: var(--ink); }
.palette-body { overflow: auto; padding: 6px 8px 10px; }
.palette-section-title {
  margin: 8px 0 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.palette-note { margin: 8px 2px 0; font-size: 10.5px; line-height: 1.5; color: var(--ink-muted); }

.prop-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.prop-table th {
  text-align: left; font-weight: 500; color: var(--ink-muted);
  padding: 2px 6px 2px 2px; width: 42%; vertical-align: top; white-space: nowrap;
}
.prop-table td { padding: 1px 2px; }
.prop-input {
  width: 100%;
  height: 21px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--panel-bg);
  color: var(--ink);
  padding: 0 3px;
  font-size: 11.5px;
}
.prop-textarea { height: 52px; resize: vertical; padding: 3px; }

.layer-list { overflow: auto; padding: 3px 5px; }
.layer-row { display: flex; align-items: center; gap: 3px; padding: 2px 3px; border-radius: 2px; }
.layer-row:hover { background: rgba(0, 0, 0, 0.05); }
.layer-row.current { background: #d5e8fa; }
[data-theme="dark"] .layer-row.current { background: #2f4d68; }
.layer-swatch { width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 2px; flex: 0 0 12px; }
.layer-name { flex: 1; font-size: 11.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-flag {
  border: 0; background: transparent; cursor: pointer;
  font-size: 10.5px; padding: 0 2px; color: var(--ink-muted);
  line-height: 1;
}
.layer-flag.on { color: #1f7a45; }
.layer-flag.off { color: #b4232a; }
.layer-flag.edit { color: var(--ink-muted); }
.dock-buttons {
  flex: 0 0 26px; display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px; background: var(--palette-head-bg); border-top: 1px solid var(--border);
  color: var(--ink-muted);
}
.dock-buttons .ico { width: 15px; height: 15px; }

/* ===================== 模态框 ===================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(12, 16, 20, 0.42);
  display: grid; place-items: center;
  z-index: 100;
  backdrop-filter: blur(1px);
}
.modal {
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
  background: var(--modal-bg);
  color: var(--ink);
  border-radius: 5px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--palette-head-bg);
}
.modal-title h3 { margin: 0; font-size: 15px; }
.modal-title p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-muted); }
.modal-close {
  margin-left: auto; border: 0; background: transparent;
  font-size: 14px; cursor: pointer; color: var(--ink-muted); padding: 2px 6px;
}
.modal-close:hover { color: #b4232a; }
.modal-body { padding: 14px; overflow: auto; }
.modal-foot { padding: 10px 14px; border-top: 1px solid var(--border); background: var(--palette-head-bg); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.btn {
  height: 28px; padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel-bg);
  color: var(--ink);
  cursor: pointer;
  font-size: 12.5px;
}
.btn:hover { background: var(--panel-hover); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { color: var(--danger); border-color: #d9a9ab; }
.btn-danger:hover { background: #fbeaeb; }
.btn-sm { height: 23px; padding: 0 9px; font-size: 11.5px; }

.form { display: flex; flex-direction: column; gap: 9px; }
.form-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.form-row > span:first-child { flex: 0 0 140px; color: var(--ink-muted); }
.form-input {
  flex: 1; height: 26px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--panel-bg);
  color: var(--ink);
  padding: 0 6px;
  font-size: 12px;
}
textarea.form-input { height: 70px; padding: 5px 6px; resize: vertical; }
.form-hint { font-size: 11px; line-height: 1.55; color: var(--ink-muted); margin: 2px 0 0; }
.form-error { color: var(--danger); font-size: 11.5px; min-height: 14px; margin: 0; }
.form-message { margin: 0; font-size: 12.5px; line-height: 1.6; }
.dialog-status { font-size: 11.5px; color: var(--ink-muted); margin: 4px 0; }
.check-row { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 0; }
.osnap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; }

.dialog-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.dialog-tab {
  border: 0; background: transparent; padding: 6px 12px;
  cursor: pointer; color: var(--ink-muted); font-size: 12px;
  border-bottom: 2px solid transparent;
}
.dialog-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.doc-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow: auto; }
.doc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel-bg);
}
.doc-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-meta b { font-size: 12.5px; }
.doc-meta span { font-size: 10.5px; color: var(--ink-muted); }
.drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; height: 170px;
  border: 2px dashed var(--border);
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 12px;
  text-align: center;
}
.drop-zone b { color: var(--ink); font-size: 13px; }
.drop-zone.hover { border-color: var(--accent); background: var(--panel-hover); }
.autosave-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel-bg);
}
.autosave-card b { font-size: 13px; }
.autosave-card span { font-size: 11.5px; color: var(--ink-muted); }

.export-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.plot-preview { display: flex; gap: 12px; align-items: flex-start; }
.plot-image { width: 60%; border: 1px solid var(--border); background: #1e2226; }
.plot-meta { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.plot-meta b { color: var(--ink-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; }

.layer-manager { display: flex; flex-direction: column; gap: 8px; }
.lm-bar { display: flex; gap: 6px; }
.lm-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.lm-table th {
  text-align: left; padding: 5px 6px; background: var(--palette-head-bg);
  border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px;
}
.lm-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.lm-table tr.selected { background: var(--panel-hover); }
.lm-name { font-weight: 600; }
.lm-toggle { border: 0; background: transparent; cursor: pointer; font-size: 11px; }
.lm-color-text { margin-left: 4px; font-family: Consolas, monospace; font-size: 10.5px; color: var(--ink-muted); }
.lm-select { height: 20px; border: 1px solid var(--border); background: var(--panel-bg); color: var(--ink); font-size: 11px; border-radius: 2px; }

.about-head { display: flex; gap: 14px; align-items: flex-start; }
.about-a {
  width: 54px; height: 54px; flex: 0 0 54px;
  display: grid; place-items: center;
  border-radius: 6px; background: #b4232a; color: #fff;
  font-size: 34px; font-weight: 700; font-style: italic;
}
.about h3 { margin: 0 0 4px; font-size: 16px; }
.about p { margin: 3px 0; font-size: 12px; line-height: 1.6; }
.about-legal { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.about-legal h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--danger); }
.about-legal p { font-size: 11.5px; color: var(--ink-muted); }

.help-wrap { display: flex; gap: 12px; min-height: 340px; }
.help-toc { flex: 0 0 170px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); padding-right: 8px; }
.help-toc-item {
  border: 0; background: transparent; text-align: left;
  padding: 5px 8px; cursor: pointer; border-radius: 3px; font-size: 12px;
}
.help-toc-item:hover { background: var(--panel-hover); }
.help-toc-item.active { background: var(--panel-hover); font-weight: 600; color: var(--accent); }
.help-content { flex: 1; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.help-card {
  display: grid; grid-template-columns: 110px 90px 1fr auto;
  align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel-bg);
}
.help-card b { font-family: Consolas, monospace; font-size: 12px; color: var(--accent); }
.help-card span { font-size: 12px; }
.help-card p { margin: 0; font-size: 11px; color: var(--ink-muted); }
.help-card em { font-style: normal; font-size: 10.5px; color: var(--ink-muted); grid-column: 3; }

/* ===================== 工具提示 / 轻提示 ===================== */
.tooltip {
  position: fixed;
  z-index: 120;
  max-width: 300px;
  padding: 8px 10px;
  background: #1e242a;
  color: #e6eef6;
  border: 1px solid #3d4b57;
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  font-size: 11.5px;
  line-height: 1.5;
  pointer-events: none;
}
.tooltip b { display: block; margin-bottom: 3px; font-size: 12px; }
.tooltip p { margin: 0; color: #b9c8d5; }
.tooltip em { display: block; margin-top: 4px; font-style: normal; color: #8fa4b6; font-size: 10.5px; }

#toast-root { position: fixed; right: 16px; bottom: 44px; display: flex; flex-direction: column; gap: 6px; z-index: 130; }
.toast {
  max-width: 380px;
  padding: 9px 13px;
  border-radius: 4px;
  background: #1e242a;
  color: #e8f0f7;
  border-left: 3px solid var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  font-size: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateY(0); }

.workspace-menu {
  position: fixed;
  z-index: 90;
  width: 250px;
  padding: 5px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 4px;
}
.ws-row {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; border: 0; background: transparent;
  text-align: left; padding: 7px 9px; border-radius: 3px; cursor: pointer;
}
.ws-row:hover { background: var(--panel-hover); }
.ws-row.active { background: var(--panel-hover); box-shadow: inset 0 0 0 1px var(--accent); }
.ws-row b { font-size: 12.5px; }
.ws-row span { font-size: 10.5px; color: var(--ink-muted); }

#boot-error {
  position: fixed; inset: 20px;
  z-index: 200;
  margin: 0; padding: 16px;
  background: #2b1114; color: #ffd9d9;
  border: 1px solid #7d2a31; border-radius: 4px;
  font-family: Consolas, monospace; font-size: 12px;
  overflow: auto; white-space: pre-wrap;
}

/* 3D 工作区：画布更高、面板更窄 */
body.ws-3d #dock-right { width: 286px; flex-basis: 286px; }

/* 打印时只保留图纸 */
@media print {
  #titlebar, #ribbon, #menubar, #toolbars, #command-panel, #model-tabs, #statusbar, #dock-right, #quick-props, .view-overlay { display: none !important; }
  #app, #workspace, #drawing-area { height: auto; display: block; }
  #cad-canvas { width: 100% !important; height: auto !important; }
}

/* 窄屏（手机/小窗）：折叠右侧面板，缩减功能区 */
@media (max-width: 900px) {
  #dock-right { display: none; }
  #ribbon-panels { height: 92px; }
  .rb-btn.large { width: 52px; min-height: 64px; }
  .rb-btn.large .ico { width: 24px; height: 24px; }
  #status-left { min-width: 0; }
  #status-coords { display: none; }
  .title-search { display: none; }
}


/* ===================== 文件标签（2013+ 图形标签页） ===================== */
#file-tabs {
  display: flex; align-items: stretch;
  height: 25px; flex: 0 0 25px;
  padding-left: 4px;
  background: var(--ribbon-tab-bg);
  border-bottom: 1px solid var(--ribbon-border);
}
.file-tab {
  display: flex; align-items: center; gap: 6px;
  max-width: 220px;
  padding: 0 10px;
  margin-right: 1px;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: transparent; color: var(--ribbon-tab-ink);
  cursor: pointer; font-size: 11.5px;
  white-space: nowrap;
}
.file-tab:hover { background: var(--panel-hover); }
.file-tab.active { background: var(--ribbon-tab-active); border-color: var(--ribbon-border); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent); }
.file-tab .ft-name { overflow: hidden; text-overflow: ellipsis; }
.file-tab .ft-close {
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-muted); font-size: 13px; line-height: 1; padding: 0 2px;
}
.file-tab .ft-close:hover { color: var(--danger); }
.file-tab-add {
  width: 24px; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-muted); font-size: 15px;
}
.file-tab-add:hover { color: var(--accent); }
.file-tab-spacer { flex: 1; }
.file-tab-hint { display: flex; align-items: center; padding-right: 10px; font-size: 10.5px; color: var(--ink-muted); }

/* ===================== 导航栏 + ViewCube ===================== */
#canvas-wrap { position: relative; flex: 1; min-height: 0; }
.nav-bar {
  position: absolute; right: 12px; bottom: 22px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 6;
}
.nav-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid #3b4854; border-radius: 4px;
  background: rgba(28, 34, 40, 0.86); color: #d6e2ec;
  font-size: 15px; cursor: pointer;
}
.nav-btn:hover { background: rgba(52, 66, 80, 0.95); border-color: #5b7186; }
.nav-btn.disabled { opacity: 0.4; cursor: not-allowed; }

.viewcube {
  position: absolute; top: 64px; right: 12px;
  width: 104px; height: 104px;
  z-index: 6;
  user-select: none;
}
.viewcube.hidden { display: none; }
.vc-svg { width: 100%; height: 100%; overflow: visible; }
.vc-face-svg {
  fill: rgba(38, 48, 58, 0.88);
  stroke: #5b7186; stroke-width: 1;
  cursor: pointer;
  transition: fill 0.12s;
}
.vc-face-svg:hover { fill: #3f566b; }
.vc-text { font-size: 9px; fill: #dbe7f1; font-family: var(--ui-font, sans-serif); }
.vc-iso { font-size: 7px; fill: #9fb2c2; cursor: pointer; }
.vc-iso:hover { fill: #fff; }
.vc-compass { font-size: 8px; fill: #7d8f9f; }

/* ===================== 右键上下文菜单 ===================== */
.context-menu {
  position: fixed; z-index: 140;
  min-width: 220px;
  padding: 4px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow);
  font-size: 12px;
}
.context-menu[hidden] { display: none; }
.cm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; border: 0; background: transparent;
  padding: 6px 10px; text-align: left; cursor: pointer; border-radius: 3px;
}
.cm-item:hover { background: var(--panel-hover); }
.cm-item.disabled { color: var(--ink-muted); cursor: not-allowed; }
.cm-item em { font-style: normal; color: var(--ink-muted); font-size: 10.5px; }
.cm-sep { height: 1px; margin: 4px 6px; background: var(--border); }


/* ===================== 文本窗口（F2） ===================== */
.text-window {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 42vh; z-index: 130;
  display: flex; flex-direction: column;
  background: rgba(18, 22, 26, 0.97);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 28px rgba(0,0,0,0.45);
}
.text-window.hidden { display: none; }
.tw-head {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 10px; font-size: 12px;
  background: #1d242b; color: #d7e3ee;
  border-bottom: 1px solid #2c3742;
}
.tw-hint { color: #7f93a5; font-size: 10.5px; }
.tw-close { margin-left: auto; border: 0; background: transparent; color: #9db0c2; font-size: 16px; cursor: pointer; }
.tw-body { flex: 1; overflow: auto; padding: 8px 12px; font-family: var(--mono, monospace); font-size: 12px; color: #cfdae4; }
.tw-body .tw-line { padding: 1px 0; white-space: pre-wrap; cursor: default; }
.tw-body .tw-line:hover { background: #222b33; }
.tw-body .tw-line.error { color: #ff9a8d; }
.tw-body .tw-line.muted { color: #8aa0b3; }
.tw-body .tw-time { color: #5f7283; margin-right: 8px; }

/* 上下文选项卡（选中对象时出现） */
.ribbon-tab.contextual {
  color: #7fd39a;
  border-bottom: 2px solid #4caf6d;
}
.ribbon-tab.contextual.active { color: #a7f0bf; }

/* 工具选项板 / 设计中心 */
.tool-palette-grid { display: grid; grid-template-columns: 150px 1fr; gap: 10px; min-height: 260px; }
.tool-palette-tabs { display: flex; flex-direction: column; gap: 4px; }
.tool-palette-tab { text-align: left; border: 1px solid var(--border); background: var(--panel-bg); padding: 7px 9px; border-radius: 3px; cursor: pointer; }
.tool-palette-tab.active { border-color: var(--accent); background: var(--panel-hover); }
.tool-palette-body { border: 1px solid var(--border); border-radius: 3px; padding: 8px; max-height: 320px; overflow: auto; }
.palette-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 12px; }
.palette-item:last-child { border-bottom: 0; }
.palette-item button { font-size: 11px; }


/* ===================== 选项多页对话框 ===================== */
.options-tabs { display: grid; grid-template-columns: 150px 1fr; gap: 12px; min-height: 320px; }
.options-nav { display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--border); padding-right: 8px; }
.options-nav-item {
  text-align: left; border: 1px solid transparent; background: transparent;
  padding: 7px 9px; border-radius: 3px; cursor: pointer; font-size: 12px; color: var(--ink);
}
.options-nav-item:hover { background: var(--panel-hover); }
.options-nav-item.active { background: var(--panel-hover); border-color: var(--accent); font-weight: 600; }
.options-pane { display: flex; flex-direction: column; gap: 10px; }
.form-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 10px; font-size: 12px; }
.form-row em { grid-column: 2; font-style: normal; color: var(--ink-muted); font-size: 10.5px; }
.form-hint { color: var(--ink-muted); font-size: 11px; margin: 2px 0; }
.form-actions { display: flex; gap: 8px; margin-top: 6px; }
.option-info { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 11.5px; color: var(--ink-muted); }
.option-info h4 { margin: 0 0 6px; color: var(--ink); font-size: 12px; }


/* ===================== 开始页（Start tab） ===================== */
.start-page {
  position: absolute; inset: 0; z-index: 7;
  background: var(--bg); color: var(--ink);
  overflow: auto; padding: 26px 30px;
}
.start-page.hidden { display: none; }
.sp-inner { display: grid; grid-template-columns: 260px 1fr; gap: 30px; max-width: 1080px; margin: 0 auto; }
.sp-side h2 { margin: 0 0 18px; font-size: 30px; font-weight: 300; letter-spacing: 2px; }
.sp-btn {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--panel-bg); color: var(--ink);
  font-size: 13px; cursor: pointer;
}
.sp-btn:hover { border-color: var(--accent); }
.sp-btn.primary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sp-main h3 { margin: 4px 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.sp-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 24px; }
.sp-file {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--panel-bg); cursor: pointer; font-size: 12px;
}
.sp-file:hover { border-color: var(--accent); }
.sp-file .sp-name { font-weight: 600; }
.sp-file .sp-sub { color: var(--ink-muted); font-size: 10.5px; }
.sp-links { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.9; color: var(--ink); }
.sp-links code { font-family: var(--mono, monospace); background: var(--code, #f2f4f7); padding: 1px 4px; border-radius: 2px; }


/* 开始页的实心底（避免透出模型空间网格） */
#drawing-area .start-page {
  background: #f2f4f6;
  color: #1f2430;
  border-left: 1px solid #dfe3e9;
}
[data-theme="dark"] #drawing-area .start-page { background: #14171c; color: #e6e9ee; }
#drawing-area .start-page .sp-side h2 { color: #1f2430; }
[data-theme="dark"] #drawing-area .start-page .sp-side h2 { color: #e6e9ee; }
#drawing-area .start-page .sp-btn { background: #ffffff; color: #1f2430; border-color: #cfd6de; }
#drawing-area .start-page .sp-btn.primary { color: #1d4ed8; border-color: #1d4ed8; }
#drawing-area .start-page .sp-file { background: #ffffff; border-color: #dfe3e9; color: #1f2430; }
#drawing-area .start-page .sp-file .sp-sub { color: #6b7683; }
#drawing-area .start-page .sp-links { color: #1f2430; }
#drawing-area .start-page .sp-links code { background: #e8edf3; color: #1f2430; }
[data-theme="dark"] #drawing-area .start-page .sp-links code { background: #232a33; color: #e6e9ee; }

/* 界面显隐命令（RIBBON / COMMANDLINE / FILETAB / CLEANSCREEN） */
.ui-hidden { display: none !important; }
.color-picker-preview {
  width: 64px; height: 22px; border: 1px solid var(--border); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.clean-screen-exit {
  position: fixed; top: 8px; right: 10px; z-index: 9999;
  height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--panel-bg, #2a2f35); color: var(--ink, #e6e9ee);
  font-size: 11.5px; cursor: pointer; opacity: 0.82;
}
.clean-screen-exit:hover { opacity: 1; }
body.clean-screen #titlebar,
body.clean-screen #ribbon,
body.clean-screen #menubar,
body.clean-screen #toolbars,
body.clean-screen #file-tabs,
body.clean-screen #dock-right,
body.clean-screen #quick-props,
body.clean-screen #statusbar {
  display: none !important;
}
