/* ============================================================
   BIMXR - IFC Building Viewer & Walker
   Modern dark-theme UI — Revit-inspired layout
   ============================================================ */

/* ---------- Variables ---------- */
:root {
  --bg: #0d1117;
  --bg2: #161b22;
  --bg3: #21262d;
  --panel: rgba(13, 17, 23, 0.93);
  --border: rgba(88, 166, 255, 0.18);
  --border-dim: rgba(255, 255, 255, 0.07);
  --accent: #58a6ff;
  --accent2: #79b8ff;
  --accent-bg: rgba(88, 166, 255, 0.1);
  --text: #e6edf3;
  --text2: #8b949e;
  --text3: #484f58;
  --green: #3fb950;
  --red: #f85149;
  --orange: #d29922;
  --r: 6px;
  --r2: 10px;
  --r3: 14px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  --blur: blur(16px);
  --t: all 0.18s ease;
  --viewer-top: 0px;
  --viewer-left: 0px;
  --viewer-width: 100vw;
  --viewer-height: 100vh;
}

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

/* Base scale — bumps all rem-based font sizes proportionally */
html {
  font-size: 15px;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ============================================================
   LANDING PAGE
   ============================================================ */
body.landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0a0f18 0%, #0d1b2e 55%, #0a1520 100%);
  overflow: hidden;
  position: relative;
}
body.landing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 60% at 15% 50%,
      rgba(88, 166, 255, 0.07) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 40% at 85% 25%,
      rgba(63, 185, 80, 0.04) 0%,
      transparent 60%
    );
}
.land-wrap {
  position: relative;
  text-align: center;
  padding: 2rem;
  max-width: 620px;
  width: 100%;
}
.land-logo {
  margin-bottom: 2.8rem;
}
.land-brand {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text);
  line-height: 1;
}
.land-brand span {
  color: var(--accent);
}
.land-tagline {
  font-size: 0.82rem;
  color: var(--text2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 0.65rem;
}
.land-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.lcard {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: 2rem 1.5rem;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  transition: var(--t);
}
.lcard:hover {
  background: var(--bg3);
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(88, 166, 255, 0.14);
}
.lcard-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--accent-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}
.lcard h2 {
  font-size: 1rem;
  font-weight: 600;
}
.lcard p {
  font-size: 0.8rem;
  color: var(--text2);
  text-align: center;
  line-height: 1.45;
}
.land-foot {
  margin-top: 2.5rem;
  font-size: 0.76rem;
  color: var(--text3);
  line-height: 1.6;
}

/* ============================================================
   VIEWER PAGE
   ============================================================ */
.a-canvas {
  position: fixed !important;
  top: var(--viewer-top) !important;
  left: var(--viewer-left) !important;
  width: var(--viewer-width) !important;
  height: var(--viewer-height) !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  touch-action: none;
}
canvas#three-canvas {
  display: none !important;
}
a-scene {
  position: fixed !important;
  top: var(--viewer-top) !important;
  left: var(--viewer-left) !important;
  width: var(--viewer-width) !important;
  height: var(--viewer-height) !important;
  z-index: 1;
  overflow: hidden;
  pointer-events: auto !important;
}

#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 2;
}

/* ── Menu bar (34px, light) ── */
.ui-menubar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 0.9rem;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #d0d7de;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: all;
  flex-shrink: 0;
}
.ui-brand {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0969da;
  white-space: nowrap;
  flex-shrink: 0;
}
.ui-menubar-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  overflow: hidden;
}
.ui-filename {
  font-size: 0.82rem;
  color: #1f2328;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.ui-menubar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.ui-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.6rem;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: var(--r);
  color: #1f2328;
  font-size: 0.73rem;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
  pointer-events: all;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}
.ui-menu-btn:hover {
  background: rgba(9, 105, 218, 0.08);
  border-color: #0969da;
  color: #0969da;
}
.ui-menu {
  position: relative;
  flex-shrink: 0;
}
.ui-menu[open] {
  z-index: 25;
}
.ui-menu-trigger {
  list-style: none;
}
.ui-menu-trigger::-webkit-details-marker {
  display: none;
}
.ui-menu-trigger::marker {
  content: "";
}
.ui-menu-caret {
  font-size: 0.7em;
  color: #656d76;
  transition: transform 0.12s ease;
}
.ui-menu[open] .ui-menu-caret {
  transform: rotate(180deg);
}
.ui-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 158px;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(31, 35, 40, 0.12);
}
.ui-menu:not([open]) .ui-menu-dropdown {
  display: none;
}
.ui-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #1f2328;
  font-size: 0.72rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
}
.ui-menu-item:hover {
  background: rgba(9, 105, 218, 0.08);
  color: #0969da;
}
.ui-xr-btn {
  color: #cf222e;
  border-color: rgba(207, 34, 46, 0.3);
}

