/* ─────────────────────────────────────────────────────────────
   圖說協作管理系統（DCMS）— styles
   單一淺色主題（刻意不做深色切換）。圖面畫布另外有自己的
   「inverted」狀態，讓原本深底的引擎輸出在淺色 UI 上仍然看得清楚。
   ───────────────────────────────────────────────────────────── */

:root {
  --bg: #f3f5f8;
  --bg-soft: #eceff4;
  --card: #ffffff;
  --card-2: #f7f9fc;
  --line: #dde3ec;
  --line-soft: #e8edf3;
  --fg: #4b4f54;
  --fg-dim: #4b4f54;
  --fg-mute: #4b4f54;
  --accent: #0084d4;
  --accent-soft: rgba(0, 132, 212, .10);
  --ok: #1e9e6a;
  --warn: #b7791f;
  --err: #c53030;
  --canvas-bg: #ffffff;
  --radius: 12px;
  --shadow: 0 18px 44px rgba(20, 35, 60, .18);
  --font-ui: "Source Han Sans TW", "思源黑體", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono: var(--font-ui); /* 舊元件名稱相容，介面統一使用思源黑體 */
  --accent-hover: #006cae;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.mono { font-family: var(--mono); font-size: 12.5px; }

/* ── top bar ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-actions { display: flex; align-items: center; gap: 9px; flex: none; }

.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-hover));
  box-shadow: 0 6px 18px rgba(76, 141, 255, .32);
  flex: none;
}

.brand h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: .2px; }
.brand .sub { margin: 2px 0 0; font-size: 12.5px; color: var(--fg-mute); }
.env-badge {
  display: block; width: fit-content; margin: 2px 0 0; padding: 0 6px; border-radius: 999px;
  font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
  color: #8a4b00; background: #fff1d6; border: 1px solid #f0c78a;
}

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  border-radius: 9px;
  padding: 9px 15px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s, opacity .15s;
  white-space: nowrap;
}
.btn:focus-visible, .icon-btn:focus-visible, .seg-btn:focus-visible,
.tb-more > summary:focus-visible, .tb-menu-item:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}
.btn:hover { background: color-mix(in srgb, var(--card-2) 70%, var(--accent)); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

.icon-btn {
  appearance: none;
  width: 34px; height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card-2);
  color: var(--fg);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
  flex: none;
}
.icon-btn:hover { background: color-mix(in srgb, var(--card-2) 70%, var(--accent)); border-color: var(--accent); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.btn[aria-pressed="true"], .icon-btn[aria-pressed="true"], .btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.pill {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
}

/* ── page / cards ──────────────────────────────────────────── */
.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 22px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-head h2 { margin: 0; font-size: 14.5px; font-weight: 650; color: var(--fg-dim); letter-spacing: .3px; }

.foot { text-align: center; color: var(--fg-mute); font-size: 12.5px; }
.foot p { margin: 0; }

/* ── drop zone ─────────────────────────────────────────────── */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 34px 20px 30px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}
.dropzone.dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: scale(1.008);
}
.dz-icon { color: var(--accent); opacity: .9; }
.dz-title { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.dz-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--fg-mute); }

.upload-progress {
  margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card-2); display: grid; gap: 8px;
}
.upload-progress[hidden] { display: none; }
.upload-progress-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 13px; }
.upload-progress-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#uploadCancel { flex: none; }
#uploadProgressPct { flex: none; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 650; }
.upload-progress-track { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.upload-progress-bar { height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .12s linear; }
.upload-progress.is-busy .upload-progress-bar { width: 35% !important; animation: upload-indeterminate 1.1s ease-in-out infinite; }
.upload-progress-detail { margin: 0; font-size: 12px; color: var(--fg-mute); }
@keyframes upload-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.samples {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-soft);
}
.samples-label { font-size: 12.5px; color: var(--fg-mute); }
.samples-list { display: flex; gap: 7px; flex-wrap: wrap; }

/* ── file list ─────────────────────────────────────────────── */
.file-list { display: flex; flex-direction: column; gap: 9px; }
.empty { margin: 6px 2px; color: var(--fg-mute); font-size: 13px; }

.file-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.file-row.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }

.fr-main { min-width: 0; }
.fr-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-meta { margin: 3px 0 0; font-size: 12px; color: var(--fg-mute); display: flex; gap: 8px; flex-wrap: wrap; }
.fr-meta .tag {
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
}
.fr-meta .tag.ok { color: var(--ok); }
.fr-meta .tag.warn { color: var(--warn); }
.fr-meta .tag.err { color: var(--err); }
.fr-actions { display: flex; gap: 7px; flex: none; }

/* ── modal ─────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; }
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 9, 14, .68);
  backdrop-filter: blur(4px);
  animation: fade .18s ease;
}

.modal-shell {
  position: relative;
  width: min(1280px, 96vw);
  height: min(880px, 92vh);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: pop .2s cubic-bezier(.2, .9, .3, 1.2);
}

.m-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.m-title-wrap { min-width: 0; flex: 1; }
.m-title {
  margin: 0; font-size: 15px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.badge {
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  color: var(--fg-dim);
}
.badge.hl { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }

.m-toolbar {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-soft) 100%);
  box-shadow: 0 2px 8px rgba(20, 35, 60, .06);
  flex: none;
  flex-wrap: wrap;
}
.tb-section {
  display: flex; align-items: center; gap: 7px;
  min-height: 34px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--card) 76%, var(--bg-soft));
  box-shadow: 0 1px 2px rgba(20, 35, 60, .04);
}
.tb-section-engine { background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.tb-section-actions { background: color-mix(in srgb, var(--accent-soft) 30%, var(--card)); }
.tb-caption {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tb-group { display: flex; align-items: center; gap: 5px; }
.tb-spacer { flex: 1; }
.tb-action { font-weight: 600; padding-inline: 10px; }
.tb-action-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  margin-right: 2px;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
}
.tb-action-primary,
.tb-action-primary:hover,
.tb-action-primary[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 132, 212, .22);
}
.tb-action-primary .tb-action-icon { color: #fff; }
.tb-action-primary .pill { background: rgba(255, 255, 255, .2); color: #fff; }
.m-engine-seg { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); background: var(--card); }
.tb-more { position: relative; }
.tb-more > summary { list-style: none; cursor: pointer; user-select: none; }
.tb-more > summary::-webkit-details-marker { display: none; }
.tb-more > summary span { margin-left: 2px; color: var(--fg-mute); }
.tb-more[open] > summary { border-color: var(--accent); background: var(--accent-soft); }
.tb-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  min-width: 174px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 10px 26px rgba(20, 35, 60, .16);
}
.tb-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.tb-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.tb-menu-item[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.tb-menu-icon { width: 18px; text-align: center; font-size: 15px; }

.zoom-label {
  min-width: 62px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-dim);
  padding: 4px 6px;
  border-radius: 7px;
  background: var(--card);
  border: 1px solid var(--line-soft);
}

.m-body { flex: 1; display: flex; min-height: 0; }

.layer-panel {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
}
.lp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  font-size: 12.5px; font-weight: 650; color: var(--fg-dim);
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.layer-list { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; }
.layer-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  transition: background .12s;
}
.layer-item:hover { background: var(--card-2); }
.layer-item.off { opacity: .42; }
.layer-swatch {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  border: 1px solid rgba(255, 255, 255, .22);
}
.layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-count { font-family: var(--mono); font-size: 11.5px; color: var(--fg-mute); }
.layer-flag { font-size: 10.5px; color: var(--warn); }

.canvas-wrap { position: relative; flex: 1; min-width: 0; background: var(--canvas-bg); }
.print-watermark { display: none; width: 100%; height: 100%; }
.share-body { margin: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--fg); }
.share-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.share-kicker { margin: 0 0 4px; color: var(--accent); font-size: 11px; letter-spacing: 1px; }
.share-bar h1 { margin: 0; font-size: 18px; }
.share-note { margin: 0; color: var(--fg-mute); font-size: 12px; }
.share-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
.share-stage { height: 100%; }
.share-side { overflow: auto; padding: 16px; background: #fff; border-left: 1px solid var(--line); }
.share-side label, .share-side textarea { display: block; width: 100%; }
.share-side textarea { margin-top: 6px; font: inherit; }
.share-tools, .share-notes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.share-notes { flex-direction: column; padding: 0; list-style: none; }
.share-note-open { border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.share-dialog-status { min-height: 1.4em; color: var(--fg-mute); font-size: 12px; }
@media (max-width: 800px) { .share-layout { grid-template-columns: 1fr; } .share-stage { min-height: 60dvh; } }
@media print {
  body.is-viewer-print { overflow: visible; height: auto; background: #fff; }
  body.is-viewer-print .app-shell { display: block; height: auto; overflow: visible; }
  body.is-viewer-print .topbar,
  body.is-viewer-print .primary-nav,
  body.is-viewer-print .secondary-nav,
  body.is-viewer-print .viewer-toolbar,
  body.is-viewer-print .tool-drawer,
  body.is-viewer-print .view-float,
  body.is-viewer-print .viewer-banner,
  body.is-viewer-print .v3d-view-cube,
  body.is-viewer-print .overlay,
  body.is-viewer-print .document-rfi-status,
  body.is-viewer-print .web-view-bar,
  body.is-viewer-print .web-view-note,
  body.is-viewer-print .v3d-pick-status,
  body.is-viewer-print #viewerEmpty { display: none !important; }
  body.is-viewer-print .operation-area,
  body.is-viewer-print .operation-area > .modal,
  body.is-viewer-print .modal-shell,
  body.is-viewer-print .m-body,
  body.is-viewer-print .canvas-wrap {
    display: block !important; position: static !important; width: 100% !important; height: auto !important;
    min-height: 0 !important; overflow: visible !important; inset: auto !important; padding: 0 !important; background: #fff !important;
  }
  body.is-viewer-print #canvas:not([hidden]),
  body.is-viewer-print #linkedCanvas:not([hidden]),
  body.is-viewer-print #view3d:not([hidden]),
  body.is-viewer-print #webView:not([hidden]) {
    position: relative !important; inset: auto !important; display: block !important;
    width: 100% !important; height: 250mm !important; overflow: hidden !important;
  }
  body.is-viewer-print #view3d:not([hidden]) canvas { width: 100%; height: 100%; }
  body.is-viewer-print #pdfView:not([hidden]),
  body.is-viewer-print #imageView:not([hidden]) {
    position: relative !important; inset: auto !important; height: auto !important; overflow: visible !important; background: #fff !important;
  }
  body.is-viewer-print .print-watermark {
    display: block; position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  }
}
.viewer-banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 10px; max-width: min(720px, calc(100% - 140px));
  padding: 7px 8px 7px 10px; border: 1px solid #f5c26b; border-radius: 8px;
  background: #fff8e8; color: #7a4b00; font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow);
}
.viewer-banner[hidden] { display: none; }
.viewer-banner[data-level="limit"] { border-color: #f0a37a; background: #fff2ea; color: #8a3410; }
.vb-icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: currentColor; }
.vb-icon::before { content: '!'; color: #fff; font-weight: 800; font-size: 11px; }
.vb-icon { font-size: 0; }
.vb-text { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vb-more, .vb-close { flex: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; padding: 3px 6px; border-radius: 4px; }
.vb-more { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.vb-more:hover, .vb-close:hover { background: #0000000f; }

.canvas {
  position: absolute; inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: var(--canvas-bg);
  transition: background .2s;
}
.canvas.panning { cursor: grabbing; }
.canvas svg { display: block; width: 100%; height: 100%; }

.canvas-wrap.viewer-split #linkedCanvas { right: 50%; border-right: 2px solid var(--line); }
.canvas-wrap.viewer-split #view3d { left: 50%; }
.bim-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.bim-filters label { display: flex; align-items: center; gap: 5px; }
.bim-filters input { width: 130px; }
.bim-property-table { max-height: 230px; overflow: auto; }
.bim-property-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bim-property-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bim-property-table td:first-child { width: 35%; color: var(--fg-mute); }
#linkedTools { display: flex; flex-direction: column; gap: 9px; }
#linkedTools label { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; }
#linkedTools input:not([type=checkbox]), #linkedTools select { width: 100%; min-width: 0; }
#linkedTools .scene-section-body { display: flex; flex-direction: column; gap: 8px; }
#linkedControls li, #drawingMeasures li { overflow-wrap: anywhere; font-size: 11px; }
#federationList fieldset { min-width: 0; margin: 8px 0; padding: 8px; border: 1px solid var(--line); }
#federationList legend { overflow-wrap: anywhere; font-size: 12px; }
#linkedCanvas { background: white; touch-action: none; }
.app-shell.compact-sidebar { grid-template-columns: 5% 0% 95%; }
.app-shell.compact-sidebar .secondary-nav { display: none; }
@media (pointer: coarse) {
  .btn, .side-action, .nav-main { min-height: 40px; }
}
@media (max-width: 760px) {
  .canvas-wrap.viewer-split #linkedCanvas { right: 0; bottom: 50%; }
  .canvas-wrap.viewer-split #view3d { left: 0; top: 50%; }
}

/* Invert the drawing when the canvas theme is flipped, so white-on-dark DWG
   colours remain visible on a light canvas and vice versa. */
.canvas.invert { filter: invert(1) hue-rotate(180deg); }

