:root {
  /* DiXYZ brand (web/brand/logo.svg): cyan-to-violet gradient for "Di", charcoal for "XYZ".
     The gradient is for brand accents only (title strip, File tab, sign-in mark); controls use
     the solid tokens below, which keep text at WCAG AA contrast in both themes. */
  --brand-cyan: #22d3ee;
  --brand-violet: #7c3aed;
  --brand-charcoal: #1e293b;
  --brand-gradient: linear-gradient(90deg, #22d3ee, #7c3aed);
  --brand-gradient-deep: linear-gradient(135deg, #0e7490, #6d28d9); /* white text on it stays >= 4.5:1 */
  --title: #1e293b;
  --title-text: #f1f5f9;
  --tabs: #f1f5f9;
  --ribbon: #f8fafc;
  --panel: #ffffff;
  --line: #d5dce5;
  --line-soft: #e8ecf2;
  --text: #1e293b;
  --muted: #5b6779;
  --accent: #7c3aed;          /* text, icons, borders on panels */
  --accent-fill: #7c3aed;     /* solid fills under --on-accent text */
  --accent-fill-hover: #6d28d9;
  --on-accent: #ffffff;
  --accent-soft: #eee9fd;     /* selected rows, active buttons */
  --accent-2: #0891b2;        /* brand cyan, dark enough for lines on white */
  --hover: #f2effb;
  --stage-plan: #ffffff;
  --stage-3d: linear-gradient(#f8fafc, #dbe2eb);
  --temp: #0891b2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --title: #0b1120;
    --title-text: #e2e8f0;
    --tabs: #172033;
    --ribbon: #1b253a;
    --panel: #131b2c;
    --line: #2f3b52;
    --line-soft: #222d42;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --accent: #a78bfa;
    --accent-fill: #7c3aed;
    --accent-fill-hover: #8b5cf6;
    --on-accent: #ffffff;
    --accent-soft: #2b2552;
    --accent-2: #22d3ee;
    --hover: #222c44;
    --stage-plan: #ffffff;
    --stage-3d: linear-gradient(#2a3448, #111827);
    --temp: #22d3ee;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: grid; grid-template-rows: 32px 28px auto auto 1fr 24px; height: 100%; overflow: hidden;
  font: 12px/1.35 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text); background: var(--panel);
}
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.grow { flex: 1; }

/* title bar + quick access */
.titlebar { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--title); color: var(--title-text); }
.titlebar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-gradient); pointer-events: none; }
.logo { width: auto; height: 26px; display: block; flex: none; margin-right: 4px; }
.qat { display: flex; gap: 2px; }
.qbtn { background: none; border: 0; padding: 3px 5px; border-radius: 4px; cursor: pointer; color: var(--title-text); }
.qbtn svg { width: 16px; height: 16px; }
.qbtn:hover { background: rgba(255,255,255,.12); }
.qbtn:disabled { opacity: .35; cursor: default; }
.doc-title { flex: 1; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qlink { color: var(--title-text); text-decoration: none; opacity: .8; }
.qlink:hover { opacity: 1; text-decoration: underline; }

/* ribbon */
.ribbon-tabs { display: flex; gap: 2px; background: var(--tabs); border-bottom: 1px solid var(--line); padding: 0 6px; }
.rtab { border: 0; background: none; padding: 0 14px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); }
.rtab:hover { color: var(--text); }
.rtab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; background: var(--ribbon); }
.rtab.file { background: var(--brand-gradient-deep); color: var(--on-accent); font-weight: 600; border-radius: 3px 3px 0 0; margin: 3px 6px 0 0; }
.ribbon { display: flex; background: var(--ribbon); border-bottom: 1px solid var(--line); height: 98px; flex: none; overflow-x: auto; }
.rgroup { display: flex; }
.rgroup[hidden] { display: none; }
/* What only the full modeller has (edition.js). */
body.edition-editor [data-full] { display: none !important; }
.rpanel { display: flex; flex-direction: column; border-right: 1px solid var(--line-soft); padding: 4px 4px 0; }
.rbtns { display: flex; gap: 2px; flex: 1; }
.rbtn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; border: 1px solid transparent;
  background: none; padding: 4px 6px; min-width: 54px; border-radius: 4px; cursor: pointer; line-height: 1.15; text-align: center; }
.rbtn svg { width: 28px; height: 28px; color: var(--accent); }
.rbtn:hover { background: var(--hover); border-color: var(--line); }
.rbtn.active { background: var(--accent-soft); border-color: var(--accent); }
.rbtn:disabled { opacity: .4; cursor: default; }
.rpanel-title { text-align: center; color: var(--muted); font-size: 11px; padding: 2px 0 3px; border-top: 1px solid var(--line-soft); margin-top: 3px; }