/* ── Ribbon — two-row layout: tabs row + tools row (light) ── */
.ui-ribbon {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #d0d7de;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: all;
  flex-shrink: 0;
}

/* Ribbon tabs — top row */
.ribbon-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0.5rem;
  height: 30px;
  flex-shrink: 0;
  border-bottom: 1px solid #d0d7de;
  background: #f6f8fa;
}
.ribbon-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: #656d76;
  font-size: 0.79rem;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
  white-space: nowrap;
  height: 100%;
  margin-bottom: -1px;
}
.ribbon-tab:hover {
  color: #1f2328;
  background: rgba(0, 0, 0, 0.04);
}
.ribbon-tab.active {
  color: #0969da;
  background: rgba(255, 255, 255, 0.97);
  border-color: #d0d7de;
  border-bottom: 1px solid rgba(255, 255, 255, 0.97);
  font-weight: 600;
}

/* Ribbon panels — bottom row, only active is visible */
.ribbon-panel {
  display: none;
  align-items: center;
  gap: 0;
  padding: 0 0.5rem;
  height: 40px;
  overflow-x: auto;
  overflow-y: hidden;
}
.ribbon-panel.active {
  display: flex;
}

/* Ribbon groups & separators */
.ribbon-group {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  flex-shrink: 0;
}
.ribbon-group-label {
  font-size: 0.55rem;
  color: #656d76;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  margin-right: 3px;
  writing-mode: horizontal-tb;
}
.ribbon-sep {
  width: 1px;
  height: 22px;
  background: #d0d7de;
  flex-shrink: 0;
  margin: 0 2px;
}

/* Ribbon buttons — compact icon+text (light) */
.rb-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  color: #1f2328;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
  white-space: nowrap;
  height: 28px;
}
.rb-btn:hover {
  background: rgba(9, 105, 218, 0.08);
  border-color: #0969da;
  color: #0969da;
}
.rb-btn.active {
  background: rgba(9, 105, 218, 0.1);
  border-color: #0969da;
  color: #0969da;
  font-weight: 600;
}
.btn-icon,
.rb-icon {
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.rb-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 6px;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  color: #1f2328;
  font-size: 0.68rem;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
  height: 24px;
}
.rb-btn-sm:hover {
  background: rgba(9, 105, 218, 0.08);
  border-color: #0969da;
  color: #0969da;
}

.rb-color-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.rb-color-row input[type="color"] {
  width: 24px;
  height: 20px;
  padding: 1px;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  cursor: pointer;
  background: none;
}

.rb-select-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.rb-select-row select {
  background: #fff;
  border: 1px solid #d0d7de;
  color: #1f2328;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
  font-family: inherit;
  max-width: 180px;
  height: 24px;
}
.rb-select-row select:focus {
  outline: none;
  border-color: #0969da;
}
.floor-level-status {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #57606a;
  font-size: 0.68rem;
  line-height: 24px;
}
.rb-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 8px;
  background: #0969da;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
  height: 24px;
}
.rb-go:hover {
  background: #0860ca;
}

.rb-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: #1f2328;
  cursor: pointer;
  white-space: nowrap;
}
.rb-toggle input[type="checkbox"] {
  accent-color: #0969da;
  width: 12px;
  height: 12px;
  cursor: pointer;
}

/* ── Workspace (left | center | right) ── */
.ui-workspace {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Left panel (light) ── */
.ui-left-panel {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid #d0d7de;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: all;
  overflow: hidden;
  transition:
    width 0.2s ease,
    opacity 0.2s ease;
  color: #1f2328;
  position: relative;
}
.ui-left-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.ui-left-panel.resizing {
  transition: none;
}

.panel-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  z-index: 20;
  touch-action: none;
  pointer-events: auto;
}
.panel-resize-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: rgba(9, 105, 218, 0.12);
  transition: background 0.12s ease;
}
.panel-resize-handle:hover::before,
.ui-left-panel.resizing .panel-resize-handle::before {
  background: rgba(9, 105, 218, 0.45);
}