/* ── overlays ──────────────────────────────────────────────── */
.overlay {
  position: absolute; inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  justify-items: center;
  text-align: center;
  background: color-mix(in srgb, var(--canvas-bg) 92%, #000);
  padding: 24px;
  z-index: 3;
}
.overlay[hidden] { display: none; }

.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
#loadingText { margin: 0; color: var(--fg-dim); font-size: 13.5px; }

.err-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(229, 100, 108, .16);
  color: var(--err);
  font-size: 22px; font-weight: 700;
}
.err-title { margin: 0; font-size: 15px; font-weight: 650; }
.err-msg { margin: 0; max-width: 460px; font-size: 13px; color: var(--fg-dim); word-break: break-word; }

.overlay-fallback { background: var(--canvas-bg); }
.btn.is-active:not(.tb-action-primary) { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.fb-note {
  margin: 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(217, 164, 65, .12);
  color: var(--warn);
  font-size: 13px;
}
#fallbackImg { max-width: 96%; max-height: 72vh; border: 1px solid var(--line); border-radius: 8px; }
/* 舊式預覽圖可能只有 184×88：放大顯示，並在說明文字標出原始尺寸。 */
#fallbackImg.is-small { width: min(94%, var(--thumb-w, 720px)); height: auto; }

.m-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--fg-mute);
  font-size: 12px;
  flex: none;
}
.m-foot .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .brand .sub { display: none; }
  .modal { padding: 8px; }
  .modal-shell { width: 100vw; height: 100dvh; border-radius: 0; }
  .layer-panel { position: absolute; z-index: 4; height: 100%; box-shadow: var(--shadow); }
  .m-foot .hint { display: none; }
  .m-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-inline: 10px;
  }
  .tb-section { flex: none; }
  .tb-spacer { display: none; }
  .tb-caption { display: none; }
  .tb-section-actions { margin-left: auto; }
}


/* ── 3D 檢視（lazy-loaded three.js chunk） ───────────────────── */
.view3d {
  position: absolute;
  inset: 0;
  z-index: 6; /* above the 2D loading/error overlays so the rescue view works */
  background: #11151c;
  overflow: hidden;
}
.view3d canvas { display: block; touch-action: none; }
.pdf-view { touch-action: pan-x pan-y; }

.v3d-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  max-width: min(62%, 620px);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(6px);
}
.v3d-info {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 7;
  margin: 0;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  font-size: 12px;
  color: var(--fg-dim);
  font-family: var(--mono);
  max-width: calc(100% - 40px);
}
.v3d-chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-dim);
  cursor: pointer;
  user-select: none;
}
.v3d-chk input { accent-color: var(--accent); margin: 0; }
.v3d-spacer { flex: 1 1 auto; }

/* ── 提醒資訊（單一出口）─────────────────────────────────────────
   為什麼、有什麼限制都放這一條；標題下的 badge 與 3D 統計行只放數字。
   以前散在四個地方（badge、3D 黃色說明、底部狀態列、圖層面板），同一個原因
   會重複出現或漏掉。 */
.m-notice {
  margin: 0;
  padding: 8px 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
}

.m-notice .nt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-dim);
}

.m-notice .nt-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-mute);
  transform: translateY(-1px);
}

.m-notice .nt-info .nt-dot { background: var(--accent); }
.m-notice .nt-warn .nt-dot { background: var(--warn); }
.m-notice .nt-limit .nt-dot { background: var(--warn); }
.m-notice .nt-warn, .m-notice .nt-limit { color: var(--fg); }
#v3dLoading { z-index: 4; }

/* ── v3 追加：引擎選擇器與圖層面板補充 ─────────────────────────
   v3 是伺服器端解析，多了「引擎」這個維度，所以補上分段控制項的樣式。
   其餘版面刻意與 v1 共用，讓三個版本看起來一致。
   變數名稱沿用 v1 的 :root token（--fg-dim / --fg-mute / --warn …）。 */

.ver-tag {
  display: inline-block;
  margin-left: .35em;
  padding: .05em .45em;
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
}

.engine-card .card-head { align-items: baseline; }

.engine-status { font-size: .82rem; color: var(--fg-dim); }
.engine-status.ok   { color: var(--ok); }
.engine-status.warn { color: var(--warn); }
.engine-status.bad  { color: var(--err); }

.engine-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: .5rem;
}

.engine-note {
  flex: 1 1 22rem;
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--fg-dim);
}

/* 分段控制項 */
.seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
}

.seg-btn {
  border: 0;
  border-radius: 6px;
  padding: .38rem .7rem;
  font: inherit;
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.seg-btn:hover:not(:disabled) { color: var(--fg); background: var(--card-2); }
.seg-btn[aria-checked="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.seg-btn:disabled { opacity: .4; cursor: not-allowed; }

.seg-sm { padding: .3rem .55rem; font-size: .78rem; }
.m-engine-seg { padding: 2px; }

/* 圖層面板：v3 多一行說明（ODA 的 SVG 依顏色分組，無法逐圖層開關） */
.lp-note {
  margin: 0 .5rem .5rem;
  padding: .45rem .55rem;
  font-size: .74rem;
  line-height: 1.4;
  border-radius: 6px;
  background: rgba(217, 164, 65, .13);
  color: var(--warn);
}

/* 可點的色塊代表「切換此顏色分組」 */
.layer-swatch.is-toggle { cursor: pointer; }
.layer-swatch.is-toggle:hover { outline: 2px solid var(--accent); outline-offset: 1px; }

/* v3 檔案列的縮圖方塊（v1 沒有縮圖，所以補上） */
.fr-thumb {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-soft);
}
.fr-thumb img { width: 100%; height: 100%; object-fit: contain; }
.fr-thumb-ph {
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--fg-mute);
}

/* ── v3：依引擎切換畫布底色 ───────────────────────────────────
   ODA 的 SVG 是用 odcmAcadLightPalette() 產生的（假設紙張＝淺色底，
   線條畫成黑色）。v1 的深色畫布是為 LibreDWG 的輸出設計的，把 ODA 的
   SVG 放上去會變成黑線配黑底＝看不見。所以依引擎給對應的底色。 */
.canvas.paper { background: #ffffff; }
.canvas.paper.invert { filter: invert(1) hue-rotate(180deg); }

/* 圖面本身若沒有填色，讓 SVG 透明、露出容器底色 */
.canvas svg { background: transparent; }

/* 頂列右側的圖庫統計 */
.lib-count {
  font-size: 12px;
  color: var(--fg-dim);
  font-family: var(--mono);
  white-space: nowrap;
}

/* ── 標註 / 議題（圖形溝通）──────────────────────────────────────
   標註是覆蓋在圖面上的一張 SVG，預設 pointer-events: none，所以不會妨礙
   原本的縮放／平移；只有在「標註模式」時才整層接管指標，或在形狀上單獨
   接管（選取模式）。 */
.ann-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

.ann-layer.drawing {
  pointer-events: auto;
  cursor: crosshair;
}

.ann-layer.picking .ann { pointer-events: auto; cursor: pointer; }
.ann-layer .ann text { pointer-events: none; }
.ann-layer .ann.draft { opacity: .75; }
/* 選取態只改「字重」與清單 highlight。
   **描邊寬度與虛線長度一律由 JS 用 upp 換算**（見 lib/annotations.js）：
   CSS 的長度是使用者單位，3D 的 viewBox 是 1×1，寫在這裡會被放大成整個畫面，
   連帶那條超寬描邊的命中區域會蓋住所有 UI 按鈕。實際踩過，不要改回來。 */
.ann-layer .ann-selected text { font-weight: 700; }

.ann-input {
  position: absolute;
  z-index: 9;
  min-width: 190px;
  padding: 5px 8px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  box-shadow: var(--shadow);
}

.ann-tools {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
  max-width: calc(100% - 24px);
}

.ann-tools .at-label { font-size: 12px; color: var(--fg-mute); margin-right: 2px; }
.ann-tools .at-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 3px; }
.ann-tools .at-status { font-size: 12px; color: var(--fg-dim); }
.ann-tools .at-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.lp-head-ann { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }

.ann-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.ann-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 7px;
  align-items: start;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--card-2);
  font-size: 12.5px;
  cursor: pointer;
}

.ann-item:hover { border-color: var(--accent); }
.ann-item.sel { border-color: var(--accent); background: var(--accent-soft); }
.ann-item.closed { opacity: .55; }
.ann-item .an-no {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.ann-item.closed .an-no { background: var(--fg-mute); }
.ann-item .an-body { min-width: 0; }
.ann-item .an-meta { color: var(--fg-mute); font-size: 11px; margin-bottom: 2px; }
.ann-item .an-text { color: var(--fg); word-break: break-word; }
.ann-item .an-text.empty { color: var(--fg-mute); font-style: italic; }
.ann-item .an-ops { display: flex; flex-direction: column; gap: 3px; }
.ann-item .an-ops button {
  border: 1px solid var(--line); background: var(--card); color: var(--fg-dim);
  border-radius: 6px; font-size: 11px; padding: 2px 6px; cursor: pointer;
}
.ann-item .an-ops button:hover { border-color: var(--accent); color: var(--fg); }

/* 3D 視圖控制（第二排 HUD）。z-index 要高於標註層，否則畫標註時按不到。 */
.v3d-hud-views {
  top: 54px;
  right: 10px;
  max-width: calc(100% - 20px);
  flex-wrap: wrap;
  gap: 6px;
}

.v3d-label { font-size: 12px; color: var(--fg-mute); }
.v3d-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.v3d-select {
  border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  color: var(--fg); font: inherit; font-size: 12px; padding: 3px 6px;
}
.v3d-range { width: 130px; accent-color: var(--accent); }
.v3d-hud-views .vv.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 視點不同的 3D 標註：虛線 + 淡化，跟「現在這個視角」的標註區分開 */
.ann-layer .ann.ann-stale { opacity: .38; }
.ann-layer .ann.ann-stale text { opacity: .9; }

.ann-list .ann-hint {
  padding: 7px 9px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 12%, var(--card));
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.5;
}
.ann-item.stale .an-meta b { color: var(--warn); }