/* options bar */
.options-bar { display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 3px 10px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.options-bar .ctx { font-weight: 600; color: var(--accent); }
.options-bar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.options-bar input[type=number], .options-bar select { width: 86px; }
input, select { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; }
input:focus, select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.btn { border: 1px solid var(--line); background: var(--panel); padding: 3px 10px; border-radius: 3px; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--hover); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: 1px 8px; }
.btn.small.on { background: var(--accent-soft); border-color: var(--accent); }
.options-bar .ctx-sub { color: var(--muted); }
.options-bar .sel-head { display: inline-flex; align-items: center; line-height: 1; gap: 8px; min-width: 0; }
.options-bar .sel-class { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .01em; }
.options-bar .sel-count { color: var(--muted); font-size: 12px; }
.options-bar .sel-count::before { content: "\00b7"; margin-right: 8px; }
.options-bar .sel-mix { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.options-bar .sel-mix::before { content: "\00b7"; margin-right: 8px; font-family: inherit; }
.options-bar > .btn.small, .sel-tools .btn.small { height: 26px; padding: 0 10px; border-radius: 4px; }
.sel-tools { display: inline-flex; align-items: center; gap: 4px; padding-left: 12px; border-left: 1px solid var(--line-soft); }
.sel-tools .btn.icon { gap: 6px; color: var(--text); }
.sel-tools .btn.icon svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.sel-tools .btn:hover:not(:disabled) { border-color: var(--accent); }
.sel-tools .btn.danger svg { color: var(--danger, #d23c3c); }
.sel-tools .btn.danger:hover:not(:disabled) { border-color: var(--danger, #d23c3c); background: color-mix(in srgb, var(--danger, #d23c3c) 10%, var(--panel)); }
.sel-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn.primary:hover:not(:disabled) { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
:where(button, .btn, .rbtn, .rtab, .dock-tab, .qbtn):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn.icon { display: inline-flex; align-items: center; gap: 4px; }
.btn.icon svg { width: 16px; height: 16px; }
.btn.finish svg { color: #1e9e48; }
.btn.cancel svg { color: #d23c3c; }

/* docked panels: Properties and Views tabbed on the left, IFC Model Tree on the right */
main { --left-w: 290px; --right-w: 280px; display: grid; grid-template-columns: var(--left-w) 4px minmax(0, 1fr) 4px var(--right-w); min-height: 0; }
.dock { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); }
.dock.left { border-right: 1px solid var(--line); }
.dock.right { border-left: 1px solid var(--line); }
.splitter { cursor: col-resize; background: var(--tabs); }
.splitter:hover, .splitter.dragging { background: var(--accent-soft); }
.pane-title { padding: 5px 8px; font-weight: 600; background: var(--tabs); border-bottom: 1px solid var(--line); }
.dock-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.dock-pane[hidden] { display: none; }
.dock-tabs { display: flex; flex: none; gap: 1px; background: var(--tabs); border-top: 1px solid var(--line); padding: 0 4px; }
.dock-tab { border: 1px solid transparent; border-top: 0; background: none; padding: 4px 8px; min-width: 0; cursor: pointer; color: var(--muted); border-radius: 0 0 4px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-tab:hover { color: var(--text); background: var(--hover); }
.dock-tab.active { color: var(--text); background: var(--panel); border-color: var(--line); font-weight: 600; margin-top: -1px; box-shadow: inset 0 2px 0 var(--accent); }

/* properties palette */
.type-selector { display: flex; gap: 8px; align-items: center; padding: 8px; border-bottom: 1px solid var(--line); }
.ts-swatch { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 3px; display: grid; place-items: center; color: var(--accent); flex: none; }
.ts-swatch svg { width: 30px; height: 30px; }
.ts-text { flex: 1; min-width: 0; }
.ts-family { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-select { width: 100%; margin-top: 3px; }
.pal-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.pal-filter { color: var(--muted); }
.pal-body { overflow: auto; flex: 1; }
.pgroup { background: var(--tabs); font-weight: 600; padding: 3px 8px; border-bottom: 1px solid var(--line-soft); }
/* App Attributes / IFC Attributes: the two sections of Properties; the groups above sit under them */
.pgroup.psection { background: var(--panel); color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 8px 4px; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line); }
.pgroup.psection:first-child { border-top: 0; }
/* Sections open and close on a click: a chevron before the name */
.pgroup.psection.collapsible { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
/* A chevron before the name, centred on the text line: down when open, right when closed */
.pgroup.psection.collapsible::before {
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: ''; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
  transition: transform .12s;
}
.pgroup.psection.collapsible.closed::before { transform: rotate(-90deg); }
.pgroup.psection.collapsible:hover { background: var(--tabs); }
.pal-body > .sec-closed { display: none; }
.prow { display: grid; grid-template-columns: 48% 52%; border-bottom: 1px solid var(--line-soft); }
.prow[hidden] { display: none; }
.prow > * { padding: 3px 8px; min-width: 0; }
.prow .pname { color: var(--muted); border-right: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow input, .prow select { width: 100%; border-color: transparent; background: transparent; padding: 0 2px; }
.prow input:hover, .prow select:hover { border-color: var(--line); }
.prow .ro { color: var(--muted); }

/* project browser */
.tree { overflow: auto; flex: 1; padding: 4px 0; user-select: none; }
.tnode > summary, .tleaf { list-style: none; display: flex; align-items: center; gap: 4px; padding: 1px 6px; cursor: default; white-space: nowrap; }
.tnode > summary::-webkit-details-marker { display: none; }
.tnode > summary::before { content: "⊞"; color: var(--muted); width: 12px; flex: none; font-size: 11px; }
.tnode[open] > summary::before { content: "⊟"; }
.tleaf::before { content: ""; width: 12px; flex: none; }
.tnode .tnode, .tnode .tleaf { margin-left: 14px; }
.tnode > summary:hover, .tleaf:hover { background: var(--hover); }
.tleaf.active { font-weight: 700; }
.tleaf.current { background: var(--accent-soft); }

/* views */
.views { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.view-tabs { display: flex; gap: 1px; background: var(--tabs); border-bottom: 1px solid var(--line); min-height: 27px; padding: 2px 4px 0; }
.vtab { display: flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line); border-bottom: 0; background: var(--tabs); border-radius: 3px 3px 0 0; cursor: pointer; color: var(--muted); }
.vtab.active { background: var(--panel); color: var(--text); font-weight: 600; }
.vtab svg { width: 14px; height: 14px; }
.vtab .x { opacity: .5; padding: 0 2px; }
.vtab .x:hover { opacity: 1; }
.canvas-wrap { position: relative; flex: 1; min-height: 0; background: var(--stage-3d); }
.canvas-wrap.plan { background: var(--stage-plan); }
.canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.canvas-wrap .overlay { pointer-events: none; }
.canvas-wrap.drawing canvas#canvas { cursor: crosshair; }
.nav-btns { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.view-bar { display: flex; align-items: center; gap: 8px; padding: 2px 8px; border-top: 1px solid var(--line); background: var(--tabs); color: var(--muted); }
.view-bar .sep { width: 1px; height: 14px; background: var(--line); }
.busy { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); }
.busy[hidden] { display: none; }
.busy-text:not(:empty) { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ref-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ref-status #ref-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-status select { font: inherit; font-size: 11px; padding: 0 2px; }
.ref-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.snap-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 1px 8px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px; }
.snap-btn svg { width: 12px; height: 12px; color: var(--temp); }
.snap-btn:hover { background: var(--hover); }
.snap-btn.off { color: var(--muted); }
.snap-btn.off svg { color: var(--muted); }
.snap-btn.override { border-color: var(--temp); background: var(--accent-soft); }
.snap-menu { position: fixed; z-index: 50; width: 270px; padding: 6px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); box-shadow: 0 8px 28px rgba(0,0,0,.22); font-size: 12px; }
.snap-menu[hidden] { display: none; }
.snap-row { display: flex; align-items: center; gap: 8px; padding: 3px 12px; cursor: pointer; }
.snap-row:hover { background: var(--hover); }
.snap-row span { flex: 1; }
.snap-row kbd { font: 11px ui-monospace, monospace; color: var(--muted); }
.snap-master { font-weight: 600; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; margin-bottom: 3px; }
.snap-glyph { width: 18px; height: 18px; }
.snap-actions { display: flex; gap: 6px; padding: 6px 12px 2px; border-top: 1px solid var(--line-soft); margin-top: 3px; }
.snap-help { margin: 6px 12px 2px; line-height: 1.35; white-space: normal; }
.statusbar { display: flex; align-items: center; gap: 16px; padding: 0 10px; background: var(--tabs); border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }

/* dialogs */
.dialog { border: 1px solid var(--line); border-radius: 6px; padding: 0; width: min(520px, 94vw); color: var(--text); background: var(--panel); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.dialog.small { width: min(340px, 94vw); }
.dialog.small:has(.vs-report) { width: min(560px, 94vw); }
.vs-report { display: grid; gap: 8px; }
.vs-report .pd-message { max-width: none; margin: 0; }
.vs-report .ptable td:first-child { width: auto; }
.dialog.small:has(.cp-panel) { width: min(640px, 94vw); }
.cp-panel { display: grid; gap: 8px; }
.cp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-total { color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-filter { width: 100%; }
.cp-list { max-height: min(46vh, 420px); overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
.cp-set { border-bottom: 1px solid var(--line-soft); }
.cp-set:last-child { border-bottom: 0; }
.cp-set > summary { display: grid; grid-template-columns: auto minmax(0, 10fr) minmax(0, 12fr) 21ch; align-items: center; gap: 8px; padding: 5px 8px; cursor: pointer; list-style: none; }
.cp-set > summary::-webkit-details-marker { display: none; }
.cp-set > summary:hover { background: var(--tabs); }
.cp-set.none { opacity: .6; }
.cp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-applies { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-count { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.cp-detail { padding: 2px 8px 8px 32px; display: grid; gap: 4px; font-size: 12px; line-height: 1.45; }
.cp-notes summary { cursor: pointer; color: #b45309; }
.cp-notes ul { margin: 4px 0 0; padding-left: 20px; font-size: 12px; }
.cp-hint { margin: 0; font-size: 12px; }
/* plan limits (hosted service) */
.plan-banner { position: absolute; z-index: 5; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(720px, 92%); padding: 6px 10px; border: 1px solid #e0b252; border-radius: 4px; background: #fff7e0; color: #5a4100; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.plan-banner[hidden] { display: none; }
.plan-locked .rgroup [data-tool]:not([data-tool="select"]) { opacity: .4; }
.plan-table td:first-child { width: auto; color: var(--text); }
.plan-table tr.current td { background: var(--accent-soft); }
.plan-message { max-width: none; color: var(--text); }
.plan-interval { display: flex; gap: 16px; }
.plan-action { text-align: right; white-space: nowrap; }
.plan-price { white-space: nowrap; }
.plan-table .plan-seats { width: 56px; margin-left: 4px; }
.plan-seats-label { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* accounts and cloud projects (cloud.js) */
.account-btn { margin-left: auto; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--title-text); padding: 2px 10px; border-radius: 12px; cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-btn:hover { background: rgba(255,255,255,.12); }
.account-btn + .qlink { margin-left: 4px; }
.cloud-form { display: grid; gap: 10px; }
.cloud-form input { width: 100%; }
.cloud-actions { display: flex; justify-content: flex-end; }
.cloud-oauth { display: grid; gap: 6px; }
.cloud-oauth .btn { text-align: center; text-decoration: none; color: var(--text); padding: 5px 10px; }
.cloud-switch { color: var(--muted); font-size: 12px; }
.cloud-error { margin: 0; color: #c62828; }
.cloud-list { max-height: 60vh; overflow: auto; }
.cloud-table td:first-child { width: auto; }
.cloud-table tr.current td { background: var(--accent-soft); }
.cloud-storage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.cloud-provider { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.cloud-provider h4 { margin: 8px 0 0; }
.cloud-picker { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.cloud-picker .cloud-list { max-height: 40vh; margin: 6px 0; }
.cloud-picker .cloud-list a { display: block; padding: 4px 0; }
.cloud-crumbs { margin: 6px 0; }
.cloud-search { width: 100%; margin: 4px 0; }
.cloud-row-actions { white-space: nowrap; text-align: right; }
.cloud-row-actions .btn + .btn { margin-left: 4px; }
.dialog::backdrop { background: rgba(10, 20, 30, .25); }
.dlg-title { padding: 8px 12px; font-weight: 600; background: var(--tabs); border-bottom: 1px solid var(--line); }
.dlg-body { padding: 12px; display: grid; gap: 10px; }
.dlg-row { display: flex; align-items: center; gap: 8px; }
.dlg-row label { width: 56px; color: var(--muted); }
.dlg-row select { flex: 1; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.ptable { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
.ptable th { text-align: left; background: var(--tabs); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.ptable td { padding: 3px 8px; border-bottom: 1px solid var(--line-soft); }
.ptable td:first-child { width: 50%; color: var(--muted); border-right: 1px solid var(--line-soft); }
.ptable input { width: 100%; }
.ptable .grp td { background: var(--tabs); font-weight: 600; color: var(--text); }
.dialog.wide { width: min(820px, 96vw); }
.td-diagram { position: sticky; top: 0; display: grid; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.td-view { width: 100%; height: auto; display: block; border: 1px solid var(--line-soft); border-radius: 3px; background: var(--panel); color: var(--text); font-size: 10px; }
.td-view .td-title { fill: var(--muted); font-weight: 600; }
.td-view path, .td-view circle { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.td-view .conc { fill: rgba(150, 150, 140, .28); }
.td-view .conc-ghost { fill: rgba(150, 150, 140, .14); stroke-dasharray: 5 3; }
.td-view .wall { fill: rgba(150, 150, 140, .28); }
.td-view .steel { fill: rgba(80, 120, 170, .30); }
.td-view .steel-ghost { fill: rgba(80, 120, 170, .10); stroke-dasharray: 3 2; }
.td-view .void { fill: var(--panel); }
.td-view .fill { fill: rgba(214, 190, 120, .55); }
.td-view .rock { fill: rgba(120, 115, 105, .45); }
.td-view .rubble { fill: rgba(120, 110, 95, .28); stroke-dasharray: 2 2; }
.td-view .sheet { stroke: #b0643a; stroke-width: 2.4; }
.td-view .sheet-fill { fill: rgba(176, 100, 58, .55); stroke: #b0643a; }
.td-view .rubber { fill: rgba(30, 30, 34, .55); }
.td-view .panel { fill: rgba(242, 189, 26, .55); }
.td-view .frame { fill: rgba(180, 180, 180, .35); }
.td-view .glass { fill: rgba(120, 180, 230, .30); }
.td-view .glassline { stroke: #4a90d0; stroke-width: 2; }
.td-view .leaf { fill: rgba(158, 117, 82, .45); }
.td-view .rung { stroke-width: 2; }
.td-view .hidden { stroke-dasharray: 4 3; stroke: var(--muted); }
.td-view .cl { stroke: var(--muted); stroke-dasharray: 10 3 2 3; }
.td-view .level { stroke: var(--muted); stroke-width: 1.5; }
.td-view .thin { stroke: var(--muted); }
.td-view .brk { stroke: var(--muted); fill: none; }
.td-mark { cursor: pointer; color: var(--muted); }
.td-mark path { stroke: currentColor; }
.td-mark text { fill: var(--text); stroke: var(--panel); stroke-width: 3px; paint-order: stroke; }
.td-mark .dot { fill: currentColor; stroke: none; }
.td-mark.derived text { font-style: italic; }
.td-mark:hover { color: var(--text); }
.td-mark.info { cursor: default; }
.td-mark.hl { color: var(--accent); }
.td-mark.hl path { stroke-width: 2; }
.td-mark.hl text { fill: var(--accent); font-weight: 700; }
.pset-head { display: flex; align-items: center; gap: 8px; }
.pset-head > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pset-tag { font-size: 10px; font-weight: 600; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 0 6px; }
.pset-tag.qto { color: #1e8f4a; border-color: #1e8f4a; }
.pset-add { padding: 6px 8px !important; color: var(--text) !important; }
.ptable select { width: 100%; }
.unit-input { display: flex; align-items: center; gap: 6px; }
.unit-input input { flex: 1; min-width: 0; }
.dlg-row input#bs-class { flex: 1; }
.dlg-row label[for="bs-class"] { width: auto; }
.bs-source { min-height: 16px; }
#bs-filter { width: 100%; }
.bs-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; height: min(52vh, 420px); }
.bs-sets, .bs-props { border: 1px solid var(--line); border-radius: 3px; overflow: auto; }
.bs-set { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.bs-set:hover { background: var(--hover); }
.bs-set.active { background: var(--accent-soft); }
.bs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-props-head { padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--tabs); position: sticky; top: 0; }
.bs-prop { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 6px; padding: 3px 8px; border-bottom: 1px solid var(--line-soft); }
.bs-prop > .muted { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-empty { padding: 10px; }
.bs-count { margin-right: auto; align-self: center; }
@media (max-width: 600px) { .bs-panes { grid-template-columns: 1fr; height: auto; } .bs-sets, .bs-props { max-height: 30vh; } }
.field { display: grid; gap: 4px; }
.field input { width: 100%; }

.toast { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%); background: var(--brand-charcoal); color: #fff; padding: 7px 14px; border-radius: 5px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 80vw; }
.toast.error { background: #b3302f; }

@media (max-width: 860px) {
  main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 220px; }
  main > .views { grid-row: 1; grid-column: 1 / -1; }
  .dock { grid-row: 2; border-top: 1px solid var(--line); }
  .dock.left { grid-column: 1; }
  .dock.right { grid-column: 2; }
  .splitter { display: none; }
  .qlink { display: none; }
}

/* IFC spatial tree */
.ifcrow { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; padding: 0 2px; border-radius: 2px; }
.ifcrow.selected { background: var(--accent-soft); }
.ifccls { font-size: 10px; color: var(--muted); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.ifcname { overflow: hidden; text-overflow: ellipsis; }
.tadd { margin-left: auto; visibility: hidden; border: 1px solid var(--line); background: var(--panel); color: var(--accent); border-radius: 3px; width: 18px; height: 16px; line-height: 12px; padding: 0; font-weight: 700; cursor: pointer; }
.tnode > summary:hover .tadd { visibility: visible; }
.tadd:hover { background: var(--accent-fill); color: var(--on-accent); }
.ctxmenu { position: fixed; z-index: 50; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 3px 0; min-width: 150px; display: flex; flex-direction: column; }
.ctxmenu button { border: 0; background: none; text-align: left; padding: 5px 14px; font: inherit; color: var(--text); cursor: default; }
.ctxmenu button:hover { background: var(--accent-soft); }
.pd-message { margin: 0 0 8px; color: var(--muted); max-width: 340px; }
.tnode > summary, .tleaf { min-width: 0; }
.ifcrow[draggable="true"], .tleaf[draggable="true"] { cursor: grab; }
.drop-ok { outline: 2px dashed var(--accent); outline-offset: -1px; background: var(--accent-soft); }

/* drafting: section views and sheets */
.canvas-wrap .draft { position: absolute; inset: 0; width: 100%; height: 100%; display: none; background: #fff; touch-action: none; fill: initial; stroke: initial; stroke-width: initial; }
.canvas-wrap.draft .draft { display: block; }
.canvas-wrap.draft canvas, .canvas-wrap.draft .nav-btns [data-nav=iso], .canvas-wrap.draft .nav-btns [data-nav=top] { display: none; }
.canvas-wrap.sheet .draft { background: #8e959e; }
.draft .paper-shadow { fill: rgba(0,0,0,.28); }
.draft .crop { fill: none; stroke: #6c7682; stroke-width: .25; stroke-dasharray: 2 1.5; }
.draft .vp-box { fill: transparent; stroke: none; cursor: move; }
.draft .viewport:hover .vp-box { stroke: #7c3aed; stroke-width: .3; stroke-dasharray: 2 1.5; }
.draft .viewport.sel .vp-box { stroke: #7c3aed; stroke-width: .5; stroke-dasharray: none; }
.draft .vp-title.sel text { fill: #7c3aed; }
.draft .drawing .sel { stroke: #7c3aed; }
.draft .cut path.sel { fill: #c4b5fd; }
.draft text.sel { fill: #7c3aed; }
.draft .drawing .hover { stroke: #a78bfa; }
.draft .cut path.hover { fill: #ede9fe; }
.draft text.hover { fill: #a78bfa; }
.draft .ghost { fill: rgba(8,145,178,.08); stroke: #0891b2; stroke-width: .4; stroke-dasharray: 2 1.5; pointer-events: none; }
.tleaf > svg, .ifcrow > svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.tleaf .onsheet { margin-left: auto; font-size: 10px; padding-left: 8px; }
.ifcrow.active { font-weight: 700; }
.pal-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }

/* ViewCube (3D views): top right, the navigation buttons move below it */
.viewcube { position: absolute; right: 6px; top: 6px; width: 120px; height: 120px; user-select: none;
  --vc-face: #f1f5f9; --vc-edge: #8693a6; --vc-text: #334155; --vc-hover: #c4b5fd; --vc-ring: rgba(120,130,140,.5); --vc-bg: #ffffff; --vc-north: #c0392b; }
.viewcube[hidden] { display: none; }
.viewcube canvas { position: static; width: 120px; height: 120px; }
.viewcube-home { position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; }
.viewcube-home:hover { border-color: var(--line); background: var(--panel); color: var(--accent); }
.canvas-wrap:not(.plan):not(.draft) .nav-btns { top: 132px; }
@media (prefers-color-scheme: dark) {
  .viewcube { --vc-face: #cfd8e3; --vc-edge: #64748b; --vc-text: #1e293b; --vc-hover: #a78bfa; --vc-ring: rgba(170,180,190,.45); --vc-bg: #1b253a; --vc-north: #ff7b6b; }
}
.draft .dim-preview line, .draft .dim-preview path { stroke: #0891b2; }
.draft .dim-preview text { fill: #0891b2; }
.canvas-wrap.drawing .draft { cursor: crosshair; }

/* Label Formats dialog */
.lf-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; }
.lf-side { display: grid; gap: 8px; align-content: start; }
.lf-side select[size] { width: 100%; min-height: 180px; }
.lf-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.lf-edit { display: grid; gap: 8px; align-content: start; min-width: 0; }
.lf-edit textarea { width: 100%; font: 12px/1.4 ui-monospace, Consolas, monospace; resize: vertical; }
.lf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lf-row select { flex: 1; min-width: 160px; }
.lf-row input[type="number"] { width: 56px; }
.lf-help { font-size: 11px; line-height: 1.6; }
.lf-help code { background: var(--tabs); padding: 0 3px; border-radius: 2px; }
.lf-preview { margin: 0; min-height: 3.4em; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: #111; font: 13px/1.35 "Segoe UI", Arial, sans-serif; white-space: pre-wrap; }
.lf-preview.error { color: #b3261e; }
.label-text { white-space: pre-wrap; }
@media (max-width: 600px) { .lf-body { grid-template-columns: 1fr; } }

/* Georeference dialog */
.geo-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; }
.geo-side { display: grid; gap: 6px; align-content: start; }
.geo-side select[size] { width: 100%; min-height: 300px; }
.geo-count { font-size: 11px; }
.geo-check { display: flex; align-items: center; gap: 6px; }
.geo-edit { display: grid; gap: 8px; align-content: start; min-width: 0; }
.geo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.geo-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.geo-grid .ro { padding: 3px 0; font-variant-numeric: tabular-nums; }
.geo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.geo-edit.off .geo-grid, .geo-edit.off .geo-actions { opacity: .45; pointer-events: none; }
@media (max-width: 640px) { .geo-body { grid-template-columns: 1fr; } .geo-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hide, show and isolate in the IFC tree: an eye per row, the mixed eye for partly hidden branches. */
.tree-tools { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.tree-tools .btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 2px 5px; white-space: nowrap; }
.tree-tools svg { width: 16px; height: 16px; flex: none; }
#ghost-hidden { margin-left: auto; }
.teye { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 16px; padding: 0; border: 0; background: none; color: var(--muted); opacity: .45; cursor: pointer; }
.tadd + .teye { margin-left: 2px; }
.teye svg { width: 15px; height: 15px; }
.teye:hover { opacity: 1; color: var(--accent); }
.teye.hidden, .teye.mixed { opacity: 1; color: var(--accent); }
.teye:disabled { visibility: hidden; }
.tnode > summary:hover .teye.shown, .tleaf:hover .teye.shown { opacity: .9; }
.ifcrow.off > .ifcname, .ifcrow.off > .ifccls, .tleaf.off > .ifcname, .tleaf.off > .ifccls { opacity: .5; font-style: italic; }
.view-hidden { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.view-hidden[hidden] { display: none; }
.view-hidden svg { width: 14px; height: 14px; }
.draft .drawing.ghost { opacity: .18; pointer-events: none; }

/* ---------------------------------------------------------------- Family Editor */
.fam-tag { margin-left: 6px; font-size: 10px; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 0 5px; line-height: 13px; }
.fe { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow: hidden; background: var(--panel); color: var(--text); outline: none; }
.fe-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--title); color: var(--title-text); }
.fe-head .btn { color: var(--text); }
.fe-title { font-weight: 700; letter-spacing: .02em; }
.fe-name { font-weight: 600; width: 220px; }
.fe-sub { color: #aeb9c6; }
.fe-spacer { flex: 1; }
/* One row the height of the editor: an auto row would grow with the 3D canvas, whose drawing
   buffer follows its CSS size, so each frame made the editor taller and it kept sliding down. */
.fe-main { flex: 1; display: grid; grid-template-columns: var(--fe-side, 360px) minmax(0, 1fr) 28%; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.fe-main.no3d { grid-template-columns: var(--fe-side, 360px) minmax(0, 1fr); }
.fe-main.no3d > .fe-3d { display: none; }
.fe-side { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); background: var(--ribbon); }
.fe-tabs { display: flex; flex: none; gap: 1px; background: var(--tabs); border-bottom: 1px solid var(--line); padding: 3px 4px 0; }
.fe-tab { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; border-bottom: 0; background: none; padding: 5px 4px; cursor: pointer; color: var(--muted); border-radius: 4px 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; }
.fe-tab:hover { color: var(--text); background: var(--hover); }
.fe-tab.active { color: var(--text); background: var(--ribbon); border-color: var(--line); font-weight: 600; margin-bottom: -1px; box-shadow: inset 0 2px 0 var(--accent); }
.fe-tab-n { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: var(--line-soft); font-size: 10px; font-weight: 600; color: var(--muted); }
.fe-side-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 20px; }
.fe-tabhead { display: flex; align-items: center; gap: 6px; padding: 6px 10px; position: sticky; top: -4px; z-index: 1; background: var(--ribbon); border-bottom: 1px solid var(--line-soft); }
.fe-typepick { flex: 1; min-width: 0; }
.fe-split { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
.fe-split:hover { background: var(--accent-soft); }
.fe-segs { display: inline-flex; flex: none; }
.fe-seg { border: 1px solid var(--line); background: var(--panel); color: var(--muted); padding: 1px 7px; font: inherit; font-size: 11px; cursor: pointer; }
.fe-seg:first-child { border-radius: 3px 0 0 3px; }
.fe-seg:last-child { border-radius: 0 3px 3px 0; border-left: 0; }
.fe-seg.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.fe-ptable { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.fe-ptable th { position: sticky; top: 33px; z-index: 1; background: var(--tabs); text-align: left; font-weight: 600; padding: 3px 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.fe-ptable th:nth-child(1) { width: 38%; padding-left: 10px; }
.fe-ptable th:nth-child(2) { width: 27%; }
.fe-ptable th:nth-child(4) { width: 38px; }
.fe-ptable td { padding: 2px 3px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.fe-ptable td:first-child { padding-left: 8px; }
.fe-ptable tr:hover > td { background: var(--hover); }
.fe-ptable tr.formula > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.fe-ptable tr.open > td, .fe-ptable tr.fe-tdetail > td { background: var(--accent-soft); }
.fe-ptable input, .fe-ptable select { width: 100%; min-width: 0; box-sizing: border-box; }
.fe-ptable .fe-pname { border-color: transparent; background: transparent; font-weight: 600; }
.fe-ptable .fe-pname:hover, .fe-ptable .fe-pname:focus { border-color: var(--line); background: var(--panel); }
.fe-tvalbox { display: flex; align-items: center; gap: 2px; }
.fe-tvalbox > input, .fe-tvalbox > select { flex: 1; width: auto; }
.fe-tvalbox .fe-computed { width: auto; flex: 1; }
.fe-tvalbox .fe-unit { width: auto; flex: none; }
.fe-tformula .muted { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fe-tact { white-space: nowrap; text-align: right; }
.fe-more { font-size: 13px; }
.fe-more.on { color: var(--accent); }
.fe-tgroup > td { background: var(--tabs) !important; font-weight: 600; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 4px 10px !important; }
.fe-tdetail td { padding: 4px 10px 6px !important; }
.fe-tdetail .fe-prow > .muted:first-child { width: 52px; flex: none; }
.fe-tdetail .fe-prow select { width: 120px; flex: none; }
.fe-side-body > .fe-params { padding: 6px 10px; grid-template-columns: minmax(0, 1fr); }
.fe-param { min-width: 0; }
.fe-param:not(:focus-within) .fe-limits:not(.set) { display: none; }
.fe-pad { padding-left: 10px; padding-right: 10px; }
.fe-note { font-size: 11px; margin: 6px 0; }
.fe-bitem { padding: 3px 6px; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-bitem:hover, .fe-solid-item:hover { background: var(--hover); }
.fe-bitem.active, .fe-solid-item.active { background: var(--accent-soft); font-weight: 600; }
.fe-bgroup { font-size: 11px; padding: 4px 6px 1px; text-transform: uppercase; letter-spacing: .03em; }
.fe-3d-btns { float: right; display: inline-flex; gap: 4px; }
.fe-toolrow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; width: 100%; }
.fe-group { display: flex; flex-direction: column; gap: 1px; }
.fe-glabel { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.fe-tool:disabled { opacity: .45; cursor: default; }
.fe-snapbtn { border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 3px 9px; border-radius: 3px; font: inherit; cursor: pointer; }
.fe-snapbtn.off { color: var(--muted); text-decoration: line-through; }
.fe-num { width: 64px; }
.fe-snapmenu { min-width: 220px; padding-bottom: 0; }
.fe-snaprow { display: flex; align-items: center; gap: 8px; padding: 3px 12px; cursor: pointer; }
.fe-snaprow:hover { background: var(--accent-soft); }
.fe-snaprow kbd { margin-left: auto; font-size: 10px; color: var(--muted); }
.fe-snapmaster { font-weight: 600; border-bottom: 1px solid var(--line-soft); padding: 5px 12px; }
.fe-glyph { width: 16px; height: 16px; }
.fe-snapmenu .fe-menu-title { border-top: 1px solid var(--line-soft); border-bottom: 0; font-family: inherit; white-space: normal; max-width: 220px; }
.fe-sec { border-bottom: 1px solid var(--line-soft); padding: 4px 10px 8px; }
.fe-sec > summary { font-weight: 600; padding: 4px 0; cursor: pointer; }
.fe-field { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 6px; margin: 3px 0; }
.fe-field input, .fe-field select { width: 100%; min-width: 0; }
.fe-field input[type=checkbox] { width: auto; justify-self: start; }
.fe-field input[type=color] { width: 44px; padding: 0 2px; height: 20px; }
.fe-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.fe-row select { flex: 1; }
.fe-btns .muted { font-size: 11px; }
.btn.on { background: var(--accent-soft); border-color: var(--accent); }
.fe-params { display: grid; gap: 4px; }
.fe-param { border: 1px solid var(--line-soft); border-radius: 4px; padding: 4px; background: var(--panel); }
.fe-param.formula { border-left: 3px solid var(--accent); }
.fe-prow { display: flex; gap: 4px; align-items: center; margin: 2px 0; }
.fe-prow input[type=number] { width: 78px; }
.fe-pname { flex: 1; min-width: 0; font-weight: 600; }
.fe-prow > select:not(:first-child) { width: 92px; flex: none; }
.fe-prow .fe-expr { flex: 1; min-width: 0; }
.fe-expr { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.fe-lim { width: 52px !important; }
.fe-unit { width: 18px; font-size: 11px; }
.fe-computed { width: 78px; color: var(--accent); font-weight: 600; padding-left: 4px; }
.fe-inst { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.fe-x { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 3px; }
.fe-x:hover:not(:disabled) { color: #c83c3c; }
.fe-pt { display: grid; grid-template-columns: 14px 1fr 1fr 18px; gap: 4px; align-items: center; margin: 2px 0; }
.fe-pt input { min-width: 0; }
.fe-solid-item { padding: 4px 4px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.fe-solid-item:hover { background: var(--hover); }
.fe-swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,.3); flex: none; }
.fe-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fe-tools { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: var(--ribbon); flex-wrap: wrap; }
.fe-views, .fe-toolset { display: flex; gap: 2px; }
.fe-view, .fe-tool { border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 3px 9px; font: inherit; cursor: pointer; }
.fe-view:first-child, .fe-tool:first-child { border-radius: 3px 0 0 3px; }
.fe-view:last-child, .fe-tool:last-child { border-radius: 0 3px 3px 0; }
.fe-view.active, .fe-tool.active { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.fe-opts { position: absolute; left: 8px; top: 24px; right: 8px; width: max-content; max-width: calc(100% - 16px); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 4px 8px; background: var(--ribbon); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.fe-opts[hidden] { display: none; }
.fe-canvas-wrap { position: relative; flex: 1; min-height: 0; background: #fff; }
.fe-2d { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; }
.fe-hint { padding: 3px 10px; font-size: 11px; border-top: 1px solid var(--line-soft); background: var(--ribbon); }
.fe-errors { border-top: 1px solid #e3b4b4; background: #fdf0f0; color: #a32626; padding: 4px 10px; max-height: 84px; overflow: auto; font-size: 11px; }
.fe-table { border-top: 1px solid var(--line); max-height: 36%; overflow: auto; padding: 4px 8px; background: var(--panel); }
.fe-table-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.fe-ttable td, .fe-ttable th { white-space: nowrap; }
.fe-ttable input[type=number] { width: 80px; }
.fe-ttable tr.cur td { background: var(--accent-soft); }
.fe-link { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-align: left; }
.fe-3d { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); min-width: 0; background: var(--stage-3d); }
.fe-3d-title { padding: 5px 8px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--ribbon); }
.fe-3dc { flex: 1 1 0; width: 100%; height: 0; min-height: 0; display: block; }
.fe-menu { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 3px 0; min-width: 190px; display: flex; flex-direction: column; }
.fe-menu-title { padding: 4px 12px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--line-soft); font-family: ui-monospace, Consolas, monospace; }
.fe-menu button { border: 0; background: none; text-align: left; padding: 5px 14px; font: inherit; color: var(--text); cursor: default; }
.fe-menu button:hover { background: var(--accent-soft); }
.fe-limits { font-size: 11px; }
.fe-limits .fe-lim { width: 70px !important; }

/* Line list (MEP) */
.pipe-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
.pipe-side { display: grid; gap: 6px; align-content: start; }
.pipe-side select[size] { width: 100%; min-height: 320px; }
.pipe-iso { border: 1px solid var(--line, #d8dbe0); border-radius: 4px; overflow: auto; max-height: 400px; background: #fff; }
.pipe-iso svg { display: block; width: 100%; max-width: 100%; height: auto; }
.pipe-bom { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.pipe-bom th, .pipe-bom td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line, #e3e5e8); }
.pipe-bom td.num, .pipe-bom th.num { text-align: right; }
@media (max-width: 640px) { .pipe-body { grid-template-columns: 1fr; } }

/* ------------------------------------------------ account and plans (cloud.js) */
/* sign in */
.ux-auth { display: grid; gap: 0; text-align: center; }
.ux-logo { display: block; margin: 0 auto 18px; height: 56px; }
.ux-logo img { height: 56px; width: auto; display: block; margin: 0 auto; }
.ux-logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) { .ux-logo-light { display: none !important; } .ux-logo-dark { display: block !important; } }
.ux-auth .ux-callout { margin-top: 18px; text-align: left; }
.ux-oauth { display: grid; gap: 10px; margin-top: 24px; }
.ux-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ux-divider::before, .ux-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ux-form { display: grid; gap: 14px; margin-top: 18px; text-align: left; }
.ux-field { display: grid; gap: 6px; }
.ux-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.ux-field label { font-weight: 600; font-size: 13px; }
.ux-label-row .ux-link { font-size: 13px; }
.ux-dialog input[type=text], .ux-dialog input[type=email], .ux-dialog input[type=password] { width: 100%; height: 42px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ux-card); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; }
.ux-dialog input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.ux-dialog input:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--text)); }
.ux-dialog input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ux-ring); }
.ux-password { position: relative; }
.ux-password input { padding-right: 44px !important; }
.ux-reveal { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.ux-reveal:hover { color: var(--text); background: var(--hover); }
.ux-hint { margin: -6px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ux-hint.ok { color: #15803d; }
.ux-hint .ux-icon { width: 14px; height: 14px; }
.ux-form .ux-btn-primary { margin-top: 4px; height: 44px; }
.ux-error { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #dc2626 10%, var(--panel)); border: 1px solid color-mix(in srgb, #dc2626 35%, transparent); color: color-mix(in srgb, #dc2626 80%, var(--text)); font-size: 13px; text-align: left; }
.ux-error[hidden] { display: none; }
.ux-switch { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
.ux-sent { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ux-sent-icon { width: 26px; height: 26px; }
.ux-auth .ux-sent ~ .ux-btn { margin-top: 24px; }

/* plans */
.ux-plans-head { text-align: center; }
.ux-plans-head h2 { font-size: 26px; }
.ux-xl .ux-callout { max-width: 640px; margin: 16px auto 0; text-align: center; }
.ux-center { display: flex; justify-content: center; margin-top: 20px; }
.ux-save { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #16a34a 16%, var(--panel)); color: #15803d; }
.ux-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; align-items: stretch; }
.ux-plan { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--ux-card); }
.ux-plan.popular { border: 2px solid var(--accent); padding: 23px; box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 16%, transparent); }
.ux-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: var(--brand-gradient-deep); color: var(--on-accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ux-tagline { margin: -8px 0 0; align-self: start; color: var(--muted); font-size: 13px; min-height: 19px; }
.ux-price { display: flex; align-items: baseline; gap: 6px; }
.ux-amount { font-size: 36px; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ux-per { color: var(--muted); font-weight: 500; }
.ux-price-note { margin-top: 2px; color: var(--muted); font-size: 12px; min-height: 17px; }
.ux-seats { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 10px; background: var(--ux-field); font-weight: 600; font-size: 13px; }
.ux-seats-note { grid-column: 1 / -1; color: var(--muted); font-weight: 400; font-size: 12px; }
.ux-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--ux-card); overflow: hidden; }
.ux-stepper button { width: 30px; height: 28px; border: 0; background: transparent; color: var(--text); font-size: 16px; cursor: pointer; }
.ux-stepper button:hover:not(:disabled) { background: var(--hover); }
.ux-stepper button:disabled { color: var(--line); cursor: default; }
.ux-stepper output { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.ux-plan > .ux-btn { width: 100%; }
.ux-plan-extra:empty { display: block; }
.ux-plan .ux-seats { align-self: end; }
.ux-features { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.ux-features li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.ux-check { width: 16px; height: 16px; margin-top: 1px; padding: 2px; border-radius: 50%; stroke-width: 2.6; color: var(--accent); background: var(--accent-soft); }
.ux-xl .ux-error { margin-top: 16px; }
.ux-foot-note { margin: 22px auto 0; max-width: 700px; text-align: center; color: var(--muted); font-size: 12px; }
@media (max-width: 860px) {
  .ux-plans { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-left: auto; margin-right: auto; }
  .ux-plan { grid-template-rows: auto; grid-row: auto; display: flex; flex-direction: column; }
  .ux-plan-extra:empty { display: none; }
  .ux-card { padding: 24px 20px; }
}

/* account menu */
.ux-dialog.ux-menu { margin: 44px 10px auto auto; }
.ux-menu .ux-card { width: 300px; padding: 16px; }
.ux-menu .ux-close { top: 8px; right: 8px; }
.ux-me { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.ux-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--brand-gradient-deep); }
.ux-me-name { font-weight: 650; overflow-wrap: anywhere; }
.ux-me-mail { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.ux-plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--ux-field); font-size: 13px; }
.ux-plan-line.plan-free .ux-pill { background: var(--line-soft); color: var(--muted); }
.ux-account .ux-callout { margin-top: 10px; }
.ux-menu-list { display: grid; margin-top: 10px; }
.ux-menu-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ux-menu-item:hover, .ux-menu-item:focus-visible { background: var(--hover); outline: none; }
.ux-menu-item .ux-icon { color: var(--muted); }
.ux-menu-item.accent { color: var(--accent); font-weight: 600; }
.ux-menu-item.accent .ux-icon { color: var(--accent); }

/* account button in the title bar */
.account-btn { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 999px; font-weight: 600; }
.account-btn:not(.signed-in) { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.account-btn:not(.signed-in):hover { background: color-mix(in srgb, var(--accent) 88%, #000); }

/* Road tab (road.js) */
.dialog.road-xwide { width: min(940px, 97vw); }
.road-dialog .dlg-body { max-height: 78vh; overflow: auto; }
.road-svg { width: 100%; height: auto; background: #fff; border: 1px solid var(--line-soft); border-radius: 4px; user-select: none; }
.road-grid { stroke: #e3e5ea; stroke-width: 1; }
.road-axis { font: 11px "Segoe UI", system-ui, sans-serif; fill: #5b5f68; }
.road-eg { fill: none; stroke: #8a5a2b; stroke-width: 1.5; stroke-dasharray: 6 3; }
.road-fg { fill: none; stroke: #b3261e; stroke-width: 2; }
.road-tangent { fill: none; stroke: #b3261e; stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.road-datum { fill: none; stroke: #444; stroke-width: 1; stroke-dasharray: 4 3; }
.road-cl { stroke: #0891b2; stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.road-grade { font: 11px "Segoe UI", system-ui, sans-serif; fill: #b3261e; }
.road-pvi { fill: #fff; stroke: #b3261e; stroke-width: 2; cursor: grab; }
.road-egpt { fill: #fff; stroke: #8a5a2b; stroke-width: 2; cursor: grab; }
.road-modes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.road-tbl { border-collapse: collapse; width: 100%; font-size: 12px; }
.road-tbl th, .road-tbl td { border-bottom: 1px solid var(--line-soft); padding: 3px 6px; text-align: left; }
.road-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.road-tbl tr.sel td { background: var(--accent-soft); }
.road-tbl input { width: 7em; }
.road-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid rgba(0,0,0,.3); vertical-align: -1px; }
.road-asm { grid-template-columns: 190px 1fr; align-items: start; }
.road-asm-list { display: grid; gap: 6px; }
.road-asm-list select { width: 100%; }
.road-asm-main { display: grid; gap: 8px; min-width: 0; }
.road-asm-head { display: flex; gap: 8px; align-items: center; }
.road-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.road-side { display: grid; gap: 6px; align-content: start; }
.road-part { border: 1px solid var(--line-soft); border-radius: 4px; padding: 6px; display: grid; gap: 4px; }
.road-part-head { display: flex; gap: 4px; align-items: center; }
.road-params { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 12px; }
.road-params label { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.road-params input[type=number] { width: 5.5em; }
.road-pair { display: inline-flex; gap: 4px; }

/* Bridge tab (bridge.js): its dialogs reuse the road styles. */
.bridge-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; margin-top: 6px; }
.bridge-support { cursor: ew-resize; }
.bridge-items { max-height: 40vh; overflow: auto; }

/* reinforcement mode and the reinforcement type editor (rebar.js) */
.rebar-banner { position: absolute; z-index: 6; top: 10px; left: 50%; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 10px; max-width: min(860px, calc(100% - 24px)); padding: 8px 10px 8px 12px; border: 1px solid #c75c2e; border-left-width: 4px; border-radius: 6px; background: #fff4ec; color: #4a2410; box-shadow: 0 4px 14px rgba(0,0,0,.16); font-size: 13px; }
.rebar-banner[hidden] { display: none; }
.rebar-banner > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #c75c2e; stroke-width: 1.6; }
.rebar-banner-text { display: flex; flex-direction: column; gap: 1px; min-width: 200px; max-width: 460px; flex: 1 1 auto; }
.rebar-banner-text b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #a3441b; }
.rebar-banner-text span { overflow: hidden; text-overflow: ellipsis; }
.rebar-banner .btn { flex: none; }
body.rebar-mode .canvas-wrap { box-shadow: inset 0 0 0 3px #c75c2e; }
@media (prefers-color-scheme: dark) {
  .rebar-banner { background: #3a2216; color: #f6dccd; }
  .rebar-banner-text b { color: #f0a57f; }
}
.rebar-row-btns { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.te-section.rebar-off .te-fields { display: none; }
.te-section.rebar-off h3 { color: var(--muted); }
.rebar-preview { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 8px; }
.te-aside svg.rebar-svg { display: block; width: 100%; height: 240px; max-width: none; }
.rebar-svg .rb-conc { fill: #d9dde4; stroke: #8a93a3; stroke-width: 4; vector-effect: non-scaling-stroke; }
.rebar-svg .rb-link, .rebar-svg .rb-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rebar-svg .rb-link, .rebar-svg .link { stroke: #2f6fde; }
.rebar-svg .rb-bar.link { fill: #2f6fde; stroke: none; }
.rebar-svg .rb-bar.main { fill: #c75c2e; }
.rebar-svg .rb-line.main { stroke: #c75c2e; }
.rebar-svg .rb-bar.dist { fill: #8a4fc2; }
.rebar-svg .rb-line.dist { stroke: #8a4fc2; }
@media (prefers-color-scheme: dark) { .rebar-svg .rb-conc { fill: #3a414d; stroke: #6b7385; } }
.rebar-legend { display: grid; gap: 4px; font-size: 12px; }
.rebar-legend-row { display: flex; align-items: center; gap: 8px; }
.rebar-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #c75c2e; }
.rebar-swatch.link { background: #2f6fde; border-radius: 2px; }
.rebar-swatch.dist { background: #8a4fc2; }
/* Roof shape gallery in the option bar. */
.roof-shapes { display: inline-flex; gap: 2px; }
.roof-shapes .btn svg { width: 18px; height: 18px; }

/* Custom properties (custompsets.js): Add Property and Manage > Custom Properties. */
.pset-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.cpx-dialog .dlg-body { max-height: 78vh; overflow: auto; }
.cpx-dialog select, .cpx-dialog input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.cpx-note { min-height: 1.2em; font-size: 12px; }
.cpx-manager { display: grid; grid-template-columns: minmax(170px, 230px) 1fr; gap: 12px; min-height: 320px; }
.cpx-list { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); padding-right: 10px; overflow: auto; max-height: 60vh; }
.cpx-item { display: grid; gap: 2px; text-align: left; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--text); cursor: pointer; font: inherit; }
.cpx-item:hover { background: var(--accent-soft); }
.cpx-item.active { background: var(--accent-soft); border-color: var(--accent); }
.cpx-item span { font-size: 12px; }
.cpx-new { align-self: flex-start; margin-top: 4px; }
.cpx-pane { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cpx-editor { display: grid; gap: 8px; }
.cpx-table { width: 100%; border-collapse: collapse; }
.cpx-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted, #6b7380); padding: 2px 4px; }
.cpx-table td { padding: 2px 4px; vertical-align: top; }
.cpx-table td:nth-child(2) { display: grid; gap: 4px; }
.cpx-table td:last-child { width: 1%; }
.cpx-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cpx-empty, .cpx-hint { font-size: 12px; }
.btn.danger { color: #c0392b; }
@media (max-width: 640px) { .cpx-manager { grid-template-columns: 1fr; } .cpx-list { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; max-height: 30vh; } }
.cpx-dialog [hidden] { display: none !important; }
.cpx-addprop { justify-self: start; }

/* Classifications (classify.js): Add Classification and Manage > Classifications. */
.dialog.cls-pick { width: min(560px, 94vw); }
.cls-codes { display: flex; flex-direction: column; gap: 2px; max-height: 38vh; min-height: 80px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; padding: 4px; }
.cls-code { display: grid; grid-template-columns: minmax(80px, auto) 1fr; column-gap: 10px; text-align: left; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--text); cursor: pointer; font: inherit; }
.cls-code:hover { background: var(--accent-soft); }
.cls-code.active { background: var(--accent-soft); border-color: var(--accent); }
.cls-code .cls-path { grid-column: 2; font-size: 11px; }
.cls-more { font-size: 12px; padding: 4px 6px; }
.cls-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.cls-check input { width: auto !important; }
.cls-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cls-codebar { display: flex; gap: 8px; align-items: center; }
.cls-codebar input { flex: 1; }
.cls-table-wrap { max-height: 42vh; overflow: auto; }
.cls-table td:nth-child(2) { display: table-cell; }
.cls-table input { width: 100%; box-sizing: border-box; }
.cls-table td:nth-child(1) { width: 18%; }
.cls-table td:nth-child(3) { width: 16%; }
.cls-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cls-row-text { display: grid; flex: 1; min-width: 0; }
.cls-row-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cls-row-name { font-size: 11px; }
.cls-summary ul { margin: 6px 0; padding-left: 18px; }
.cls-dialog .bad { color: #c0392b; }
@media (max-width: 640px) { .cls-fields { grid-template-columns: 1fr; } }
.cls-row input { flex: 1; min-width: 0; }