/* Right-panel resize handle sits on the LEFT edge */
.panel-resize-handle--right {
  left: 0;
  right: auto;
}
.panel-resize-handle--right::before {
  left: auto;
  right: 4px;
}
.panel-resize-handle--right:hover::before,
.ui-right-panel.resizing .panel-resize-handle--right::before {
  background: rgba(9, 105, 218, 0.45);
}
.ui-right-panel.resizing {
  transition: none;
}

/* ── Center viewport ── */
.ui-center {
  flex: 1;
  position: relative;
  min-width: 0;
  pointer-events: none;
}

/* ── Right panel (properties, light) ── */
.ui-right-panel {
  width: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
  border-left: 1px solid #d0d7de;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: all;
  overflow: hidden;
  opacity: 0;
  transition:
    width 0.22s ease,
    opacity 0.22s ease;
  color: #1f2328;
}
.ui-right-panel.open {
  width: 280px;
  opacity: 1;
}

/* ── Panel sections (light theme) ── */
.panel-section {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #d0d7de;
  overflow: hidden;
}
.panel-section--grow {
  flex: 1;
  min-height: 0;
}
.panel-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0969da;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.45rem 0.7rem;
  background: #f6f8fa;
  border-bottom: 1px solid #d0d7de;
  flex-shrink: 0;
}
.panel-section-body {
  padding: 0.35rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  overflow-y: auto;
  color: #1f2328;
}
.panel-section-body--scroll {
  flex: 1;
  min-height: 0;
}
#schemaTree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.panel-placeholder {
  color: #656d76;
  font-size: 0.71rem;
  padding: 0.4rem 0.2rem;
  font-style: italic;
}
.panel-close-btn {
  background: none;
  border: none;
  color: #656d76;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 0.2rem;
  line-height: 1;
  transition: color 0.12s;
}
.panel-close-btn:hover {
  color: var(--red);
}

/* ============================================================
   SCHEMA TREE — hierarchical with expand/collapse + eye icons
   ============================================================ */

/* ── Level color palette ── */
:root {
  --tree-project: #6f42c1; /* purple  — IFCPROJECT */
  --tree-site: #0969da; /* blue    — IFCSITE */
  --tree-building: #d97706; /* amber   — IFCBUILDING */
  --tree-storey: #0891b2; /* cyan    — IFCBUILDINGSTOREY */
  --tree-space: #059669; /* emerald — IFCSPACE */
  --tree-type: #7c3aed; /* violet  — type-group rows */
  --tree-element: #374151; /* slate   — leaf elements */
}

.tree-node {
  user-select: none;
}

/* ── Generic tree-header base ── */
.tree-header {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}
.tree-header:hover {
  background: rgba(9, 105, 218, 0.07);
}
.tree-header.selected {
  background: rgba(9, 105, 218, 0.14);
  outline: 1px solid rgba(9, 105, 218, 0.25);
}

/* ── Per-level left-border accent ── */
.tree-node--project > .tree-header {
  border-left: 3px solid var(--tree-project);
  padding-left: 5px;
  border-radius: 0 4px 4px 0;
  background: rgba(111, 66, 193, 0.05);
}
.tree-node--site > .tree-header {
  border-left: 3px solid var(--tree-site);
  padding-left: 5px;
  border-radius: 0 4px 4px 0;
  background: rgba(9, 105, 218, 0.05);
}
.tree-node--building > .tree-header {
  border-left: 3px solid var(--tree-building);
  padding-left: 5px;
  border-radius: 0 4px 4px 0;
  background: rgba(217, 119, 6, 0.05);
}
.tree-node--storey > .tree-header {
  border-left: 3px solid var(--tree-storey);
  padding-left: 5px;
  border-radius: 0 4px 4px 0;
  background: rgba(8, 145, 178, 0.05);
}
.tree-node--space > .tree-header {
  border-left: 3px solid var(--tree-space);
  padding-left: 5px;
  border-radius: 0 4px 4px 0;
  background: rgba(5, 150, 105, 0.05);
}