/* 標註工具列移到左下：原本放左上會蓋住 3D 的「線框／符合視窗／回 2D」那一排 */
.ann-tools { top: auto; bottom: 46px; }
/* ZIP inventory and native reference scan report. */
.package-dialog { max-width: min(900px, 90vw); max-height: 85vh; overflow: auto; border: 1px solid #d9dfe8; border-radius: 12px; padding: 24px; background: #fff; color: #4b4f54; }
.package-dialog::backdrop { background: #4b4f5466; }
.package-dialog table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.package-dialog th, .package-dialog td { text-align: left; padding: 8px; border-bottom: 1px solid #e4e8ee; overflow-wrap: anywhere; }
.package-dialog li { margin: 6px 0; overflow-wrap: anywhere; }

/* One compact 3D control bar; leave the rest of the canvas to the model. */
.v3d-controls {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 7;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(6px); box-shadow: 0 3px 12px #4b4f5408;
}
.v3d-controls .v3d-hud {
  position: static; max-width: none; padding: 0; border: 0;
  background: transparent; backdrop-filter: none; gap: 8px;
}
.v3d-controls .v3d-hud-views { flex: 1; gap: 5px; }
.v3d-controls .v3d-range { width: 100px; }
.v3d-range:disabled { opacity: .35; }
.v3d-clip-stepper { display: inline-flex; align-items: center; gap: 6px; }
.v3d-clip-stepper .icon-btn { width: 28px; height: 28px; border-radius: 6px; font-size: 15px; }
.modal[data-mode="3d"] .layer-list { flex: none; }
.modal[data-mode="3d"] .lp-head-ann { margin-top: 0; }
.btn:disabled { cursor: default; opacity: .45; }
@media (max-width: 760px) {
  .v3d-controls { left: 8px; right: 8px; top: 8px; padding: 8px; gap: 8px; }
  .v3d-controls .v3d-hud-views { flex-basis: 100%; }
}

/* Fixed workspace: title 10% high; 主列固定寬、次列預設 15%（可拖至 40%）。 */
body { overflow: hidden; }
.app-shell {
  --sidebar-pct: 15%;
  width: 100%; height: 100dvh; display: grid;
  grid-template-rows: 10% minmax(0, 1fr); grid-template-columns: 5% var(--sidebar-pct) minmax(0, 1fr);
  overflow: hidden;
}
.app-shell.is-resizing-sidebar { cursor: col-resize; user-select: none; }
.app-shell.is-resizing-sidebar * { cursor: col-resize !important; }
.app-shell > .topbar {
  grid-column: 1 / -1; grid-row: 1; position: relative; min-height: 0;
  padding: 16px 24px; background: #fff; backdrop-filter: none;
  display: grid; grid-template-columns: minmax(180px, 23%) minmax(0, 1fr) auto;
  gap: 24px; border-bottom: 1px solid var(--line);
}
.brand h1 { font-size: 20px; letter-spacing: -.3px; }
.brand .sub { color: var(--fg-dim); font-size: 12px; margin-top: 5px; }
.brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); box-shadow: none; }
.workspace-title { min-width: 0; border-left: 1px solid var(--line); padding-left: 24px; }
.workspace-kicker { display: block; color: var(--fg-mute); font-size: 11px; letter-spacing: 1px; margin-bottom: 4px; }
.workspace-title .m-title { font-size: 19px; }
.workspace-title .m-badges { margin-top: 7px; }
.topbar-actions { min-width: 0; flex-direction: column; align-items: flex-end; }
.lib-count { font-size: 12px; color: var(--fg-dim); }
.primary-nav {
  grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; overflow-y: auto;
  background: #eef2f8; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 4px;
}
.nav-main {
  border: 0; background: transparent; color: #4b4f54; font: inherit;
  min-height: 62px; padding: 7px 0; border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-main > span:first-child { font-size: 24px; line-height: 1; }
.nav-main > span:last-child { font-size: 11px; }
.nav-main:hover { background: #e0e8f5; color: var(--accent); }
.nav-main.is-active { background: var(--accent); color: white; box-shadow: 0 4px 12px #0084d422; }
.nav-main:disabled { opacity: .4; cursor: default; }
.nav-main:focus-visible, .side-action:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-divider { height: 1px; background: var(--line); margin: 4px 6px; }
.nav-bottom { margin-top: auto; text-align: center; color: var(--fg-mute); font-size: 10px; letter-spacing: 1px; padding: 12px 0 0; }
.secondary-nav {
  grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid var(--line); padding: 18px 10px;
  scrollbar-width: thin; position: relative;
}
.secondary-nav-head { display: flex; justify-content: flex-end; margin: -6px 0 8px; flex: 0 0 auto; }
.sidebar-width-btns { display: inline-flex; gap: 2px; }
.sidebar-width-btns .btn {
  min-width: 26px; padding: 3px 7px; font-size: 13px; font-weight: 650; line-height: 1;
  font-family: var(--mono, ui-monospace, monospace);
}
.sidebar-width-btns .btn:disabled { opacity: 0.35; }
.sidebar-resize {
  position: absolute; top: 0; right: -3px; width: 8px; height: 100%;
  cursor: col-resize; z-index: 6; touch-action: none;
}
.sidebar-resize::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px;
  background: transparent; transition: background .15s;
}
.sidebar-resize:hover::after, .app-shell.is-resizing-sidebar .sidebar-resize::after { background: var(--accent); }
.secondary-pane { min-width: 0; }
.secondary-pane[data-secondary="library"]:not([hidden]) {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.secondary-pane:not([data-secondary="library"]) { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.side-eyebrow { margin: 0; font-size: 9px; color: var(--fg-mute); letter-spacing: 1px; overflow-wrap: anywhere; flex: 0 0 auto; }
.secondary-pane > h2 { margin: 3px 0 18px; font-size: 16px; font-weight: 650; }
.secondary-pane[data-secondary="library"] > h2 { flex: 0 0 auto; }
.secondary-pane[data-secondary="library"] > .nav-section-label { flex: 0 0 auto; }
.secondary-pane[data-secondary="library"] > .project-actions,
.secondary-pane[data-secondary="library"] > .side-search,
.secondary-pane[data-secondary="library"] > #folderHint { flex: 0 0 auto; }
.side-action {
  display: block; width: 100%; border: 0; border-radius: 7px; margin: 4px 0;
  background: transparent; color: var(--fg-dim); text-align: left;
  padding: 10px 7px; font: inherit; font-size: 12px; cursor: pointer; overflow-wrap: anywhere;
}
.side-action:hover { background: var(--bg-soft); }
.side-action.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.side-search { display: block; font-size: 11px; color: var(--fg-mute); margin: 0 0 16px; }
.side-search input { display: block; width: 100%; min-width: 0; margin-top: 6px; padding: 8px 5px; font: inherit; font-size: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--card-2); }
.side-search select { display: block; width: 100%; min-width: 0; margin-top: 6px; padding: 8px 3px; font: inherit; font-size: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--card-2); color: var(--fg); }
.project-actions { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; }
.side-action:disabled { opacity: .4; cursor: default; }
.upload-project { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; font-size: 13px; }
.upload-project select, .file-project { min-width: 0; max-width: 180px; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--card-2); color: var(--fg); font: inherit; font-size: 12px; }
.file-project { max-width: 130px; }
.scene-tools { font-size: 11px; }
.scene-tools fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.scene-tools .btn { width: 100%; margin: 4px 0; white-space: normal; padding: 7px 3px; font-size: 11px; }
.scene-section { border-bottom: 1px solid var(--line); padding: 8px 0; }
.scene-section summary { cursor: pointer; font-weight: 600; color: var(--fg-dim); }
.scene-section label { display: block; margin: 9px 0; color: var(--fg-mute); }
.scene-section select, .scene-section input { display: block; width: 100%; min-width: 0; margin-top: 5px; font: inherit; color: var(--fg); }
.scene-section select { padding: 6px 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--card-2); }
.viewpoint-list { list-style: none; padding: 0; margin: 12px 0; color: var(--fg-mute); font-size: 11px; overflow-wrap: anywhere; }
.viewpoint-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.viewpoint-list .side-action { padding-inline: 2px; }
.viewpoint-list .btn { width: auto; padding: 4px; margin-right: 4px; }
.v3d-number { width: 60px; padding: 4px; font: inherit; border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--fg); }