.tree-node--project > .tree-header .tree-label {
  color: var(--tree-project);
  font-weight: 700;
}
.tree-node--site > .tree-header .tree-label {
  color: var(--tree-site);
  font-weight: 700;
}
.tree-node--building > .tree-header .tree-label {
  color: var(--tree-building);
  font-weight: 700;
}
.tree-node--storey > .tree-header .tree-label {
  color: var(--tree-storey);
  font-weight: 600;
}
.tree-node--space > .tree-header .tree-label {
  color: var(--tree-space);
  font-weight: 600;
}

.tree-node--project > .tree-header .tree-icon {
  color: var(--tree-project);
}
.tree-node--site > .tree-header .tree-icon {
  color: var(--tree-site);
}
.tree-node--building > .tree-header .tree-icon {
  color: var(--tree-building);
}
.tree-node--storey > .tree-header .tree-icon {
  color: var(--tree-storey);
}
.tree-node--space > .tree-header .tree-icon {
  color: var(--tree-space);
}

.tree-toggle {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: #656d76;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.tree-toggle.expanded {
  transform: rotate(90deg);
}
.tree-toggle.leaf {
  visibility: hidden;
}

/* When the eye IS the left icon (replaces the bullet on leaf nodes) */
.tree-eye--left {
  margin-right: 3px;
}

.tree-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  color: #0969da;
  margin-right: 3px;
}

.tree-label {
  flex: 1;
  font-size: 0.79rem;
  color: var(--tree-element);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-count {
  font-size: 0.65rem;
  color: #656d76;
  margin-left: 4px;
  flex-shrink: 0;
}

.tree-eye {
  width: 22px;
  height: 22px;
  display: none; /* hidden until row is hovered or element is hidden */
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #adb5bd;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
  transition: var(--t);
  line-height: 1;
}
/* Show eye icon on row hover */
.tree-header:hover .tree-eye {
  display: flex;
}
/* Always show when element is hidden (so user can un-hide it) */
.tree-eye.hidden-eye {
  display: flex;
  color: #cf222e;
  opacity: 0.75;
}
.tree-eye:hover {
  background: rgba(9, 105, 218, 0.1);
  color: #0969da;
}
.tree-eye.hidden-eye:hover {
  background: rgba(207, 34, 46, 0.1);
  color: #cf222e;
  opacity: 1;
}

.tree-children {
  padding-left: 16px;
  overflow: hidden;
}
.tree-children.collapsed {
  display: none;
}

.tree-node.dim .tree-label {
  color: #afb8c1;
  text-decoration: line-through;
}

/* ── Type-group rows (IFC class buckets inside storeys) ── */
.tree-type-group > .tree-header,
.tree-type-header {
  background: rgba(124, 58, 237, 0.06);
  border-left: 2px solid rgba(124, 58, 237, 0.35);
  padding-left: 6px;
  border-radius: 0 4px 4px 0;
  margin-top: 3px;
}
.tree-type-group > .tree-header:hover,
.tree-type-header:hover {
  background: rgba(124, 58, 237, 0.12);
}
.tree-icon--type {
  color: var(--tree-type);
  font-size: 0.85rem;
}
.tree-type-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--tree-type);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tree-type-count {
  font-size: 0.65rem;
  color: var(--tree-type);
  opacity: 0.8;
  margin-left: 4px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 8px;
  padding: 0 6px;
  line-height: 1.7;
}

/* ── 2D Plan View indicator ── */
.plan-view-bar {
  display: none;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.4);
  border-radius: 8px;
  padding: 4px 14px;
  pointer-events: all;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  gap: 10px;
}
.plan-view-bar.active {
  display: flex;
}
.plan-view-label {
  font-size: 0.72rem;
  color: var(--orange);
  font-weight: 600;
}
.plan-view-back {
  padding: 3px 10px;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
}
.plan-view-back:hover {
  background: var(--accent2);
}

/* ── Property panel (right, light) ── */
.prop-summary {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid #d0d7de;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-shrink: 0;
}
.prop-type-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  background: rgba(9, 105, 218, 0.08);
  border: 1px solid rgba(9, 105, 218, 0.25);
  border-radius: 99px;
  color: #0969da;
  font-size: 0.68rem;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prop-meta {
  font-size: 0.7rem;
  color: #656d76;
  word-break: break-word;
}

.pset-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  margin-top: 0.4rem;
}
.pset-table th {
  text-align: left;
  border-bottom: 1px solid #d0d7de;
  padding: 3px 5px;
  color: #656d76;
  font-weight: 600;
}
.pset-table td {
  padding: 3px 5px;
  border-bottom: 1px solid #eaeef2;
  color: #1f2328;
}
.pset-table td {
  vertical-align: top;
  word-break: break-word;
}
.empty-value {
  color: #8c959f;
  font-style: italic;
}
#psetTables h4 {
  font-size: 0.7rem;
  color: #0969da;
  margin: 6px 0 2px;
}

/* ── Load status ── */
.load-status-info,
.load-status-ok,
.load-status-error {
  font-size: 0.7rem;
  border-radius: var(--r);
  padding: 0.1rem 0.3rem;
  line-height: 1.4;
  word-break: break-word;
}
.load-status-info {
  color: #656d76;
}
.load-status-ok {
  color: #1a7f37;
}
.load-status-error {
  color: #cf222e;
  background: rgba(207, 34, 46, 0.06);
  border: 1px solid rgba(207, 34, 46, 0.2);
}

/* ─────────────────────────────────────────────────────────────
   VIEW CUBE — smaller Revit-style (70px viewport, 48px cube)
   ───────────────────────────────────────────────────────────── */
#view-cube-wrap {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  pointer-events: all;
  user-select: none;
  display: none;
}
.vc-viewport {
  width: 70px;
  height: 70px;
  perspective: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 22, 0.55);
  border: 1px solid rgba(88, 166, 255, 0.15);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: grab;
}
.vc-viewport:active {
  cursor: grabbing;
}