.v3d-controls { display: block; }
.v3d-controls[open] { display: flex; align-items: flex-start; gap: 10px; }
.v3d-controls:not([open]) { left: auto; right: 12px; max-width: calc(100% - 24px); padding: 5px; }
.v3d-tools-toggle {
  order: 2; flex: none; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  color: var(--fg-dim); background: var(--card); font-size: 12px; cursor: pointer;
  list-style: none; white-space: nowrap; user-select: none;
}
.v3d-tools-toggle::-webkit-details-marker { display: none; }
.v3d-tools-toggle:hover { color: var(--accent); border-color: var(--accent); }
.v3d-tools-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v3d-controls-body { order: 1; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.v3d-controls:not([open]) .v3d-controls-body { display: none; }
.message-panel { flex: none; max-height: 30%; overflow: auto; scrollbar-width: thin; background: var(--card-2); border-bottom: 1px solid var(--line); }
.message-panel > summary { position: sticky; top: 0; z-index: 1; background: var(--card-2); padding: 7px 14px; font-size: 12px; color: var(--fg-dim); cursor: pointer; user-select: none; }
.message-panel .m-notice { border: 0; padding-top: 0; }
.message-panel:not([open]) .m-notice { display: none; }
.v3d-info-panel { position: absolute; left: 12px; bottom: 12px; z-index: 7; max-width: calc(100% - 24px); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--card) 94%, transparent); }
.v3d-info-panel > summary { font-size: 11px; color: var(--fg-dim); cursor: pointer; user-select: none; }
.v3d-info-panel .v3d-info { position: static; margin-top: 5px; padding: 0; border: 0; border-radius: 0; background: transparent; max-width: none; font-size: 11px; overflow-wrap: anywhere; }
.v3d-info-panel:not([open]) .v3d-info { display: none; }
.message-panel > summary:focus-visible, .v3d-info-panel > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 760px) {
  .v3d-controls[open] { flex-direction: column; }
  .v3d-tools-toggle { order: 0; align-self: flex-end; }
  .v3d-controls-body { width: 100%; gap: 8px; }
}
.side-help { margin: 20px 4px; color: var(--fg-mute); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.side-tabs { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; }
.operation-area { grid-column: 3; grid-row: 2; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
.operation-area > .page {
  width: 100%; height: 100%; max-width: none; margin: 0; padding: 28px;
  overflow: auto; gap: 24px; box-sizing: border-box;
  /* 讓子卡片依內容長高；短內容再撐滿可視區 */
  align-items: stretch;
}
.operation-area .card { padding: 24px; border-radius: 12px; box-shadow: 0 4px 18px #4b4f5404; flex: 0 0 auto; }
.operation-area .card-head { margin-bottom: 22px; }
.operation-area .card-head h2 { font-size: 20px; color: var(--fg); }
/* 文件／轉檔白底：至少一屏，清單變長時跟著變長（不被 flex 壓成一頁高） */
.library-card,
.convert-card {
  flex: 1 0 auto;
  min-height: 100%;
  height: max-content;
  box-sizing: border-box;
}
.file-row { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 16px; gap: 14px; background: #fff; }
.fr-name { font-size: 15px; }
.fr-thumb { width: 48px; height: 48px; }
.upload-dialog {
  width: min(720px, 94vw); max-height: min(90dvh, 900px); padding: 0; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; color: var(--fg); overflow: auto;
}
.upload-dialog::backdrop { background: #4b4f5466; }
.upload-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1;
}
.upload-dialog-head h2 { margin: 0; font-size: 17px; font-weight: 650; }
.upload-dialog .upload-card { padding: 16px 18px 20px; border: 0; box-shadow: none; background: transparent; }
.upload-card .dropzone { min-height: 280px; justify-content: center; padding: 32px 24px; background: #f7f9fd; }
.upload-card .dz-title { font-size: 20px; max-width: 640px; }
.upload-card .dz-hint { max-width: 540px; line-height: 1.8; }
.folder-bar #crumbConvert,
.folder-bar #crumbUpload { white-space: nowrap; }

.convert-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.convert-head-meta { color: var(--fg-mute); font-size: 12px; }
.convert-card .card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.convert-filter-tabs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.convert-filter-tabs .side-action { text-align: left; border: 1px solid var(--line); }
.convert-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.convert-summary button {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline; width: 100%;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: transparent;
  font: inherit; font-size: 12px; color: var(--fg-dim); cursor: pointer; text-align: left;
}
.convert-summary button:hover { background: var(--bg-soft); }
.convert-summary button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.convert-summary button.has-error strong { color: var(--err); }
.convert-summary strong { font-variant-numeric: tabular-nums; color: var(--fg); }
.convert-list { display: block; overflow-x: auto; }
.convert-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.convert-table th, .convert-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.convert-table th { color: var(--fg-mute); font-size: 11px; font-weight: 650; }
.convert-row.is-running { background: #fff8ef; }
.convert-file .fr-name { font-weight: 600; }
.convert-file .fr-file { color: var(--fg-mute); font-size: 11px; margin-top: 2px; }
.convert-error {
  margin-top: 4px; color: #b42318; font-size: 11px; max-width: 36rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folder-bar .folder-bar-filters {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.folder-search { flex: 1 1 15rem; min-width: 0; }
.folder-search input {
  width: 100%; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--fg); font: inherit; font-size: 12px;
}
.folder-search input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.col-dir-summary { color: var(--fg-dim); font-size: 12px; }
.dir-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dir-summary-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.dir-summary-stats > span { white-space: nowrap; }
.dir-summary b { color: var(--fg); font-variant-numeric: tabular-nums; }
.folder-bar #libraryFilterSelect,
.folder-bar #libraryKindSelect {
  min-width: 8.5rem; max-width: 14rem; height: 30px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg);
  font-size: 12px; cursor: pointer;
}
.operation-area > .modal { position: absolute; inset: 0; z-index: 1; display: flex; padding: 0; }
.operation-area .modal-shell { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; animation: none; }
.operation-area .m-body { min-width: 0; }
.operation-area .canvas-wrap { width: 100%; min-width: 0; }
.operation-area .m-foot { font-size: 11px; padding-inline: 12px; }
.secondary-nav .m-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 0; min-height: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.secondary-nav .tb-section { flex: none; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; background: transparent; box-shadow: none; min-width: 0; }
.secondary-nav .tb-caption { display: block; font-size: 10px; color: var(--fg-mute); }
.secondary-nav .tb-group { display: flex; flex-wrap: wrap; gap: 5px; }
.secondary-nav .tb-group > .btn { flex: 1 1 100%; }
.secondary-nav .tb-section-engine .tb-group { flex-direction: column; }
.secondary-nav .seg-btn { width: 100%; padding: 7px 3px; font-size: 11px; overflow-wrap: anywhere; white-space: normal; }
.secondary-nav .btn { padding: 7px 4px; font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.secondary-nav .tb-spacer, .secondary-nav .tb-section-actions > .tb-caption { display: none; }
.secondary-nav .zoom-label { min-width: 0; flex: 1; padding: 4px 0; font-size: 10px; }
.secondary-nav .icon-btn { width: 25px; height: 29px; border-radius: 6px; font-size: 13px; }
.secondary-nav .tb-section-actions { margin: 0; }
.secondary-nav .tb-more { width: 100%; }
.secondary-nav .tb-more > summary { width: 100%; }
.secondary-nav .tb-menu { position: static; width: 100%; min-width: 0; margin-top: 5px; padding: 3px; box-shadow: none; }
.secondary-nav .tb-menu-item { padding: 8px 3px; font-size: 11px; white-space: normal; }
.secondary-nav .layer-panel { position: static; width: 100%; height: auto; display: flex; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.secondary-nav .lp-head { padding: 8px 0; font-size: 11px; gap: 4px; flex-wrap: wrap; }
.secondary-nav .lp-note { margin: 8px 0; padding: 7px 5px; font-size: 10px; }
.secondary-nav .layer-list, .secondary-nav .ann-list { padding: 0; overflow: visible; }
.secondary-nav .layer-item { padding: 7px 0; gap: 4px; font-size: 10px; flex-wrap: wrap; }
.secondary-nav .ann-tools { position: static; margin: 8px 0; padding: 5px; gap: 4px; max-width: none; border-radius: 7px; box-shadow: none; }
.secondary-nav .ann-tools .btn { flex: 1 1 100%; }
.secondary-nav .ann-item { padding: 6px 2px; flex-wrap: wrap; }
.secondary-nav .ann-item .an-ops { flex-direction: row; flex-wrap: wrap; }
.secondary-nav .an-empty { font-size: 10px; padding: 8px 0; }
#modal[data-review="layers"] .lp-head-ann,
#modal[data-review="layers"] #annNote,
#modal[data-review="layers"] #annList { display: none; }
#modal:not([data-review="annotations"]) #sideAnnotToggle { display: none; }
.workspace-busy { font-size: 11px; color: var(--accent); max-width: 180px; overflow-wrap: anywhere; }
.workspace-toast { position: fixed; right: 24px; bottom: 24px; max-width: min(560px, 75vw); z-index: 150; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }
#modal[data-review="annotations"] .layer-panel > .lp-head:first-child,
#modal[data-review="annotations"] #layerNote,
#modal[data-review="annotations"] #layerList { display: none; }
@media (max-width: 900px) {
  .app-shell > .topbar { grid-template-columns: minmax(90px, 25%) minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
  .brand { gap: 7px; }.brand-mark { width: 28px; height: 28px; }.brand h1 { font-size: 13px; }.brand .sub { display: none; }
  .workspace-title { padding-left: 10px; }.workspace-title .m-title { font-size: 14px; }
  .topbar-actions .lib-count { max-width: 75px; font-size: 10px; text-align: right; }
  .secondary-nav { padding: 12px 4px; }.secondary-pane > h2 { font-size: 13px; }
  .side-action { font-size: 10px; padding: 9px 2px; }.side-eyebrow { font-size: 8px; letter-spacing: 0; }
  .primary-nav { padding-inline: 2px; }.nav-main > span:first-child { font-size: 19px; }.nav-main > span:last-child { font-size: 9px; }
  .secondary-nav .tb-group { gap: 3px; }.secondary-nav .zoom-label { flex-basis: 100%; order: -1; }.secondary-nav .icon-btn { flex: 1; width: 20px; }
  .operation-area > .page { padding: 14px; }.operation-area .card { padding: 16px; }
  .file-row { grid-template-columns: 32px minmax(0, 1fr); padding: 10px; gap: 8px; }.fr-thumb { width: 32px; height: 32px; }.fr-actions { grid-column: 2; flex-wrap: wrap; }
  .upload-card .dropzone { padding: 24px 12px; }.upload-card .dz-title { font-size: 17px; }
}

.v3d-controls-body { align-items: flex-start; gap: 8px; }
 .v3d-group-tabs { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
.v3d-group-tabs .btn { flex: none; }
.v3d-group-tab[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.v3d-group-panel { width: 100%; border-top: 1px solid var(--line); padding-top: 8px; }
.v3d-group-panel .v3d-hud { flex-wrap: wrap; }
.v3d-key-hint { color: var(--fg-mute); font-size: 11px; }

.scene-section > summary { padding: 7px 4px; }
.scene-section-body { margin: 5px 0 3px 8px; padding: 0 5px 0 8px; border-left: 2px solid var(--line); }
.scene-section:not([open]) > .scene-section-body { display: none; }

.v3d-group-tabs { overflow-x: auto; scrollbar-width: thin; }
.v3d-pick-status { width: 100%; margin: 0; font-size: 12px; color: var(--accent); }
.v3d-box-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 9px 0 2px; margin-top: 8px; }
.v3d-box-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.v3d-box-fields label { white-space: nowrap; color: var(--fg-dim); font-size: 12px; }
.v3d-box-fields input { width: 61px; padding: 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--fg); background: var(--card); font: inherit; }
.v3d-measure-list { list-style: none; padding: 0; margin: 5px 0 0; max-height: 130px; overflow: auto; font-size: 12px; }
.v3d-measure-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.v3d-measure-list li span { flex: 1; }
.v3d-measure-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.v3d-measure-labels span { position: absolute; transform: translate(-50%, -100%); padding: 3px 6px; border: 1px solid #d05b08; border-radius: 4px; color: #8d3b00; background: #fff8ee; font-size: 11px; white-space: nowrap; }

.v3d-height-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.v3d-height-tools .v3d-number { width: 95px; }

.v3d-view-cube { position: absolute; right: 14px; bottom: 18px; z-index: 8; display: grid; grid-template-columns: repeat(3,28px); gap: 3px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.cube-view { padding: 5px 0; border: 1px solid var(--line); border-radius: 4px; background: var(--card-2); color: var(--fg); cursor: pointer; font-size: 11px; }
.cube-view:hover { color: var(--accent); border-color: var(--accent); }
.v3d-properties { max-height: 160px; overflow: auto; margin: 8px 0; padding: 8px; background: var(--card-2); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.v3d-oblique-tools { margin: 8px 0; flex-wrap: wrap; }

.v3d-view-cube { display: block; width: 94px; perspective: 250px; padding: 7px 12px; }
.v3d-cube-solid { width: 48px; height: 48px; margin: 15px 10px 18px; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(-32deg); }
.v3d-cube-solid .cube-view { position: absolute; inset: 0; width: 48px; height: 48px; backface-visibility: hidden; background: #edf1ff; opacity: .96; }
.v3d-cube-solid [data-cube="front"] { transform: translateZ(24px); }
.v3d-cube-solid [data-cube="back"] { transform: rotateY(180deg) translateZ(24px); }
.v3d-cube-solid [data-cube="right"] { transform: rotateY(90deg) translateZ(24px); }
.v3d-cube-solid [data-cube="left"] { transform: rotateY(-90deg) translateZ(24px); }
.v3d-cube-solid [data-cube="top"] { transform: rotateX(90deg) translateZ(24px); }
.v3d-cube-solid [data-cube="bottom"] { transform: rotateX(-90deg) translateZ(24px); }
.v3d-cube-shortcuts { display: flex; gap: 4px; }
.v3d-cube-shortcuts .cube-view { flex: 1; }
.v3d-object-search { max-width: 250px; padding: 6px; margin-top: 8px; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 12px; }

#v3dObjectList, #v3dFloorList { min-width: 0; max-width: min(260px, 45vw); }

/* Locations navigation: fixed module rail; 次列預設 15%，可拖至 40%。 */
.app-shell {
  --rail-width: 72px;
  --sidebar-pct: 15%;
  grid-template-rows: 10% minmax(0, 1fr);
  grid-template-columns: var(--rail-width) var(--sidebar-pct) minmax(0, 1fr);
}
.app-shell.compact-sidebar { grid-template-columns: var(--rail-width) 0 minmax(0, 1fr); }
.app-shell.compact-sidebar .sidebar-resize { display: none; }
.app-shell > .topbar { grid-template-columns: 288px minmax(0,1fr) auto; padding: 10px 18px; gap: 20px; }
.brand h1 { font-size: 17px; line-height: 1.2; }
.brand .sub { margin-top: 0; font-size: 11px; }
.brand-mark { width: 36px; height: 36px; border-radius: 8px; }
.workspace-title { padding-left: 18px; }
.workspace-title .m-title { font-size: 16px; }
.workspace-title .m-badges { margin-top: 3px; }
.topbar-actions { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.import-entry { white-space: nowrap; }
.primary-nav { padding: 12px 7px; gap: 8px; background: #f0f3f6; }
.nav-main { min-height: 64px; border-radius: 7px; }
.nav-main svg, .viewer-empty svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-spacer { flex: 1; }
.secondary-nav { padding: 16px; }
.sidebar-project-context { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.sidebar-project-context .side-search { font-size: 11px; margin-bottom: 14px; }
.sidebar-project-context select { font-size: 13px; padding: 9px 10px; background: #fff; }
.secondary-pane > h2 { font-size: 18px; margin-bottom: 15px; }
.side-action { padding: 8px 10px; font-size: 13px; border-radius: 5px; }
.nav-section-label { display: block; margin: 15px 0 8px; color: var(--fg-mute); font-size: 11px; font-weight: 600; }
.project-actions { display: flex; gap: 6px; border: 0; margin-bottom: 0; }
.project-actions .side-action { border: 1px solid var(--line); text-align: center; font-size: 12px; }
.location-context { margin-bottom: 12px; }
.location-context .nav-section-label { margin: 0 0 4px; }
.location-context strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.location-floor { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; align-items: center; font-size: 12px; margin: 12px 0; }
.location-project { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px; align-items: center; font-size: 12px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.location-project label { font-weight: 600; }
.location-project select, .location-floor select { width: 100%; min-width: 0; padding: 7px 4px; border: 1px solid var(--line); border-radius: 5px; background: white; font: inherit; }
.location-catalog { border-block: 1px solid var(--line); padding: 10px 0; margin: 14px 0 8px; }
.location-catalog > summary, .viewer-nav-group > summary { cursor: pointer; font-size: 12px; font-weight: 650; color: var(--fg-dim); padding: 6px 0; }
.location-kind-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; background: var(--bg-soft); border-radius: 6px; margin: 8px 0; }
.location-kind-tabs button { flex: 1 1 calc(33.33% - 4px); border: 0; background: transparent; border-radius: 4px; padding: 5px 2px; font: inherit; font-size: 11px; color: var(--fg-dim); cursor: pointer; }
.location-kind-tabs button.is-active { background: white; color: var(--accent); box-shadow: 0 1px 4px #4b4f5412; }
#locationSearch { width: 100%; padding: 7px 9px; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 5px; }
.location-items { list-style: none; padding: 0; margin: 8px 0 0; max-height: 160px; overflow: auto; scrollbar-width: thin; }
.location-item { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; border: 0; background: transparent; padding: 7px 8px; border-radius: 4px; color: var(--fg-dim); cursor: pointer; text-align: left; font: inherit; font-size: 12px; }
.location-item-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.location-item-name, .location-item-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-item small { color: var(--fg-mute); font-size: 10px; flex: none; }
.location-item-path { color: var(--fg-mute); font-size: 11px; font-weight: 400; }
.location-item:hover { background: var(--bg-soft); }
.location-item.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.location-item:disabled { opacity: .4; cursor: default; }
.location-empty { color: var(--fg-mute); padding: 8px; font-size: 12px; }
.viewer-nav-group { padding: 3px 0; }
.viewer-nav-group .side-action { padding-left: 17px; margin: 1px 0; font-size: 12px; }
.side-tabs { padding-bottom: 10px; margin-bottom: 10px; }
.viewer-mode-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); flex: none; }
.viewer-mode-tabs { display: flex; gap: 4px; }
.viewer-mode-tabs button { border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 7px 12px; font: inherit; font-size: 12px; color: var(--fg-dim); cursor: pointer; white-space: nowrap; }
.viewer-mode-tabs button.is-active { background: var(--accent-soft); color: var(--accent); border-color: #0084d420; font-weight: 650; }
.viewer-mode-tabs button:disabled { opacity: .4; cursor: default; }
.viewer-empty { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f8fafc; color: var(--fg-mute); padding: 24px; text-align: center; }
.viewer-empty svg { width: 52px; height: 52px; stroke-width: 1; margin-bottom: 16px; }
.viewer-empty h3 { margin: 0; color: var(--fg-dim); font-size: 18px; }
.viewer-empty p { font-size: 13px; }
.scene-tools .btn, .scene-tools { font-size: 12px; }
.scene-tools .btn { padding: 8px; }
.v3d-controls[open] { max-height: min(30%, 280px); overflow: auto; scrollbar-width: thin; }
.v3d-tools-toggle { position: sticky; top: 0; z-index: 2; }
@media (max-width: 900px) {
  .app-shell { --rail-width: 60px; grid-template-rows: 10% minmax(0,1fr); }
  .app-shell > .topbar { grid-template-columns: minmax(100px,180px) minmax(0,1fr) auto; gap: 10px; padding: 10px; }
  .brand h1 { font-size: 13px; }
  .brand-mark, .brand .sub, .lib-count { display: none; }  .workspace-title { padding-left: 10px; }
  .viewer-mode-bar { padding: 8px; }
  .viewer-mode-tabs { flex-wrap: wrap; }
  .viewer-mode-tabs button { padding: 7px; font-size: 11px; }
}

/* ── Viewer 工具列＋右側工具抽屜 ─────────────────────────────────
   模式、檢閱工具、訊息／資訊集中在畫布上方一條；工具內容一律在右側抽屜，
   一次只開一個；縮放與取景浮在畫布右下。 */
.viewer-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 6px 10px; background: #fff; border-bottom: 1px solid var(--line); flex: none; position: relative; z-index: 20; }
.viewer-tools { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.vt-btn, .bar-pop > summary { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; padding: 5px 9px; font: inherit; font-size: 12px; line-height: 1.4; color: var(--fg-dim); cursor: pointer; white-space: nowrap; list-style: none; user-select: none; }
.bar-pop > summary::-webkit-details-marker { display: none; }
.vt-btn:hover:not(:disabled), .bar-pop > summary:hover { background: var(--bg-soft); color: var(--fg); }
.vt-btn.is-active, .vt-btn[aria-expanded="true"], .tb-more[open] > summary.vt-btn, .bar-pop[open] > summary { background: var(--accent-soft); color: var(--accent); border-color: #0084d426; }
.vt-btn:disabled { opacity: .4; cursor: default; }
.vt-btn .pill { font-size: 10px; padding: 0 5px; }
#btnAnnot.on::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--err); }
.vt-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.vt-group-label { font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--fg-mute); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; margin-right: 2px; line-height: 14px; }
.viewer-tools[data-mode="2d"] [data-needs3d]:not([aria-expanded="true"]):not([aria-pressed="true"]) { color: var(--fg-mute); }
.viewer-tools:not([data-mode="2d"]) .vt-group-label { color: var(--accent); border-color: #0084d440; }
.viewer-bar-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.bar-pop { position: relative; }
.bar-pop-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(380px, 80vw); max-height: 60vh; overflow: auto; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.bar-pop .m-notice { padding: 0; border: 0; background: transparent; }
#messagePanel[data-level="warn"] > summary .pill { background: var(--warn); color: #fff; }
.info-line { margin: 8px 0 0; font-size: 11px; color: var(--fg-dim); overflow-wrap: anywhere; }
.info-line:empty { display: none; }
.help-body p { margin: 0 0 6px; font-size: 12px; color: var(--fg-dim); }
.tb-more .tb-menu { z-index: 40; }

.m-body { position: relative; }
.tool-drawer { width: 320px; flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: #fff; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-head h3 { margin: 0; font-size: 13px; font-weight: 650; }
.drawer-head .icon-btn { width: 28px; height: 28px; font-size: 13px; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; scrollbar-width: thin; font-size: 12px; }
.tool-drawer .layer-panel { position: static; width: auto; height: auto; display: flex; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.tool-drawer .lp-head { padding: 6px 0; }
.tool-drawer .layer-list, .tool-drawer .ann-list { padding: 0; overflow: visible; }
.tool-drawer .ann-tools { position: static; margin: 8px 0; max-width: none; box-shadow: none; flex-wrap: wrap; }
.tool-drawer .v3d-group-panel { border-top: 0; padding-top: 0; }
.tool-drawer .v3d-hud { position: static; max-width: none; padding: 0; margin: 0 0 10px; border: 0; background: transparent; backdrop-filter: none; gap: 6px 8px; flex-wrap: wrap; }
.tool-drawer .v3d-hud-views .vv { flex: 1 0 auto; }
.tool-drawer .v3d-range { width: 120px; }
.tool-drawer .bim-filters input { width: 100%; }
.tool-drawer .bim-filters label { flex: 1 1 45%; flex-direction: column; align-items: stretch; }
#drawingMeasurePanel { display: flex; flex-direction: column; gap: 8px; }
#drawingMeasurePanel label { display: flex; flex-direction: column; gap: 4px; }
#sceneDisplayGroup .scene-section-body { display: flex; flex-direction: column; gap: 6px; }

.view-float { position: absolute; right: 12px; bottom: 12px; z-index: 8; display: flex; align-items: center; gap: 3px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 3px 12px #4b4f5414; }
.view-float .icon-btn { width: 30px; height: 30px; border-radius: 5px; font-size: 15px; }
.view-float .view-float-text { width: auto; padding: 0 8px; font-size: 11px; }
.view-float .zoom-label { min-width: 48px; padding: 4px 2px; font-size: 11px; }
.modal[data-mode="3d"] .view-float { right: 124px; }
.canvas-wrap.viewer-split .view-float { right: auto; left: 12px; }
.v3d-pick-status { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 8; width: auto; max-width: calc(100% - 24px); padding: 5px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 3px 12px #4b4f5414; }

.location-pane { display: flex; flex-direction: column; min-height: 100%; }
.location-pane .location-catalog { flex: 1; display: flex; flex-direction: column; min-height: 220px; border-bottom: 0; }
.location-pane .location-items { flex: 1; max-height: none; min-height: 120px; }
.location-group { padding: 10px 8px 3px; font-size: 10px; font-weight: 650; color: var(--fg-mute); letter-spacing: .5px; }

/* 圖說清冊 */
.library-card .card-head { gap: 12px; flex-wrap: wrap; }
.bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--fg-dim); }
.bulk-bar label { display: flex; align-items: center; gap: 6px; }
.bulk-bar select, .file-project { max-width: 150px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font: inherit; font-size: 12px; }
.file-list { display: block; overflow-x: auto; }
.file-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.file-table th { position: sticky; top: 0; z-index: 1; background: #f7f9fc; text-align: left; font-weight: 600; font-size: 11.5px; color: var(--fg-mute); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.file-table td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.file-table tr.file-row { display: table-row; cursor: pointer; background: transparent; border: 0; border-radius: 0; padding: 0; }
.file-table tr.file-row:hover { background: var(--card-2); }
.file-table tr.file-row.is-active { background: var(--accent-soft); box-shadow: none; }
.th-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.th-sort:hover, .th-sort[aria-sort="ascending"], .th-sort[aria-sort="descending"] { color: var(--accent); }
.col-check { width: 28px; }
.col-status, .col-conv, .col-disc { white-space: nowrap; }
.col-conv .tag { white-space: nowrap; }
.col-no { width: 110px; white-space: nowrap; }
.col-title { min-width: 220px; }
.col-rev { width: 52px; }
.col-date { width: 92px; white-space: nowrap; color: var(--fg-dim); }
.col-actions { width: 40px; white-space: nowrap; text-align: center; vertical-align: middle; }
.row-more { position: relative; display: inline-block; vertical-align: middle; }
.row-more > summary { list-style: none; cursor: pointer; user-select: none; min-width: 28px; padding-inline: 8px; }
.row-more > summary::-webkit-details-marker { display: none; }
.row-more[open] > summary { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* 一律 fixed：避免 absolute 先撐出捲軸、再改 fixed 收回造成短清單抖動 */
.row-menu {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  min-width: 132px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 8px 22px rgba(20, 35, 60, .14);
  text-align: left;
  visibility: hidden;
  pointer-events: none;
}
.row-menu.is-fixed {
  visibility: visible;
  pointer-events: auto;
}
.row-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.row-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.row-menu-item.is-danger { color: var(--err); }
.row-menu-item.is-danger:hover { background: color-mix(in srgb, var(--err) 12%, #fff); color: var(--err); }
.fr-title-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fr-title-cell .fr-thumb { width: 36px; height: 36px; flex: none; }
.fr-file { font-family: var(--mono); font-size: 11px; }
.muted { color: var(--fg-mute); }
.badge.status-wip { color: #6b5b00; background: #fff6d5; }
.badge.status-review { color: #8d3b00; background: #fff0e0; }
.badge.status-approved { color: #11613f; background: #e3f6ec; }
.badge.status-issued { color: #006cae; background: #e5f3fb; }
.badge.status-void { color: var(--fg-mute); background: var(--bg-soft); text-decoration: line-through; }
.badge-file { font-family: var(--mono); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.warn { color: #8d3b00; background: #fff0e0; border-color: transparent; }
.file-row.is-superseded { opacity: 0.72; }
.file-row.is-superseded .fr-name::after { content: '（舊版）'; color: var(--fg-mute); font-weight: 400; font-size: 0.85em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.maintenance-card .btn-danger, .clear-dialog .btn-danger, .archive-card .btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
.archive-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.archive-toolbar input[type="search"] {
  flex: 1 1 220px; min-width: 0; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--fg); font: inherit; font-size: 12px;
}
.archive-toolbar input[type="search"]:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.archive-table td.mono { white-space: nowrap; }
.archive-toolbar #archiveSelCount { color: var(--fg-dim); font-size: 12px; }
.archive-toolbar .spacer { flex: 1 1 auto; }
.archive-list { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.archive-list .empty { margin: 0; padding: 18px; }
.archive-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.archive-table .fr-name { font-weight: 550; overflow-wrap: anywhere; }
.archive-table .fr-file { color: var(--fg-mute); margin-top: 2px; }
.archive-table .col-actions { white-space: nowrap; text-align: right; }
.archive-note { color: #8a4b00; font-size: 11px; margin-top: 2px; }
.archive-summary { color: var(--fg-dim); font-size: 12px; }
.clear-dialog .btn-danger:not(:disabled) { color: #fff; background: var(--err); border-color: var(--err); }
.clear-dialog .btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.convert-table td:first-child { white-space: nowrap; }
.engine-summary { margin: 0 0 10px; color: var(--fg-dim); font-size: 13px; line-height: 1.6; }
.engine-details summary { cursor: pointer; color: var(--fg-mute); font-size: 12px; }
.engine-details .engine-note { margin-top: 8px; }
.danger-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px;
  padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--err) 35%, var(--line)); border-radius: 8px;
  background: color-mix(in srgb, var(--err) 5%, transparent);
}
.danger-zone h3 { margin: 0 0 2px; font-size: 13px; color: var(--err); }
.danger-zone p { margin: 0; font-size: 12px; color: var(--fg-dim); }
.meta-dialog.clear-dialog form { grid-template-columns: 1fr; }
.clear-warning { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-dim); }
.meta-dialog { width: min(440px, 92vw); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; background: #fff; color: var(--fg); }
.meta-dialog.clear-dialog { box-sizing: border-box; width: min(720px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.meta-dialog.clear-dialog form { grid-template-columns: minmax(0, 1fr); }
.clear-dialog form > *, .clear-dialog label { min-width: 0; overflow-wrap: anywhere; }
.clear-dialog select, .clear-dialog input { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.clear-dialog .meta-actions { flex-wrap: wrap; }
.meta-dialog::backdrop { background: #4b4f5466; }
.meta-dialog h3 { margin: 0 0 4px; font-size: 16px; }
.meta-file { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; color: var(--fg-mute); overflow-wrap: anywhere; }
.meta-dialog form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.meta-dialog form > h3, .meta-dialog form > .meta-file, .meta-dialog form > .side-help, .meta-actions, .meta-extra, .meta-section { grid-column: 1 / -1; }
.meta-section { margin: 4px 0 0; font-size: 12px; font-weight: 650; color: var(--fg-dim); }
.meta-extra textarea { min-height: 64px; resize: vertical; font: inherit; font-size: 12px; }
.revisions-list { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.revision-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.revision-row.is-current { border-color: var(--accent); }
.meta-dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-dim); }
.meta-dialog input, .meta-dialog select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; }
.meta-actions { display: flex; justify-content: flex-end; gap: 8px; }

.folder-dialog form { grid-template-columns: 1fr; }
.import-report { width: min(560px, 92vw); }
.import-report form { grid-template-columns: 1fr; }
.import-report h4 { margin: 4px 0; font-size: 13px; }
.import-report p { margin: 4px 0; font-size: 13px; }
.import-report .warn { color: var(--warn, #b26b00); }
.import-skipped { max-height: 220px; overflow: auto; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; border: 1px solid var(--line-soft); border-radius: 4px; }
.import-skipped li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; border-bottom: 1px solid var(--line-soft); }
.import-skipped li span { overflow-wrap: anywhere; }
.import-skipped small { flex: none; color: var(--fg-mute); }

/* 專案資料夾樹（文件庫側欄與檢視側欄共用） */
.folder-tree { max-height: 260px; overflow: auto; scrollbar-width: thin; margin-bottom: 8px; }
.secondary-pane[data-secondary="library"] > .folder-tree {
  flex: 1 1 auto; min-height: 180px; max-height: none; margin-bottom: 10px;
}
.folder-tree ul { list-style: none; margin: 0; padding: 0; }
.folder-head { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.folder-head .nav-section-label { margin: 0; }
.folder-head .project-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.folder-head .project-actions .side-action { margin: 0; padding: 5px 2px; font-size: 11.5px; white-space: nowrap; }
.secondary-pane[data-secondary="library"] > #folderHint { margin: 0 2px 8px; }
.folder-row { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--depth, 0) * 12px); }
.folder-toggle { width: 18px; height: 24px; flex: none; border: 0; background: none; padding: 0; color: var(--fg-mute); font-size: 11px; cursor: pointer; }
.folder-toggle:disabled { visibility: hidden; }
.folder-node { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 5px 6px; border-radius: 4px; color: var(--fg-dim); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.folder-node:hover { background: var(--bg-soft); }
.folder-node.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.folder-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-node small { color: var(--fg-mute); font-size: 10px; font-weight: 400; }
#folderActions .side-action { padding: 6px 4px; }
.location-folders { margin: 6px 0 0; }
.location-folders > summary { cursor: pointer; font-size: 12px; font-weight: 650; color: var(--fg-dim); padding: 6px 0; }
.location-folders .folder-tree { max-height: 30vh; }
.location-item.is-download { color: var(--fg-mute); }
.upload-project select:disabled { opacity: .5; }
.bulk-folder { display: inline-flex; align-items: center; gap: 8px; }
.col-folder { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); }

/* 檔案總管式瀏覽：路徑列＋子資料夾列排在檔案前。 */
.folder-bar { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0 0 10px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--card-2); }
.folder-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; flex: none; }
.folder-tools-row { padding: 0; }
.folder-tools-row > .btn { white-space: nowrap; }
.folder-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; flex: 1 1 12rem; font-size: 13px; }
.crumb { border: 0; background: transparent; padding: 3px 6px; border-radius: 4px; font: inherit; color: var(--accent); cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.crumb:hover { background: var(--accent-soft); }
.crumb.is-current { color: var(--fg); font-weight: 650; cursor: default; }
.crumb-sep { color: var(--fg-mute); }
.folder-scope { font-size: 12px; color: var(--fg-mute); white-space: nowrap; }
.file-table tr.dir-row { cursor: default; user-select: none; }
.file-table tr.dir-row:hover { background: var(--card-2); }
.file-table tr.dir-row .fr-name { font-weight: 650; }
.dir-thumb { background: #fff7e0; border-color: #f0d68a; }
.dir-thumb svg { width: 28px; height: 28px; fill: #f6c445; stroke: #c99a1e; stroke-width: 1.2; stroke-linejoin: round; }

/* PDF 預覽：頁面垂直排列，可捲動；縮放由右下浮動控制。 */
.pdf-view { position: absolute; inset: 0; overflow: auto; padding: 16px; background: #e9edf3; outline: none; scrollbar-width: thin; }
.web-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; outline: none; }
.web-view[hidden] { display: none; }
.web-view-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #f3f5f7; }
.web-view-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.web-view iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.web-view-note { margin: 0; padding: 6px 12px; font-size: 12px; color: var(--fg-mute); }
.pdf-page, .img-page { position: relative; margin: 0 auto 16px; background: #fff; box-shadow: 0 2px 10px #4b4f5426; overflow: hidden; }
.pdf-page canvas, .img-page canvas, .img-page img { display: block; width: 100%; height: 100%; }
.modal[data-mode="pdf"] .view-float .zoom-label,
.modal[data-mode="image"] .view-float .zoom-label { min-width: 84px; }

@media (max-width: 1100px) {
  .col-disc, .col-date, .col-folder { display: none; }
}
@media (max-width: 900px) {
  /* 覆蓋在畫布上，但至少留一半畫布可點選（量測、標註、控制點）。 */
  .tool-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 12; width: min(320px, 50%); min-width: 200px; box-shadow: var(--shadow); }
  .col-project, .col-conv, .col-rev { display: none; }
  .view-float .view-float-text { padding: 0 5px; }
}

/* 1024px 以下：次功能列改為覆蓋操作區的抽屜（不擠壓圖面），寬度固定、不可拖曳。 */
@media (max-width: 1024px) {
  .app-shell, .app-shell.compact-sidebar { grid-template-columns: var(--rail-width) 0 minmax(0, 1fr); }
  .secondary-nav {
    grid-column: 3; grid-row: 2; justify-self: start; width: min(300px, 85%); z-index: 30;
    box-shadow: 8px 0 24px rgba(20, 35, 60, .16);
  }
  .secondary-nav-head, .sidebar-resize { display: none; }
}

/* 2D／3D 對位：三個步驟依序完成；完成的步驟以綠色編號標示。 */
.link-steps > #linkedSplit { width: 100%; margin-bottom: 10px; }
.link-step { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 0 0 10px; background: #fff; }
.link-step h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--fg); }
.link-step-no { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-soft); color: var(--fg-dim); font-size: 11px; font-weight: 700; flex: none; }
.link-step.is-done .link-step-no { background: var(--ok); color: #fff; }
.link-step label { display: block; margin: 0 0 8px; font-size: 12px; color: var(--fg-dim); }
.link-step label > select, .link-step label > input:not([type="checkbox"]) { display: block; width: 100%; margin-top: 3px; }
.link-step .side-help { margin: 6px 0 8px; }
.link-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.link-step .link-check { display: flex; align-items: center; gap: 6px; }
.link-saved { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.link-progress-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-progress { font-size: 12px; color: var(--fg-mute); font-variant-numeric: tabular-nums; }
.link-progress[data-level="mid"] { color: var(--warn); }
.link-progress[data-level="ok"] { color: var(--ok); }
.link-actions { display: flex; flex-direction: column; gap: 6px; }
.link-delete { margin-top: 8px; color: var(--err); }

/* 文件版次歷程 */
.revisions-dialog { width: min(760px, 94vw); padding: 24px; }
.revisions-dialog form { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.revisions-dialog h3 { font-size: 20px; margin: 0; }
.revisions-dialog .meta-file { margin: 0; font-size: 13px; color: var(--fg-dim); }
.revision-summary { margin: 0; font-size: 14px; font-weight: 600; }
.revision-help { margin: 0; color: var(--fg-mute); font-size: 12px; line-height: 1.6; }
.revision-status { margin: 0; padding: 10px 12px; background: var(--accent-soft); border-radius: 8px; font-size: 13px; }
.revisions-dialog .revisions-list { max-height: 55dvh; gap: 10px; padding: 2px; }
.revisions-dialog .revision-row { padding: 16px; gap: 20px; border-radius: 10px; }
.revisions-dialog .revision-row.is-current { background: var(--accent-soft); border-color: var(--accent); }
.revision-detail { min-width: 0; }
.revision-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.revision-number { font: 650 20px var(--mono); }
.revision-label { border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; font-size: 11px; color: var(--fg-dim); background: #fff; }
.revision-label.is-current { color: var(--accent); border-color: var(--accent); }
.revision-viewing { font-size: 11px; color: var(--fg-mute); }
.revision-info, .revision-filename { margin-top: 7px; font-size: 12px; color: var(--fg-dim); overflow-wrap: anywhere; }
.revision-filename { color: var(--fg-mute); }
.revision-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; }
@media (max-width: 600px) {
  .revisions-dialog { padding: 16px; }
  .revisions-dialog .revision-row { align-items: stretch; flex-direction: column; gap: 12px; }
  .revision-actions { justify-content: flex-start; }
}

/* 釋疑：模型顯示編號，圖形留在模型座標，右側編輯對應提問。 */
.rfi-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.rfi-tools .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.v3d-measure-labels .v3d-note-caption { transform: translate(-50%, 16px); max-width: 180px; white-space: normal; border-color: #0084d4; color: #006cae; background: #fff; pointer-events: none; }
.v3d-measure-labels .v3d-note-number { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; min-width: 28px; height: 28px; padding: 0 6px; border: 2px solid #fff; border-radius: 50%; background: #0084d4; color: #fff; font: 700 13px var(--mono); box-shadow: 0 1px 5px #0005; cursor: pointer; }
.v3d-note-number:focus-visible { outline: 3px solid #efaa28; outline-offset: 2px; }
.tool-drawer.is-rfi { position: relative; width: min(var(--rfi-width, 360px), calc(100% - 120px)); min-width: 200px; }
.rfi-resize { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; z-index: 3; cursor: col-resize; touch-action: none; }
.rfi-resize::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; }
.rfi-resize:hover::after, .rfi-resize:focus-visible::after { background: var(--accent); }
.tool-drawer.is-rfi .drawer-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 8px; }
#v3dNotesGroupPanel:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#v3dNotesGroupPanel > .rfi-tools, #v3dNotesGroupPanel > .v3d-key-hint { flex: none; }
#v3dNotesList.rfi-list { flex: 1; min-height: 0; max-height: none; display: flex; flex-direction: column; gap: 10px; overflow: auto; overscroll-behavior: contain; }
#v3dNotesList > li { flex-shrink: 0; }
@media (max-width: 900px) {
  .tool-drawer.is-rfi { position: absolute; }
}
#v3dNotesList .rfi-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rfi-heading { font-size: 13px; font-weight: 650; color: var(--accent); }
.rfi-item textarea { box-sizing: border-box; width: 100%; resize: vertical; min-height: 76px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: inherit; line-height: 1.5; }
.rfi-item textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.rfi-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rfi-save-state { font-size: 11px; color: var(--fg-mute); }
#v3dNotesList .rfi-empty { display: block; color: var(--fg-mute); padding: 12px 0; }

/* 文件清冊：資訊欄固定寬，檔名填滿剩餘空間；窄版保留所有欄位並橫向捲動。 */
#fileList { width: 100%; min-width: 0; overflow-x: auto; }
#fileList > .file-table { table-layout: fixed; min-width: 1116px; }
#fileList .col-check { width: 28px; }
#fileList .col-no { width: 100px; }
#fileList .col-title { width: auto; min-width: 0; }
#fileList .col-actions { width: 56px; }
#fileList .col-folder { width: 160px; }
#fileList .col-disc { width: 80px; }
#fileList .col-rev { width: 72px; }
#fileList .col-status { width: 92px; }
#fileList .col-conv { width: 104px; }
#fileList .col-date { width: 104px; }
#fileList td:not(.col-actions):not(.col-dir-summary) { overflow: hidden; text-overflow: ellipsis; }
#fileList .fr-main { flex: 1; overflow: hidden; }
#fileList .fr-name, #fileList .fr-file { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fileList .fr-meta > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 覆蓋舊窄版隱藏規則，位置及後續欄位維持可用。 */
#fileList .col-no, #fileList .col-folder, #fileList .col-disc,
#fileList .col-date, #fileList .col-conv, #fileList .col-rev { display: table-cell; }

/* 本機登入及權限管理 */
.auth-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  padding: 24px;
}
.auth-card {
  width: min(440px, 100%);
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  display: grid;
  gap: 16px;
  animation: pop .18s ease-out;
}
.auth-brand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.auth-brand-logo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
}
.auth-card h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--fg); }
.auth-card p, .auth-login-desc { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.5; }
.auth-card label, .auth-form > label, .auth-form-grid > label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.auth-card input, .auth-form input, .auth-form select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  font-size: 13.5px;
  color: inherit;
  background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
.auth-card input:focus, .auth-form input:focus, .auth-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-card input[readonly] {
  background: var(--bg-soft);
  color: var(--fg-mute);
  cursor: not-allowed;
}
.auth-identity {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 帳號與權限主彈窗 */
.auth-admin {
  width: min(1080px, 95vw);
  height: min(88vh, 880px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--fg);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.28);
}
.auth-admin::backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
}
.auth-dialog-sub {
  width: min(540px, 92vw);
  height: auto;
  max-height: 85vh;
  padding: 24px;
}

/* 彈窗頂部 */
.auth-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.auth-admin-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.auth-admin-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -.2px;
}
.auth-admin-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-dim);
}
.auth-admin-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tabs */
.auth-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.auth-tab-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.auth-tab-btn:hover {
  color: var(--fg);
  background: rgba(0, 0, 0, 0.04);
}
.auth-tab-btn.is-active {
  background: var(--card);
  color: var(--accent);
  border-color: var(--line);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 狀態通知條 */
.auth-status-bar {
  padding: 0 24px;
  flex: none;
}
.auth-error {
  margin: 8px 0 0;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  min-height: 1.4em;
  white-space: pre-wrap;
  display: none;
}
.auth-error.auth-msg-success {
  display: block;
  background: rgba(30, 158, 106, 0.12);
  color: #15803d;
  border: 1px solid rgba(30, 158, 106, 0.25);
}
.auth-error.auth-msg-error {
  display: block;
  background: rgba(197, 48, 48, 0.10);
  color: #c53030;
  border: 1px solid rgba(197, 48, 48, 0.22);
}
.auth-error.auth-msg-busy {
  display: block;
  background: rgba(0, 132, 212, 0.08);
  color: #0084d4;
  border: 1px solid rgba(0, 132, 212, 0.22);
}

/* 彈窗主滾動內容區 */
.auth-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 28px;
}
.auth-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 區塊標題 */
.auth-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: -6px;
}
.auth-section-header h3, .auth-content > h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}
.auth-header-badge {
  font-size: 12px;
  color: var(--fg-mute);
  padding: 2px 8px;
  background: var(--bg-soft);
  border-radius: 6px;
}

/* 帳號清單與卡片 */
.auth-user-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.auth-row:hover {
  border-color: color-mix(in srgb, var(--line) 60%, var(--accent));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.auth-row > span {
  flex: 1;
  min-width: 160px;
}
.auth-user-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.auth-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  flex: none;
}
.auth-user-avatar.is-admin {
  background: rgba(234, 179, 8, 0.16);
  color: #b45309;
}
.auth-user-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.auth-user-name-line {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.auth-user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.auth-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}
.auth-tag-admin {
  background: rgba(234, 179, 8, 0.15);
  color: #b45309;
  border: 1px solid rgba(234, 179, 8, 0.3);
  font-weight: 600;
}
.auth-tag-role {
  background: var(--card-2);
  color: var(--fg-dim);
  border: 1px solid var(--line);
}
.auth-tag-none {
  background: transparent;
  color: var(--fg-mute);
  border: 1px dashed var(--line);
  font-style: italic;
}
.auth-user-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 我的帳號 */
.auth-myaccount-profile {
  background: linear-gradient(135deg, var(--card-2), var(--accent-soft));
}
.auth-myaccount-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.auth-myaccount-avatar {
  width: 56px;
  height: 56px;
  font-size: 22px;
  border-radius: 14px;
}
.auth-myaccount-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.auth-myaccount-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}
.auth-myaccount-username {
  font-size: 13px;
  color: var(--fg-dim);
  font-family: var(--font-ui);
}
.auth-myaccount-dialog {
  width: min(680px, 95vw);
  height: auto;
  max-height: min(88vh, 880px);
}
.auth-grant-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.auth-grant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.auth-grant-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.auth-grant-label {
  font-size: 12px;
  color: var(--fg-dim);
}
.auth-grant-code,
.auth-grant-detail {
  font-size: 12px;
  color: var(--fg-dim);
}
.auth-grant-code {
  font-family: var(--font-ui);
}
.auth-session-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.auth-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.auth-session-row.is-current {
  border-color: var(--accent, var(--line));
}
.auth-session-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.auth-session-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-session-meta {
  font-size: 12px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 表單與卡片 */
.auth-section-card {
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.auth-form {
  display: grid;
  gap: 14px;
}
.auth-form h3, .auth-form h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.auth-form-desc, .auth-form-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-dim);
  line-height: 1.5;
}
.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.auth-form-btn-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* 角色管理 */
.auth-role-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  background: var(--card-2);
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.auth-role-picker-wrap {
  flex: 1;
  max-width: 400px;
}
.auth-role-picker-wrap label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.auth-role-name-row {
  max-width: 400px;
}
.auth-perm-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0;
}
.auth-perm-search {
  flex: 1;
  max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--card);
}
.auth-perm-quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-perm-total-count {
  font-size: 12.5px;
  color: var(--fg-dim);
  font-weight: 500;
}

/* 權限控制點分組卡片 */
.auth-permissions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-perm-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.auth-perm-group-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--card-2);
  border-bottom: 1px solid var(--line-soft);
}
.auth-perm-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.auth-perm-group-icon {
  font-size: 16px;
}
.auth-perm-group-badge {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}
.auth-perm-group-desc {
  margin: 0;
  font-size: 12px;
  color: var(--fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-perm-group-btns {
  display: flex;
  gap: 6px;
}
.auth-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
  padding: 12px 14px;
}
.auth-perm-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--card);
  font-size: 13px;
  transition: background .12s, border-color .12s;
  cursor: pointer;
}
.auth-perm-item:hover {
  background: var(--bg-soft);
  border-color: color-mix(in srgb, var(--line) 60%, var(--accent));
}
.auth-perm-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.auth-perm-label {
  font-weight: 500;
  color: var(--fg);
  line-height: 1.35;
}
.auth-perm-code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
}
.auth-ownership-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.auth-ownership-wrap label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--fg-mute);
}
.auth-ownership-wrap select {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 11.5px;
  background: var(--card);
  border: 1px solid var(--line);
  max-width: 86px;
}
.auth-ownership-wrap.is-disabled select {
  opacity: .4;
  cursor: not-allowed;
}
.auth-ownership-hint {
  font-size: 10.5px;
  color: #15803d;
  font-weight: 500;
}

/* 角色指派與導航 */
.auth-nav-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: -6px;
}
.auth-nav-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.auth-user-target-banner {
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13.5px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.auth-user-target-banner code {
  font-family: var(--mono);
  font-weight: 600;
}
.auth-binding-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-binding-card {
  justify-content: space-between;
}
.auth-binding-summary {
  font-size: 13.5px;
  color: var(--fg);
  font-weight: 500;
}
.auth-empty-hint {
  margin: 0;
  padding: 18px;
  text-align: center;
  color: var(--fg-mute);
  font-size: 13px;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

/* 稽核紀錄 */
.auth-audit-filter {
  margin-bottom: -6px;
}
.auth-audit-search {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.auth-audit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-audit-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}
.auth-audit-summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  background: var(--card-2);
  transition: background .12s;
}
.auth-audit-summary:hover {
  background: var(--bg-soft);
}
.auth-audit-pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--card);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  border-top: 1px solid var(--line-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 按鈕微調 */
.btn-danger {
  color: #c53030 !important;
  border-color: rgba(197, 48, 48, 0.3) !important;
  background: rgba(197, 48, 48, 0.05) !important;
}
.btn-danger:hover {
  background: #c53030 !important;
  color: #fff !important;
  border-color: #c53030 !important;
}
.btn-warn-outline {
  color: #b7791f !important;
  border-color: rgba(183, 121, 31, 0.35) !important;
  background: rgba(183, 121, 31, 0.06) !important;
}
.btn-warn-outline:hover {
  background: #b7791f !important;
  color: #fff !important;
}
.btn-ok-outline {
  color: #15803d !important;
  border-color: rgba(30, 158, 106, 0.35) !important;
  background: rgba(30, 158, 106, 0.06) !important;
}
/* 專案連結概念呼應與專案表格 */
.auth-concept-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
}
.auth-callout-icon {
  font-size: 18px;
  flex: none;
}
.auth-project-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  margin-top: 10px;
}
.auth-project-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.auth-project-table th {
  background: var(--card-2);
  color: var(--fg-dim);
  font-weight: 600;
  font-size: 12.5px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.auth-project-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.auth-project-table tr:last-child td {
  border-bottom: none;
}
.auth-project-name {
  font-weight: 600;
  color: var(--fg);
}
.auth-project-role-select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  background: var(--card);
  min-width: 160px;
}
.auth-project-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.auth-tag-project-linked {
  background: rgba(30, 158, 106, 0.12);
  color: #15803d;
  border: 1px solid rgba(30, 158, 106, 0.25);
  font-weight: 500;
}
.auth-tag-active {
  background: rgba(30, 158, 106, 0.12);
  color: #15803d;
  border: 1px solid rgba(30, 158, 106, 0.25);
}

.topbar-actions { flex-wrap: wrap; }

/* 釋疑指派與專案群組 */
.rfi-filters { display: flex; flex: none; gap: 8px; margin-bottom: 8px; }
.rfi-filters select { flex: 1; min-width: 0; }
.rfi-workflow { border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; }
.rfi-workflow summary { cursor: pointer; overflow-wrap: anywhere; }
.rfi-workflow-fields { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.rfi-workflow-fields label { display: flex; flex-direction: column; gap: 4px; }
.rfi-workflow-fields select, .rfi-workflow-fields input, .rfi-filters select { width: 100%; min-height: 32px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font: inherit; }
.rfi-group-dialog { width: min(480px, 90vw); max-height: 85dvh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.rfi-group-dialog > input, .rfi-group-dialog > select { display: block; width: 100%; box-sizing: border-box; margin: 12px 0; padding: 8px; }
.rfi-group-dialog fieldset { max-height: 35dvh; overflow: auto; margin-bottom: 12px; }
.rfi-group-dialog fieldset label { display: block; padding: 5px; }

.project-settings-dialog { width: min(900px, 92vw); max-height: 85dvh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.project-members-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.project-members-table th, .project-members-table td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.project-member-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 16px; }
.project-member-form label { display: flex; flex-direction: column; gap: 6px; }
.project-member-form input, .project-member-form select { min-height: 34px; padding: 5px; border: 1px solid var(--line); border-radius: 5px; }
.project-settings-dialog details label { display: block; padding: 6px; }

#projectAdminSettings { margin: 16px 0; }
#projectAdminSettings .side-search select { width: 100%; min-width: 0; }

.auth-project-role-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.auth-project-manager .auth-tag { display: block; width: fit-content; margin-bottom: 8px; }
.auth-project-manager .btn { margin: 4px 0; }

/* 總覽：第一版為頁面骨架，所有摘要保留空狀態。 */
.overview-page { width: 100%; max-width: 1500px; margin: 0 auto; min-width: 0; }
.overview-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 4px 0 28px; }
.overview-eyebrow { color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: 2px; margin: 0 0 9px; }
.overview-heading h2 { font-size: 28px; letter-spacing: -.5px; margin: 0 0 9px; }
.overview-heading p:last-child { margin: 0; font-size: 13px; color: var(--fg-mute); line-height: 1.8; }
.overview-preview { flex: none; padding: 7px 12px; color: var(--fg-dim); background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; }
.overview-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.overview-metric { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.overview-metric > span { font-size: 12px; color: var(--fg-dim); }
.overview-metric strong { font: 600 30px var(--mono); color: var(--accent); }
.overview-metric strong.is-alert { color: #b91c1c; }
.overview-metric small { font-size: 11px; color: var(--fg-mute); }
.overview-grid { display: grid; grid-template-columns: minmax(260px,1fr) minmax(0,1.6fr); gap: 24px; }
.overview-panel { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; scroll-margin-top: 20px; }
.overview-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.overview-panel-head h3 { font-size: 17px; margin: 5px 0 0; }
.overview-section-tag { color: var(--accent); font-size: 10px; font-weight: 650; letter-spacing: 1px; }
.overview-panel-label { font-size: 10px; color: var(--fg-mute); border: 1px solid var(--line); border-radius: 5px; padding: 4px 7px; white-space: nowrap; }
.overview-empty { flex: 1; min-height: 235px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.overview-empty-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--accent); background: var(--accent-soft); border-radius: 12px; margin-bottom: 16px; }
.overview-empty-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.overview-empty h4, .overview-activity h4 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.overview-empty p, .overview-activity p { color: var(--fg-mute); font-size: 12px; line-height: 1.8; margin: 0; }
.overview-panel-foot { border-top: 1px solid var(--line); padding: 12px 20px; font-size: 10px; color: var(--fg-mute); background: #fbfcfe; }
.overview-table-wrap { flex: 1; overflow-x: auto; }
.overview-rfi-table { width: 100%; border-collapse: collapse; }
.overview-rfi-table th { padding: 12px 20px; color: var(--fg-mute); font-weight: 500; text-align: left; font-size: 11px; background: #fbfcfe; white-space: nowrap; }
.overview-rfi-table td { padding: 0; }
.overview-rfi-table .overview-empty { min-height: 196px; }
.overview-activity { grid-column: 1 / -1; }
.overview-nav-title { font-size: 15px; font-weight: 600; margin: 10px 0 22px; }
.overview-nav a { text-decoration: none; }
@media (max-width: 1150px) {
  .overview-grid { grid-template-columns: minmax(0,1fr); }
  .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .overview-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .overview-heading h2 { font-size: 23px; }
  .overview-metrics { gap: 10px; }
  .overview-metric { padding: 14px; }
}

.rfi-group-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.rfi-group-actions label { display: flex; align-items: center; gap: 8px; }

.activity-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; color: var(--fg-mute); font-size: 11px; }
.activity-scroll { max-height: 450px; overflow: auto; overscroll-behavior: contain; }
.activity-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.activity-table { width: 100%; min-width: 850px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 12px; }
.activity-table th { position: sticky; top: 0; z-index: 1; background: #f8faff; font-size: 11px; font-weight: 500; color: var(--fg-dim); padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.activity-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); }
.activity-table tbody tr:hover { background: #f8faff; }
.activity-resource { min-width: 230px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-kind { display: inline-block; font-size: 10px; margin-right: 8px; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 3px 5px; }
.activity-project { min-width: 100px; max-width: 160px; overflow-wrap: anywhere; }
.activity-revision, .activity-action, .activity-time { white-space: nowrap; }
.activity-revision { font-family: var(--mono); }
.activity-person { min-width: 70px; overflow-wrap: anywhere; }
.activity-badge { font-size: 11px; color: var(--fg-dim); background: var(--bg); padding: 4px 7px; border-radius: 5px; }
.activity-empty { height: 120px; text-align: center; color: var(--fg-mute); }

.activity-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 10px 14px; font-size: 12px; color: var(--muted); }

.library-path-title { min-width: 0; flex: 1 1 12rem; }
.library-path-title .folder-crumbs { font-size: inherit; }
.library-path-title .crumb { max-width: min(320px, 100%); }
.library-path-title button.crumb { font-weight: inherit; }
.library-path-title .crumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 系統標誌同時提供返回首頁與完整頁面重新載入。 */
.brand-mark { display: grid; width: 44px; height: 44px; background: transparent; box-shadow: none; text-decoration: none; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-mark:hover { background: var(--accent-soft); }
.brand-mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) { .brand-mark { width: 32px; height: 32px; } }

.document-rfi-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.document-rfi-overlay.is-drawing { pointer-events: all; cursor: crosshair; touch-action: none; }
.document-rfi-marker { pointer-events: all; cursor: pointer; }
.document-rfi-overlay.is-drawing .document-rfi-marker { pointer-events: none; }
.document-rfi-marker.is-selected circle, .document-rfi-marker:focus circle { stroke: #fbbf24; stroke-width: 4px; }
.document-rfi-status { position: absolute; bottom: 12px; left: 12px; z-index: 10; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 6px; background: #fff; color: var(--fg); box-shadow: var(--shadow); pointer-events: none; font-size: 12px; }

#overviewAnnouncements, #overviewRfis { grid-column: 1 / -1; }
.overview-rfi-scroll { max-height: 450px; overflow: auto; overscroll-behavior: contain; }
.overview-rfi-table { min-width: 1080px; table-layout: fixed; }
.overview-rfi-table th { position: sticky; top: 0; z-index: 1; }
.overview-rfi-table th:nth-child(1) { width: 22%; }
.overview-rfi-table th:nth-child(2) { width: 8%; }
.overview-rfi-table th:nth-child(3) { width: 28%; }
.overview-rfi-table th:nth-child(4), .overview-rfi-table th:nth-child(5) { width: 12%; }
.overview-rfi-table th:nth-child(6) { width: 8%; }
.overview-rfi-table th:nth-child(7) { width: 10%; }
.overview-rfi-number { font-variant-numeric: tabular-nums; }
.overview-rfi-table td { padding: 12px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-size: 12px; overflow-wrap: anywhere; }
.overview-rfi-table td small { display: block; color: var(--fg-mute); font-size: 10px; margin-top: 4px; }
.overview-rfi-file strong { font-weight: 600; }
.overview-rfi-text span { white-space: pre-wrap; }
.overview-rfi-table .overview-rfi-empty { text-align: center; padding: 40px 16px; color: var(--fg-mute); }
.overview-rfi-due { white-space: nowrap; }
.overview-rfi-table .is-overdue .overview-rfi-due { color: #b91c1c; }
.overview-rfi-table .is-overdue .overview-rfi-due small { color: inherit; }

.overview-rfi-file-link { display: inline; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.overview-rfi-file-link:hover { text-decoration: underline; }
.overview-rfi-file-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.overview-rfi-file-link:disabled { opacity: .6; cursor: wait; }

.rfi-discussion { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.rfi-discussion > summary { cursor: pointer; font-size: 12px; font-weight: 600; }
.rfi-discussion-list { list-style: none; margin: 8px 0; padding: 0; max-height: 260px; overflow: auto; }
.rfi-discussion-list > li { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.rfi-discussion-list > li > small { display: block; }
.rfi-discussion-list p { display: block; width: 100%; margin: 7px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.rfi-discussion-list small, .rfi-discussion-empty, .rfi-discussion-hint { color: var(--fg-mute); font-size: 11px; }
.rfi-discussion-form { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.rfi-discussion-form textarea { width: 100%; min-height: 64px; resize: vertical; }
.rfi-discussion-form button { align-self: flex-end; }

/* 景觀式登入頁：獨立於工作區的色彩與版面 */
.auth-overlay {
  overflow-y: auto; padding: clamp(16px, 5vw, 72px);
  background: #4b4f54 url('./dcms-login.png') center / cover no-repeat;
  isolation: isolate; backdrop-filter: none;
}
.auth-overlay::before { content: ''; position: fixed; inset: 0; background: rgba(30, 42, 54, .48); z-index: -1; }
.auth-login-layout {
  width: min(1120px, 100%); min-height: 680px; display: grid;
  grid-template-columns: 42% 58%; padding: 12px; background: #fff;
  border-radius: 38px; box-shadow: 0 30px 100px #071f2866;
}
.auth-login-layout .auth-card {
  width: 100%; min-width: 0; padding: 42px clamp(24px, 4vw, 60px);
  border: 0; border-radius: 28px; box-shadow: none; background: #fff; color: var(--fg);
  align-content: center; gap: 20px; animation: none;
}
.auth-login-layout .auth-brand-head { gap: 9px; margin-bottom: 18px; }
.auth-login-logo { width: 38px; height: 38px; object-fit: contain; }
.auth-login-wordmark { font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--accent); }
.auth-login-eyebrow { color: var(--fg); font-size: 12px; letter-spacing: 2px; }
.auth-login-layout .auth-card h2 { white-space: pre-line; font-size: clamp(28px, 3vw, 38px); line-height: 1.4; letter-spacing: -.8px; color: var(--fg); }
.auth-login-layout .auth-login-desc { color: var(--fg); margin-bottom: 8px; }
.auth-login-layout .auth-card label { color: var(--fg); font-size: 12px; gap: 8px; }
.auth-login-layout .auth-card input {
  width: 100%; box-sizing: border-box; padding: 14px 18px; border-radius: 24px;
  border: 1px solid transparent; background: #f3f5f7; color: var(--fg); font-size: 15px;
}
.auth-login-layout .auth-card input:focus { outline: 2px solid #0084d4; outline-offset: 2px; }
.auth-login-layout .auth-card .btn-primary { border: 0; border-radius: 28px; padding: 14px 24px; background: var(--accent); color: #fff; font-size: 15px; }
.auth-login-layout .auth-card .btn-primary:hover { background: var(--accent-hover); }
.auth-login-layout .auth-card .btn-primary:focus-visible { outline: 3px solid #0084d4; outline-offset: 3px; }
.auth-login-layout .auth-card .auth-error { color: #b42318; }
.auth-login-layout .auth-card .auth-error:empty { display: none; }
.auth-login-brand-text { min-width: 0; display: grid; gap: 2px; }
.auth-login-layout .auth-card .auth-login-subtitle { font-size: 10px; line-height: 1.5; color: var(--fg); overflow-wrap: anywhere; }
.auth-login-scene {
  position: relative; min-width: 0; overflow: hidden; border-radius: 28px;
  background: #4b4f54 url('./dcms-login.png') center / cover;
  display: flex; flex-direction: column; justify-content: space-between; padding: 32px; color: white;
}
.auth-login-scene::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #4b4f5422 40%, #172b3ecc); }
.auth-scene-tag, .auth-scene-copy { position: relative; }
.auth-scene-tag { align-self: flex-start; border: 1px solid #ffffff70; border-radius: 24px; padding: 10px 16px; font-size: 10px; letter-spacing: 2px; background: #ffffff12; backdrop-filter: blur(10px); }
.auth-scene-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 1.6; }
.auth-scene-copy p { margin: 12px 0 0; font-size: 13px; letter-spacing: 3px; color: #ffffff; }
@media (max-width: 760px) {
  .auth-overlay { padding: 16px; }
  .auth-login-layout { min-height: 0; max-width: 460px; grid-template-columns: 1fr; border-radius: 28px; padding: 8px; }
  .auth-login-layout .auth-card { padding: 28px 24px; gap: 16px; }
  .auth-login-layout .auth-brand-head { margin-bottom: 8px; }
  .auth-login-scene { display: none; }
}
@media (max-height: 740px) and (min-width: 761px) {
  .auth-overlay { padding: 20px; }
  .auth-login-layout { min-height: 580px; }
  .auth-login-layout .auth-card { padding-top: 24px; padding-bottom: 24px; gap: 14px; }
}

@font-face {
  font-family: 'Source Han Sans TW';
  src: url('./fonts/SourceHanSansTW-VF.woff2') format('woff2');
  font-weight: 250 900;
  font-style: normal;
  font-display: swap;
}
.auth-overlay { font-family: var(--font-ui); }
.auth-overlay input, .auth-overlay button { font-family: inherit; }

/* 原生表單元件也沿用全站字型，不使用瀏覽器預設字型。 */
button, input, select, textarea { font-family: inherit; }
.usage-scroll { overflow: auto; max-height: 420px; margin-bottom: 16px; }
.usage-scroll .activity-table { width: 100%; min-width: 560px; }
.usage-summary { font-weight: 600; }

.share-revision-warning { margin: 6px 0 0; padding: 8px 12px; border: 1px solid #e2b25d; border-radius: 6px; background: #fff4da; color: #775015; font-size: 13px; overflow-wrap: anywhere; }
.share-bar > div { min-width: 0; overflow-wrap: anywhere; }

.fr-share-status { color: var(--fg-mute); font-size: 12px; }
.fr-share-status.is-shared { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #eef0f2; color: var(--accent); font-weight: 600; }

.meta-dialog.share-dialog { box-sizing: border-box; width: min(800px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px; border-radius: 16px; }
.meta-dialog.share-dialog form { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.share-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-dialog-eyebrow { color: var(--fg-mute); font-size: 11px; letter-spacing: .06em; }
.meta-dialog.share-dialog h3 { font-size: 22px; margin: 5px 0 0; }
.share-state-badge { flex: none; padding: 5px 10px; border-radius: 20px; color: var(--fg-mute); background: #f0f2f4; font-size: 12px; }
.share-state-badge.is-active { color: #006daF; background: #eaf5fc; }
.share-file-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #f5f8fa; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.share-file-icon { display: grid; place-items: center; flex: none; width: 36px; height: 40px; border-radius: 8px; background: #e5f2fc; color: var(--accent); font-size: 22px; }
.share-file-card > div { min-width: 0; }
.share-file-name { margin: 0 0 5px; font-weight: 600; overflow-wrap: anywhere; font-size: 14px; }
.share-file-revision { color: var(--fg-mute); font-size: 12px; }
.share-dialog .side-help { margin: -6px 0 0; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.share-content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.share-content-grid.has-qr { grid-template-columns: minmax(0, 1fr) 220px; }
.share-link-panel { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.meta-dialog.share-dialog .share-url-row { gap: 8px; min-width: 0; }
.share-url-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.share-url-control > input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; }
.share-url-control > button { flex: none; }
.share-qr-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.share-qr-panel[hidden] { display: none; }
.share-qr-title { font-size: 12px; color: var(--fg-mute); }
.share-qr-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.share-field-hint { margin: 0; font-size: 12px; line-height: 1.7; color: var(--fg-mute); }
.share-dialog-status { margin: 0; padding: 10px 12px; border-radius: 8px; background: #f5f8fa; color: var(--fg-mute); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.share-dialog-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.share-dialog-footer .meta-actions { margin: 0; flex-wrap: wrap; }
.share-revoke:not(:disabled) { color: #b42318; border-color: #ecd1cd; }
@media (max-width: 600px) {
  .meta-dialog.share-dialog { padding: 18px; }
  .share-content-grid.has-qr { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .share-qr-panel { padding: 12px; }
}

.print-verification { display: none; }
@page { margin: 10mm; }
@media print {
  body.is-viewer-print { display: block; }
  body.is-viewer-print .print-verification {
    display: flex; flex-direction: column; align-items: center; gap: 1mm; position: fixed; bottom: 0; right: 0;
    width: 38mm; height: auto; padding: 0; z-index: 10001; background: transparent; color: #000;
    font-size: 6.5pt; line-height: 1.35; text-align: center; pointer-events: none;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .print-verification img { width: 32mm; height: 32mm; flex: none; image-rendering: pixelated; }
  .print-verification > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; text-shadow: 0 0 2px #fff; }
  .print-verification p { margin: .5mm 0 0; }
  body.is-viewer-print .pdf-page, body.is-viewer-print .img-page { break-inside: avoid; box-shadow: none; max-width: 100%; }
}
.print-check-body { margin: 0; min-height: 100dvh; background: var(--bg-soft); padding: 32px 16px; box-sizing: border-box; }
.print-check-card { box-sizing: border-box; max-width: 620px; margin: 0 auto; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.print-check-card h1 { font-size: 24px; }
.print-check-card h2 { font-size: 17px; overflow-wrap: anywhere; }
.verification-status { padding: 14px; border-radius: 8px; background: var(--bg-soft); line-height: 1.6; }
.verification-status[data-level="ok"] { background: #e5f4ec; color: #17613e; }
.verification-status[data-level="warn"] { background: #fff4da; color: #775015; }
.print-check-card dl > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.print-check-card dt { color: var(--fg-mute); }
.print-check-card dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .print-check-card { padding: 20px; } }

@media print {
  body.is-viewer-print #pdfView:not([hidden]), body.is-viewer-print #imageView:not([hidden]) { padding: 0 !important; }
  body.is-viewer-print .pdf-page, body.is-viewer-print .img-page {
    position: relative !important; width: min(100%, calc(277mm * var(--print-page-ratio, .707))) !important;
    height: auto !important; aspect-ratio: var(--print-page-ratio, .707); margin: 0 auto !important;
    break-after: page;
  }
  body.is-viewer-print .pdf-page:last-child, body.is-viewer-print .img-page:last-child { break-after: auto; }
  body.is-viewer-print .pdf-page canvas, body.is-viewer-print .img-page canvas, body.is-viewer-print .img-page img {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
}

.share-layout[hidden], .share-password-form[hidden], .share-access-details[hidden] { display: none; }
.share-access-details { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.share-password-row { display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.share-password-row label { flex: 0 1 140px; min-width: 0; }
.share-password-row > button { flex: none; margin-bottom: 1px; }
.share-access-details input { min-width: 0; width: 100%; letter-spacing: .25em; font-size: 20px; max-width: 100%; box-sizing: border-box; }
.share-qr { width: 200px; height: 200px; max-width: 100%; object-fit: contain; background: white; }
.share-password-form { align-self: start; box-sizing: border-box; width: min(420px, calc(100% - 32px)); margin: 56px auto; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 30px #4b4f5408; }
.share-password-lock { display: grid; place-items: center; width: 42px; height: 42px; color: var(--accent); background: #eaf5fc; border-radius: 12px; font-size: 24px; }
.share-password-form h2 { margin: 0; font-size: 20px; }
#sharePasswordHint { margin: 0; color: var(--fg-mute); font-size: 13px; line-height: 1.8; text-align: center; }
.share-password-digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 320px; margin-top: 6px; }
.share-password-form .share-password-digit { min-width: 0; width: 100%; height: 52px; box-sizing: border-box; padding: 4px; text-align: center; font: inherit; font-size: 24px; font-weight: 600; border: 1px solid #cbd3db; border-radius: 9px; background: #fafcfd; color: var(--fg); caret-color: var(--accent); }
.share-password-digit:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); background: #fff; }
.share-password-digit[aria-invalid="true"] { border-color: #b42318; }
.share-password-form > button { align-self: center; padding: 8px 22px; min-width: 112px; font-size: 13px; }
#sharePasswordError { margin: 0; min-height: 18px; color: #b42318; font-size: 12px; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 420px) { .share-password-form { padding: 24px 18px; margin: 32px auto; } .share-password-digits { gap: 6px; } .share-password-form .share-password-digit { height: 46px; font-size: 22px; } }

@media (max-width: 600px) { .share-bar { flex-direction: column; align-items: flex-start; gap: 8px; } .share-bar > div { width: 100%; } .share-bar > .share-note { margin: 0; } }