#view-cube {
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
}
.vc-face {
  position: absolute;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(180, 215, 255, 0.85);
  background: rgba(22, 52, 118, 0.5);
  border: 1px solid rgba(88, 166, 255, 0.28);
  cursor: pointer;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.vc-face:hover {
  background: rgba(58, 118, 228, 0.8);
  color: #fff;
  border-color: rgba(88, 166, 255, 0.7);
}

.vc-front {
  transform: translateZ(24px);
}
.vc-back {
  transform: rotateY(180deg) translateZ(24px);
}
.vc-right {
  transform: rotateY(90deg) translateZ(24px);
}
.vc-left {
  transform: rotateY(-90deg) translateZ(24px);
}
.vc-top {
  transform: rotateX(-90deg) translateZ(24px);
}
.vc-bottom {
  transform: rotateX(90deg) translateZ(24px);
}

.vc-btns {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 3px 4px;
  background: rgba(22, 52, 118, 0.6);
  border: 1px solid rgba(88, 166, 255, 0.18);
  border-radius: 4px;
  color: rgba(180, 215, 255, 0.8);
  font-size: 8px;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
}
.vc-btn:hover {
  background: rgba(58, 118, 228, 0.85);
  color: #fff;
  border-color: rgba(88, 166, 255, 0.6);
}
.vc-hint {
  font-size: 7px;
  color: rgba(110, 145, 190, 0.45);
  text-align: center;
  margin-top: 3px;
  line-height: 1.4;
}

/* Exit XR button */
.exitbtn {
  display: none;
}

/* ============================================================
   MEMO PANEL
   ============================================================ */
.main {
  display: contents;
}
.memo-wrap {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 232px;
  z-index: 200;
  pointer-events: all;
}
details.memo-details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  overflow: hidden;
}
.memo-summary {
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: rgba(88, 166, 255, 0.06);
  border-bottom: 1px solid var(--border);
}
.memo-summary::-webkit-details-marker {
  display: none;
}
.memo-list {
  padding: 0.4rem 0.6rem;
  max-height: 190px;
  overflow-y: auto;
  font-size: 0.78rem;
  color: var(--text);
}
button.toPDF {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.42rem;
  background: rgba(63, 185, 80, 0.07);
  border: none;
  border-top: 1px solid var(--border-dim);
  color: var(--green);
  font-size: 0.77rem;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
}
button.toPDF:hover {
  background: rgba(63, 185, 80, 0.16);
}
.list-article {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-dim);
  font-size: 0.77rem;
}
.list-title {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.list-content {
  color: var(--text2);
  margin: 0.2rem 0;
}
.editBtn,
.deleteBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r);
  border: 1px solid var(--border-dim);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text2);
  font-size: 0.72rem;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
}
.editBtn:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--border);
}
.deleteBtn:hover {
  background: rgba(248, 81, 73, 0.12);
  color: var(--red);
  border-color: rgba(248, 81, 73, 0.25);
}
.meshToggleBtn::before {
  content: "\25A6";
}
.memoEditBtn::before {
  content: "\270E";
}
.memoDeleteBtn::before {
  content: "\1F5D1";
}
button.toPDF::before {
  content: "\1F4C4";
}
.btnWrap {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

/* ============================================================
   MEMO MODAL
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#memoModal[style*="display: block"],
#memoModal[style*="display:block"] {
  display: flex !important;
}
.modal-content {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: 1.5rem;
  width: 390px;
  max-width: 92vw;
  box-shadow: var(--shadow);
  position: relative;
}
.close-btn {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-size: 1.4rem;
  color: var(--text2);
  cursor: pointer;
  line-height: 1;
  transition: var(--t);
}
.close-btn:hover {
  color: var(--red);
}
.modal-content > p {
  font-size: 0.78rem;
  color: var(--text2);
  margin: 0.2rem 0;
  line-height: 1.4;
}
.memo-modal-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.35rem;
  display: block;
}
.memo-title {
  width: 100%;
  margin: 0.75rem 0 0.5rem;
  padding: 0.45rem 0.65rem;
  background: var(--bg3);
  border: 1px solid var(--border-dim);
  border-radius: var(--r);
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
}
.memo-title:focus {
  outline: none;
  border-color: var(--accent);
}
.memo-content {
  width: 100%;
  padding: 0.45rem 0.65rem;
  background: var(--bg3);
  border: 1px solid var(--border-dim);
  border-radius: var(--r);
  color: var(--text);
  font-size: 0.82rem;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
}
.memo-content:focus {
  outline: none;
  border-color: var(--accent);
}
button#saveBtn {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 1.2rem;
  background: var(--accent);
  border: none;
  border-radius: var(--r);
  color: #000;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--t);
  font-family: inherit;
}
button#saveBtn:hover {
  background: var(--accent2);
}
button#saveBtn::before {
  content: "\1F4BE";
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(88, 166, 255, 0.22);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(88, 166, 255, 0.4);
}

/* ============================================================
   VISITOR COUNTER FAB & POPOVER
   ============================================================ */

/* ── Floating action button ── */
.vc-fab {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px 0 12px;
  height: 40px;
  border-radius: 20px;
  background: rgba(13, 17, 23, 0.92);
  border: 1.5px solid rgba(88, 166, 255, 0.4);
  color: #e6edf3;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 0 0 rgba(88, 166, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease;
  animation: vc-pulse 3s ease-in-out infinite;
}
.vc-fab:hover {
  background: rgba(88, 166, 255, 0.18);
  border-color: rgba(88, 166, 255, 0.8);
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 0 4px rgba(88, 166, 255, 0.12);
  animation: none;
}
.vc-fab:active {
  transform: translateY(0);
}
.vc-fab-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.vc-fab-label {
  white-space: nowrap;
}
@keyframes vc-pulse {
  0%,
  100% {
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.5),
      0 0 0 0 rgba(88, 166, 255, 0.4);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.5),
      0 0 0 6px rgba(88, 166, 255, 0);
  }
}

/* ── Popover card ── */
.vc-popover {
  display: none;
  position: fixed;
  bottom: 72px;
  right: 20px;
  z-index: 10000;
  background: #0d1117;
  border: 1px solid rgba(88, 166, 255, 0.25);
  border-radius: 14px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(88, 166, 255, 0.06);
  overflow: hidden;
  min-width: 260px;
  max-width: calc(100vw - 44px);
}
.vc-popover.vc-open {
  display: block;
  animation: vc-pop-in 0.18s cubic-bezier(0.34, 1.36, 0.64, 1);
}
@keyframes vc-pop-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Popover title row ── */
.vc-popover-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #8b949e;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(88, 166, 255, 0.1);
}
.vc-pop-close {
  background: none;
  border: none;
  color: #484f58;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  font-family: inherit;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}
.vc-pop-close:hover {
  color: #e6edf3;
  background: rgba(255, 255, 255, 0.07);
}

/* ── Flag image ── */
.vc-flag-link {
  display: block;
  line-height: 0;
  padding: 12px;
  transition: opacity 0.15s ease;
}
.vc-flag-link:hover {
  opacity: 0.88;
}
.vc-flag-img {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}