:root {
  --ink: #142019;
  --muted: #718078;
  --line: #dfe5e0;
  --panel: #fbfcfa;
  --cream: #f1f3ee;
  --green: #1d5b3b;
  --green-2: #287650;
  --mint: #98e1bc;
  --lime: #b9e676;
  --orange: #f29c55;
  --shadow: 0 20px 55px rgba(24, 40, 29, .13);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--sans); color: var(--ink); background: #dce3dc; font-size: 13px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(400px, 1fr) 292px;
  grid-template-rows: 70px minmax(0, 1fr);
  background: var(--cream);
  transition: grid-template-columns .24s ease;
}
.app-shell.pov-mode { grid-template-columns: 0 minmax(400px, 1fr) 0; }
.app-shell.pov-mode .library-panel, .app-shell.pov-mode .inspector-panel { width: 0; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; }
.app-shell.view-only-mode { grid-template-columns: 0 minmax(400px, 1fr) 0; }
.app-shell.view-only-mode .library-panel, .app-shell.view-only-mode .inspector-panel { width: 0; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; }
.app-shell.view-only-mode .editor-only { display: none !important; }
.app-shell.view-only-mode .project-title { pointer-events: none; }
.app-shell.view-only-mode .project-title span { display: none; }
.view-only-action { display: none; }
.app-shell.view-only-mode .view-only-action { display: inline-flex; align-items: center; gap: 5px; }
.app-shell.view-only-mode .selection-hint, .app-shell.view-only-mode .drop-hint, .app-shell.view-only-mode .status-strip, .app-shell.view-only-mode .viewport-toolbar { display: none !important; }

.topbar {
  grid-column: 1 / -1;
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  background: rgba(250, 251, 248, .96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 18px rgba(29, 45, 34, .06);
}

.brand-block, .top-actions, .topbar-centre, .history-controls, .view-switch { display: flex; align-items: center; }
.brand-block { gap: 11px; min-width: 0; }
.brand-mark { display: block; width: 34px; height: 34px; flex: 0 0 34px; }
.brand { font-size: 12px; font-weight: 800; letter-spacing: .13em; line-height: 1; }
.brand small { color: #69a688; font-size: 8px; }
.project-title { border: 0; padding: 5px 0 0; background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.project-title span { color: #829188; margin-left: 3px; }
.topbar-centre { gap: 14px; }
.history-controls { gap: 3px; }
.icon-button { border: 0; background: transparent; border-radius: 7px; width: 30px; height: 30px; font-size: 20px; color: #536259; display: grid; place-items: center; }
.icon-button:hover:not(:disabled) { background: #edf0ec; color: var(--green); }
.icon-button:disabled { opacity: .27; cursor: default; }
.view-switch { padding: 3px; border-radius: 9px; background: #e8ece7; }
.view-switch button { border: 0; color: #69776e; background: transparent; font-size: 11px; font-weight: 700; padding: 8px 13px; border-radius: 7px; white-space: nowrap; }
.view-switch button span { margin-right: 5px; }
.view-switch button.active { background: white; color: var(--green); box-shadow: 0 2px 8px rgba(30, 52, 38, .1); }
.top-actions { justify-content: flex-end; gap: 9px; min-width: 0; }
.account-dashboard-link,.account-dashboard-link:visited { display:inline-flex; align-items:center; gap:5px; color:var(--green); text-decoration:none; white-space:nowrap; }
.account-dashboard-link:hover { background:#f3f7f2; color:#174b31; }
.save-state { display: flex; align-items: center; gap: 6px; color: #758279; font-size: 10px; white-space: nowrap; }
.save-state i { width: 7px; height: 7px; border-radius: 50%; background: #4ac282; box-shadow: 0 0 0 3px rgba(74,194,130,.12); }
.save-state.saving i { background: #eaa55f; animation: pulse 1s infinite; }
.avatars { display: flex; padding-left: 5px; }
.avatar { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #fafbf8; border-radius: 50%; margin-left: -6px; background: #4c705d; color: white; font-size: 8px; font-weight: 800; letter-spacing: .03em; }
.avatar:nth-child(2) { background: #b86e46; }
.avatar:nth-child(3) { background: #547da6; }
.button { border-radius: 8px; border: 1px solid var(--line); padding: 9px 14px; font-weight: 700; font-size: 11px; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button.secondary { background: #fff; }
.button.primary { background: var(--green); color: white; border-color: var(--green); box-shadow: 0 5px 14px rgba(29,91,59,.2); }
.button.primary:hover { background: #174b31; }
.button.primary span { margin-right: 4px; }

.panel { z-index: 20; background: var(--panel); min-height: 0; }
.library-panel { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.inspector-panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.panel-heading, .inspector-header { padding: 18px 17px 12px; display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading h2, .inspector-header h2 { font-size: 15px; line-height: 1.25; margin: 4px 0 0; font-weight: 750; }
.eyebrow { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; color: #839087; font-weight: 500; }
.panel-collapse { margin-top: 2px; }
.search-wrap { margin: 0 15px 10px; position: relative; }
.search-wrap span { position: absolute; left: 11px; top: 8px; color: #718078; font-size: 17px; }
.search-wrap input { width: 100%; height: 35px; border: 1px solid #dde4de; background: #fff; border-radius: 7px; padding: 0 10px 0 33px; font-size: 11px; outline: 0; }
.search-wrap input:focus { border-color: #79ad90; box-shadow: 0 0 0 3px rgba(50, 130, 84, .08); }
.library-scroll, .inspector-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd4cd transparent; }
.library-scroll { flex: 1; padding: 0 14px 12px; }
.asset-section { border-top: 1px solid #e6ebe7; padding: 7px 0 11px; }
.section-title, .property-title { width: 100%; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 8px 1px; }
.section-title span, .property-title span { font-family: var(--mono); color: #66756c; font-size: 8px; letter-spacing: .13em; font-weight: 500; }
.section-title i, .property-title i { font-style: normal; color: #8a978f; }
.asset-grid { display: grid; gap: 6px; }
.asset-grid.two-up { grid-template-columns: 1fr 1fr; }
.asset-card { position: relative; width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px; border: 1px solid #e1e6e2; border-radius: 8px; background: #fff; text-align: left; transition: .16s ease; }
.asset-card:hover { border-color: #86b59a; transform: translateY(-1px); box-shadow: 0 5px 15px rgba(29, 62, 41, .09); }
.asset-card.dragging { opacity: .5; }
.asset-card > span:nth-child(2) { min-width: 0; }
.asset-card b { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-card small { display: block; margin-top: 2px; color: #849088; font-size: 8px; white-space: nowrap; }
.asset-card em { margin-left: auto; width: 19px; height: 19px; border-radius: 5px; background: #eff4ef; color: var(--green); display: grid; place-items: center; font-style: normal; }
.asset-card.compact { display: block; padding: 7px; }
.asset-card.compact .asset-icon { width: 100%; height: 42px; margin-bottom: 7px; }
.asset-icon { flex: 0 0 auto; width: 48px; height: 36px; border-radius: 5px; position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #e3e8e3, #c5cec6); color: #42604f; font-family: var(--mono); }
.flag-icon { background: linear-gradient(#dfe9e2 0 78%, #bdc9c0 78%); }
.flag-icon i { position: absolute; left: 15px; bottom: 5px; width: 3px; height: 27px; border-radius: 2px; background: #343a37; box-shadow: 0 2px 0 2px rgba(49,58,53,.18); }
.flag-icon i:after { content: ""; position: absolute; left: 3px; top: 1px; width: 25px; height: 15px; background: #c93631; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.shed-icon:before { content: ""; width: 36px; height: 21px; margin-top: 7px; background: #53665a; clip-path: polygon(0 28%, 50% 0, 100% 28%, 100% 100%, 0 100%); }
.shed-icon i { position: absolute; width: 11px; height: 15px; background: #b5c4b8; bottom: 2px; }
.wall-icon i { width: 38px; height: 22px; border: 3px solid #64786b; border-top-width: 6px; transform: skewY(-8deg); }
.container-icon { background:linear-gradient(145deg,#dde5dd,#b7c4b9); }
.container-icon i { position:relative; width:42px; height:20px; border:2px solid #415c48; background:repeating-linear-gradient(90deg,#52735a 0 4px,#3d5945 4px 5px); box-shadow:inset 0 3px rgba(255,255,255,.16); }
.container-icon i:before,.container-icon i:after { content:""; position:absolute; top:-3px; bottom:-3px; width:3px; background:#31483a; }
.container-icon i:before { left:1px; }
.container-icon i:after { right:1px; }
.sliding-icon i { width: 43px; height: 30px; border: 2px solid #6b7c70; background: repeating-linear-gradient(90deg, #b8c3ba 0 4px, #8d9b91 4px 5px); }
.roller-icon i { width: 38px; height: 29px; border: 2px solid #677b6d; background: repeating-linear-gradient(0deg,#c6d0c8 0 4px,#96a59a 4px 5px); }
.person-icon i { width: 18px; height: 30px; border: 2px solid #607267; background: #abb7ad; }
.person-icon i:after { content: ""; float: right; margin: 13px 2px 0 0; width: 3px; height: 3px; border-radius: 50%; background: #365343; }
.window-icon i { width: 36px; height: 23px; border: 3px solid #6b8071; background: linear-gradient(145deg,#c5e2e5,#81a9af); box-shadow: inset 0 0 0 1px #ebf5f5; }
.material-icon.concrete { background: linear-gradient(145deg,#e3e4df,#aeb4ad); }
.material-icon.asphalt { background: linear-gradient(145deg,#656a65,#333936); }
.material-icon.dirt-track { background: linear-gradient(90deg,#879b73 0 24%,#b49a70 24% 31%,#879b73 31% 69%,#b49a70 69% 76%,#879b73 76%); }
.material-icon.gravel { background: radial-gradient(circle at 30% 30%,#c8ccca 0 8%,transparent 9%), radial-gradient(circle at 65% 65%,#777d79 0 7%,transparent 8%), #9fa4a1; background-size: 15px 14px; }
.material-icon.crop { background: repeating-linear-gradient(90deg,#6e9d4d 0 3px,#376b36 3px 4px,#83b45a 4px 7px,#2d5d32 7px 8px); }
.zone-icon { background: repeating-linear-gradient(-45deg,#dbe8d8 0 5px,#edf2eb 5px 10px); border: 1px dashed #719170; }
.tractor-icon { background: #e8ece4; font-size: 25px; color: #56745e; }
.tractor-icon:after { content: ""; position: absolute; border: 4px solid #56745e; width: 27px; height: 10px; border-radius: 10px; }
.large-car-icon, .small-car-icon { background: linear-gradient(145deg,#e5e9e5,#bdc8c0); }
.large-car-icon i, .small-car-icon i { position: relative; width: 45px; height: 17px; margin-top: 8px; border-radius: 6px 9px 4px 4px; background: #536b5d; box-shadow: inset 0 5px #8eaaa0; }
.small-car-icon i { width: 39px; height: 15px; border-radius: 10px 12px 4px 4px; background: #6b7f91; }
.large-car-icon i:before, .large-car-icon i:after, .small-car-icon i:before, .small-car-icon i:after { content: ""; position: absolute; bottom: -4px; width: 9px; height: 9px; border: 2px solid #303a34; border-radius: 50%; background: #b9c5bd; }
.large-car-icon i:before, .small-car-icon i:before { left: 5px; }
.large-car-icon i:after, .small-car-icon i:after { right: 5px; }
.transporter-icon { background: linear-gradient(145deg,#e5e9e5,#bdc8c0); }
.transporter-icon i { position: relative; width: 67px; height: 6px; margin-top: 15px; border-radius: 2px; background: #4b5952; box-shadow: -25px -7px 0 3px #557060; }
.transporter-icon i:before { content: ""; position: absolute; right: 0; bottom: 3px; width: 49px; height: 21px; border: 3px solid #596a61; border-left-width: 2px; background: repeating-linear-gradient(90deg,transparent 0 13px,rgba(80,98,88,.55) 13px 15px); box-shadow: inset 0 -7px #8c9c93; }
.transporter-icon i:after { content: ""; position: absolute; left: -24px; right: 3px; bottom: -8px; height: 9px; background: radial-gradient(circle,#25302a 0 42%,#99a79f 44% 57%,transparent 60%) 0 0/23px 9px repeat-x; }
.fence-icon i { width: 41px; height: 27px; border: 2px solid #52685b; background: repeating-linear-gradient(45deg,transparent 0 5px,#7f9688 5px 6px), repeating-linear-gradient(-45deg,transparent 0 5px,#7f9688 5px 6px); }
.gate-icon { background: linear-gradient(#e0e7e2 0 80%,#b8c1bb 80%); }
.gate-icon i { position: relative; width: 40px; height: 25px; border: 3px solid #52685b; background: repeating-linear-gradient(45deg,transparent 0 5px,#7f9688 5px 6px), repeating-linear-gradient(-45deg,transparent 0 5px,#7f9688 5px 6px); }
.gate-icon i:before { content: ""; position: absolute; left: -6px; right: -6px; bottom: -7px; height: 2px; background: #52685b; }
.gate-icon i:after { content: "⇆"; position: absolute; inset: 2px 0 auto; color: #2c4537; font-size: 13px; font-weight: 800; text-align: center; text-shadow: 0 1px #e2eae4; }
.cctv-icon { background: linear-gradient(#dce5df 0 74%,#bdc9c0 74%); }
.cctv-icon i { position: absolute; bottom: 4px; width: 4px; height: 27px; border-radius: 2px; background: #171b19; box-shadow: 0 3px 0 3px #313733; }
.cctv-icon:before, .cctv-icon:after { content: ""; position: absolute; z-index: 1; top: 7px; width: 20px; height: 8px; border-radius: 2px 5px 5px 2px; background: #111412; box-shadow: inset -4px 0 #53645b; transform-origin: 2px 50%; }
.cctv-icon:before { left: 23px; transform: rotate(-8deg); }
.cctv-icon:after { left: 21px; transform: rotate(82deg); }
.hedge-icon { background: linear-gradient(#dbe5d8,#b7c8b3); }
.hedge-icon i { width: 43px; height: 22px; border-radius: 45% 55% 32% 38%; background: radial-gradient(circle at 25% 40%,#62845a 0 28%,transparent 30%), radial-gradient(circle at 55% 35%,#4f754b 0 34%,transparent 36%), radial-gradient(circle at 80% 52%,#6d8e62 0 28%,transparent 30%); }
.tree-icon { background: linear-gradient(#dce8e0 0 70%,#c5d0be 70%); }
.tree-icon i { position: relative; width: 26px; height: 25px; margin-top: -6px; border-radius: 48%; background: #587b50; box-shadow: 8px 5px 0 -3px #6e9162; }
.tree-icon i:after { content: ""; position: absolute; width: 4px; height: 14px; left: 11px; top: 20px; background: #735b40; }

.viewport-wrap { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: #ced8d1; }
#scene-canvas { display: block; width: 100%; height: 100%; outline: 0; cursor: grab; }
#scene-canvas.drag-mode { cursor: grabbing; }
#scene-canvas.measure-mode { cursor: crosshair; }
.viewport-wrap.pov-active #scene-canvas { cursor: crosshair; }
.viewport-wrap.pov-active .site-chip, .viewport-wrap.pov-active .north-marker, .viewport-wrap.pov-active .viewport-toolbar, .viewport-wrap.pov-active .scene-settings, .viewport-wrap.pov-active .selection-hint, .viewport-wrap.pov-active .measure-readout, .viewport-wrap.pov-active .status-strip { opacity: 0; pointer-events: none; }
.canvas-empty { position: absolute; inset: 0; z-index: 15; display: grid; place-content: center; gap: 12px; background: #d9e2dc; text-align: center; transition: .5s; }
.canvas-empty.hidden { opacity: 0; pointer-events: none; }
.canvas-empty span { justify-self: center; width: 32px; height: 32px; border: 3px solid rgba(32, 91, 59, .2); border-top-color: var(--green); border-radius: 50%; animation: spin .9s linear infinite; }
.canvas-empty p { margin: 0; color: #587064; font-size: 11px; }
.pov-hud { display: none; position: absolute; z-index: 18; inset: 0; pointer-events: none; color: white; font-family: var(--mono); }
.pov-hud.visible { display: block; }
.pov-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 110px rgba(6,14,9,.25); }
.pov-readout { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); min-width: 230px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 10px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(17,30,22,.7); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(5,14,8,.18); }
.pov-readout b { color: #b9e676; font-size: 8px; letter-spacing: .14em; }
.pov-readout span { justify-self: end; color: #dfe9e2; font-size: 7px; letter-spacing: .08em; }
.pov-readout small { grid-column: 1 / -1; color: #aabbb0; font-size: 7px; letter-spacing: .06em; text-align: center; }
.pov-crosshair { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%); opacity: .45; transition: opacity .18s ease; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.pov-hud.locked .pov-crosshair { opacity: .92; }
.pov-crosshair i { position: absolute; display: block; background: rgba(255,255,255,.95); border-radius: 1px; }
.pov-crosshair i:nth-child(1), .pov-crosshair i:nth-child(2) { top: 12px; width: 8px; height: 1px; }
.pov-crosshair i:nth-child(1) { left: 0; }
.pov-crosshair i:nth-child(2) { right: 0; }
.pov-crosshair i:nth-child(3), .pov-crosshair i:nth-child(4) { left: 12px; width: 1px; height: 8px; }
.pov-crosshair i:nth-child(3) { top: 0; }
.pov-crosshair i:nth-child(4) { bottom: 0; }
.pov-capture { position: absolute; top: 50%; left: 50%; transform: translate(-50%,42px); min-width: 255px; padding: 13px 17px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; background: rgba(15,28,20,.82); backdrop-filter: blur(12px); text-align: center; transition: opacity .18s ease, transform .18s ease; }
.pov-capture b, .pov-capture span, .pov-capture small { display: block; }
.pov-capture b { color: #b9e676; font-size: 9px; }
.pov-capture span { margin-top: 5px; font-family: var(--sans); font-size: 11px; font-weight: 700; }
.pov-capture small { margin-top: 5px; color: #aabbb0; font-size: 7px; }
.pov-hud.locked .pov-capture { opacity: 0; transform: translate(-50%,50px); }
.pov-controls { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(16,29,21,.7); backdrop-filter: blur(10px); color: #d7e2db; font-size: 7px; white-space: nowrap; }
.pov-controls span { display: flex; align-items: center; gap: 3px; }
.pov-controls i { width: 2px; height: 2px; border-radius: 50%; background: #91a198; }
.pov-controls kbd { min-width: 18px; padding: 3px 4px; border: 1px solid rgba(255,255,255,.28); border-radius: 4px; background: rgba(255,255,255,.11); color: white; font-family: var(--mono); font-size: 6px; text-align: center; box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.pov-start-button { pointer-events:auto; display:flex; align-items:center; gap:5px; margin:-3px -5px -3px 2px; padding:5px 8px; border:1px solid rgba(183,230,117,.5); border-radius:6px; background:rgba(55,112,72,.86); color:#fff; font:700 7px var(--sans); white-space:nowrap; }
.pov-start-button:hover { background:rgba(67,135,87,.96); border-color:#b7e675; }
.pov-start-button:disabled { opacity:.65; cursor:wait; }
.pov-start-button[hidden] { display:none; }
.pov-start-button kbd { border-color:rgba(255,255,255,.36); background:rgba(255,255,255,.15); }
.site-chip { position: absolute; top: 15px; left: 16px; background: rgba(247,250,247,.88); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.6); border-radius: 8px; box-shadow: 0 6px 20px rgba(32,50,39,.12); padding: 8px 12px 8px 26px; }
.site-chip .live-dot { position: absolute; left: 11px; top: 12px; width: 7px; height: 7px; background: #44b779; border-radius: 50%; box-shadow: 0 0 0 3px rgba(68,183,121,.15); }
.site-chip.shed-focus { background: rgba(247,250,247,.95); border-color: rgba(126,176,143,.7); }
.site-chip.shed-focus .live-dot { background: #1d5b3b; box-shadow: 0 0 0 3px rgba(29,91,59,.14); }
.site-chip b { display: block; font-family: var(--mono); font-size: 10px; }
.site-chip small { color: #839188; font-size: 7px; letter-spacing: .13em; }
.north-marker { position: absolute; top: 17px; right: 18px; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(247,250,247,.8); box-shadow: 0 4px 14px rgba(28,48,35,.1); }
.north-marker:hover { background: #fff; box-shadow: 0 6px 18px rgba(28,48,35,.18); }
.north-marker.spin-enabled { cursor: grab; touch-action: none; }
.north-marker.spin-enabled.dragging { cursor: grabbing; background: #fff; box-shadow: 0 7px 22px rgba(28,48,35,.24), 0 0 0 3px rgba(50,112,73,.12); }
.north-marker b { font-family: var(--mono); font-size: 8px; position: absolute; top: 4px; color: var(--green); }
.north-marker span { font-size: 19px; margin-top: 8px; transition: transform .12s linear; transform-origin: 50% 46%; }
.viewport-toolbar { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); padding: 5px; background: rgba(250,252,249,.9); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.7); border-radius: 9px; box-shadow: 0 8px 25px rgba(26,45,32,.14); }
.viewport-toolbar .tool { display: block; width: 32px; height: 32px; border: 0; background: transparent; border-radius: 6px; color: #53655a; font-size: 18px; }
.viewport-toolbar .tool:hover, .viewport-toolbar .tool.active { background: var(--green); color: white; }
.viewport-toolbar > div { height: 1px; margin: 5px 4px; background: #dfe5df; }
.scene-settings { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; background: rgba(247,250,247,.87); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.7); border-radius: 8px; box-shadow: 0 6px 20px rgba(32,50,39,.1); overflow: hidden; }
.scene-settings button, .snap-toggle { min-width: 61px; height: 36px; padding: 0 8px; border: 0; border-left: 1px solid rgba(201,211,203,.7); background: transparent; display: flex; align-items: center; justify-content: center; gap: 5px; }
.scene-settings button:first-child { border-left: 0; }
.scene-settings button span { color: #737f77; }
.scene-settings button.active span { color: var(--green); }
.scene-settings #measure-tool.active { background:var(--green); color:#fff; }
.scene-settings #measure-tool.active span { color:#c9f0d8; }
.scene-settings small { font-family: var(--mono); font-size: 6px; letter-spacing: .08em; font-weight: 500; }
.snap-toggle input { display: none; }
.snap-toggle span { width: 20px; height: 11px; background: #aeb8b1; border-radius: 8px; padding: 2px; }
.snap-toggle span:after { content: ""; display: block; width: 7px; height: 7px; background: white; border-radius: 50%; transition: .2s; }
.snap-toggle input:checked + span { background: var(--green-2); }
.snap-toggle input:checked + span:after { transform: translateX(9px); }
.selection-hint { display: none; position: absolute; bottom: 47px; left: 50%; transform: translateX(-50%); padding: 7px 10px; border-radius: 6px; background: rgba(24,32,27,.78); color: #dce5df; font-size: 8px; backdrop-filter: blur(8px); }
.selection-hint.visible { display: flex; align-items: center; gap: 6px; }
.selection-hint kbd { font-family: var(--mono); font-size: 7px; color: white; }
.selection-hint i { width: 2px; height: 2px; border-radius: 50%; background: #9cad9f; }
.drop-hint { display: none; position: absolute; inset: 12px; place-items: center; border: 2px dashed rgba(255,255,255,.8); border-radius: 12px; background: rgba(41,104,69,.2); color: white; font-size: 14px; font-weight: 700; pointer-events: none; text-shadow: 0 1px 5px rgba(0,0,0,.3); }
.measure-readout { position:absolute; z-index:8; right:18px; bottom:58px; display:none; width:268px; padding:12px 13px; border:1px solid rgba(255,255,255,.78); border-radius:10px; background:rgba(16,35,24,.9); box-shadow:0 12px 35px rgba(12,28,18,.24); backdrop-filter:blur(12px); color:#fff; pointer-events:auto; }
.measure-readout.visible { display:block; }
.measure-readout>div { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.measure-readout>div span { color:#a8c9b4; font:500 7px var(--mono); letter-spacing:.13em; }
.measure-readout button { width:24px; height:24px; border:0; border-radius:6px; background:rgba(255,255,255,.1); color:#fff; font-size:17px; line-height:1; }
.measure-readout b,.measure-readout strong,.measure-readout small { display:block; }
.measure-readout b { font:500 18px var(--mono); letter-spacing:-.03em; }
.measure-readout strong { margin-top:5px; color:#b9e676; font:500 9px var(--mono); }
.measure-readout small { margin-top:6px; color:#adc0b4; font:400 7px/1.5 var(--mono); }
.drop-hint.visible { display: grid; }
.drop-hint span { font-size: 24px; }
.status-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 36px; padding: 0 15px; background: rgba(246,248,245,.9); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.6); display: flex; align-items: center; gap: 24px; }
.status-strip > div { display: flex; align-items: center; gap: 7px; }
.status-label { font-family: var(--mono); font-size: 6px; letter-spacing: .1em; color: #819087; }
.status-strip b { font-family: var(--mono); font-size: 8px; }
.camera-stat b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scale-bar { margin-left: auto; }
.scale-bar span { position: relative; width: 50px; height: 5px; border-bottom: 1px solid #405047; }
.scale-bar span:before, .scale-bar span:after { content: ""; position: absolute; bottom: -3px; width: 1px; height: 5px; background: #405047; }
.scale-bar span:after { right: 0; }
.scale-bar small { font-family: var(--mono); font-size: 7px; }

.inspector-header { border-bottom: 1px solid #e2e7e3; }
.inspector-scroll { flex: 1; padding-bottom: 20px; }
.object-kind { display: flex; align-items: center; gap: 7px; padding: 11px 16px; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; color: #718078; background: #f4f6f3; border-bottom: 1px solid #e2e7e3; }
.kind-swatch { width: 8px; height: 8px; border-radius: 2px; background: #344a3d; }
.object-kind b { color: #9aa59e; }
.property-section { padding: 6px 15px 11px; border-bottom: 1px solid #e1e6e2; }
.property-title { padding: 9px 0; }
.property-body.collapsed { display: none; }
.input-grid { display: grid; gap: 7px; }
.input-grid.three { grid-template-columns: repeat(3, 1fr); }
.input-grid label > span, .modal-fields label > span { display: block; margin: 0 0 4px 2px; color: #7d8a82; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; }
.input-grid label > div { display: flex; border: 1px solid #dce3dd; background: white; border-radius: 6px; overflow: hidden; }
.input-grid input { width: 100%; min-width: 0; height: 31px; border: 0; padding: 0 5px 0 8px; font-family: var(--mono); font-size: 10px; outline: 0; background: white; }
.input-grid em { display: grid; place-items: center; padding-right: 6px; color: #929e96; font-family: var(--mono); font-size: 7px; font-style: normal; }
.mini-readout { display: flex; margin-top: 9px; gap: 8px; }
.mini-readout span { flex: 1; min-width: 0; border-radius: 5px; background: #eef2ed; padding: 6px 7px; font-family: var(--mono); font-size: 6px; color: #849087; }
.mini-readout b { display: block; margin-top: 3px; color: #415248; font-size: 7px; white-space: nowrap; }
.row-select, .check-row, .colour-row { min-height: 35px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0ed; font-size: 9px; }
.row-select select { max-width: 150px; border: 0; background: transparent; text-align: right; color: #526259; font-size: 9px; outline: 0; }
.swatches { display: flex; gap: 5px; }
.swatches button { width: 19px; height: 19px; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #cbd3cc; }
.swatches button.active { box-shadow: 0 0 0 2px var(--green); }
.swatches .graphite { background: #39443f; }
.swatches .silver { background: #b5bdb8; }
.swatches .green { background: #345443; }
.swatches .sand { background: #b8aa8d; }
.swatches .container-green { background:#405b45; }
.swatches .navy { background:#27475c; }
.swatches .container-red { background:#8b4035; }
.swatches .charcoal { background:#444b47; }
.swatches .light-grey { background:#9da39f; }
.swatches .beige { background:#aa9b79; }
.container-spec-note { margin-top:8px; padding:8px; border-radius:6px; background:#eef3ee; color:#738078; font:500 7px/1.5 var(--mono); letter-spacing:.04em; }
.container-spec-note b { color:#425b4b; font-size:8px; }
.opening-list { display: grid; gap: 5px; }
.opening-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 7px; align-items: center; border: 1px solid #e0e6e1; background: #fff; padding: 6px; border-radius: 6px; }
.opening-item > span { width: 28px; height: 25px; display: grid; place-items: center; background: #e8eeea; border-radius: 4px; color: #4a6454; }
.opening-item b { font-size: 8px; display: block; }
.opening-item small { color: #87938b; font-size: 7px; }
.opening-actions { display: flex; align-items: center; gap: 1px; }
.opening-item button { border: 0; background: transparent; color: #67796e; font-size: 11px; padding: 3px 4px; border-radius: 3px; }
.opening-item button:hover { background: #edf2ed; color: #28583c; }
.opening-item button[data-remove-opening] { color: #9a776d; font-size: 13px; }
.add-opening { width: 100%; margin-top: 7px; border: 1px dashed #b7c4ba; background: #f8faf7; border-radius: 6px; color: #426650; padding: 8px; font-size: 9px; font-weight: 700; }
.add-opening span { margin-right: 4px; }
.check-row input { display: none; }
.check-row i { position: relative; width: 28px; height: 15px; border-radius: 10px; background: #b4bdb6; }
.check-row i:after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: white; transition: .2s; }
.check-row input:checked + i { background: var(--green-2); }
.check-row input:checked + i:after { transform: translateX(13px); }
.attachment-note { margin-top: 7px; padding: 7px 8px; border-radius: 6px; background: #eef4ee; color: #6e7e73; font-size: 8px; line-height: 1.45; }
.flag-label-field > span { display:block; margin:0 0 5px 2px; color:#7d8a82; font:500 7px var(--mono); letter-spacing:.08em; }
.flag-label-field input { width:100%; height:34px; border:1px solid #dce3dd; border-radius:6px; padding:0 9px; background:#fff; color:#35483c; font:500 10px var(--mono); outline:0; }
.flag-label-field input:focus { border-color:#7ea58b; box-shadow:0 0 0 2px rgba(67,113,81,.1); }
.flag-note { margin-top:7px; color:#829087; font-size:8px; line-height:1.45; }
.object-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:18px 14px 0; }
.object-actions button { min-height:32px; border:1px solid #cdd8d0; border-radius:7px; background:#f8faf7; color:#3f604b; font-size:9px; font-weight:700; }
.object-actions button:hover:not(:disabled) { border-color:#8eaa96; background:#edf4ee; }
.object-actions button span { margin-right:4px; color:#65866f; font-size:12px; }
.object-actions button:disabled { opacity:.42; cursor:not-allowed; }
.danger-action { display: block; margin: 18px auto 0; border: 0; background: transparent; color: #a35f50; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.no-selection { display: none; flex: 1; padding: 55px 28px; text-align: center; color: #748178; }
.no-selection > span { display: grid; place-items: center; margin: 0 auto 14px; width: 44px; height: 44px; border-radius: 50%; background: #edf2ed; color: #4d6857; font-size: 23px; }
.no-selection h3 { color: #35473c; margin: 0 0 6px; font-size: 13px; }
.no-selection p { font-size: 9px; line-height: 1.6; }
.inspector-panel.empty .inspector-scroll { display: none; }
.inspector-panel.empty .no-selection { display: block; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(18,28,22,.48); backdrop-filter: blur(7px); }
.modal-backdrop.visible { display: grid; animation: fadeIn .18s ease; }
.modal { position: relative; width: min(430px, 100%); padding: 28px; border-radius: 14px; background: #fbfcfa; box-shadow: 0 30px 80px rgba(15,27,19,.3); }
.modal.compact-modal { width: min(380px, 100%); }
.modal-close { position: absolute; top: 12px; right: 12px; border: 0; background: #edf1ed; width: 28px; height: 28px; border-radius: 50%; color: #5e6e64; font-size: 18px; }
.modal h2 { margin: 6px 0 8px; font-size: 22px; }
.modal > p { margin: 0 0 18px; color: #6d7b72; line-height: 1.55; font-size: 11px; }
.share-link { display: flex; border: 1px solid #d5ddd6; border-radius: 8px; overflow: hidden; }
.share-link input { flex: 1; min-width: 0; border: 0; background: white; padding: 0 12px; font-family: var(--mono); color: #526158; font-size: 9px; outline: 0; }
.share-link button { border: 0; padding: 10px 14px; background: var(--green); color: white; font-size: 10px; font-weight: 700; }
.collab-note { display: flex; gap: 10px; align-items: center; margin: 14px 0; padding: 10px; border-radius: 7px; background: #eff5ef; color: #45634f; }
.collab-note > span { font-size: 18px; }
.collab-note b, .collab-note small { display: block; }
.collab-note b { font-size: 9px; }
.collab-note small { margin-top: 2px; font-size: 8px; color: #748178; }
.name-field { display: block; }
.name-field span { display: block; margin-bottom: 5px; color: #6f7c74; font-size: 9px; }
.name-field input, .modal-fields input, .modal-fields select { width: 100%; height: 36px; border: 1px solid #d6ddd7; border-radius: 7px; background: white; padding: 0 10px; outline: 0; font-size: 10px; }
.login-password { display: block; margin-top: 15px; }
.login-password span { display: block; margin: 0 0 6px 2px; color: #6f7c74; font-size: 9px; }
.login-password input { width: 100%; height: 42px; border: 1px solid #ccd7ce; border-radius: 8px; background: white; padding: 0 12px; outline: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.login-password input:focus { border-color: #4d8967; box-shadow: 0 0 0 3px rgba(50,112,73,.1); }
.login-error { min-height: 17px; padding-top: 6px; color: #a04e42; font-size: 9px; }
.modal-done { width: 100%; margin-top: 17px; }
.modal-fields { display: grid; gap: 11px; margin-top: 18px; }
.modal-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-help { display: block; margin-top: -4px; color: #7c8981; font-size: 8px; line-height: 1.45; }
.backup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 18px 0 13px; }
.backup-actions button, .backup-actions label { min-height: 92px; display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid #dbe3dc; border-radius: 9px; background: #fff; text-align: left; cursor: pointer; transition: .18s ease; }
.backup-actions button:hover, .backup-actions label:hover { border-color: #79a88e; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(31,65,43,.09); }
.backup-actions input { display: none; }
.backup-actions > * > span { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #eaf2eb; color: var(--green); font-size: 17px; }
.backup-actions b, .backup-actions small { display: block; }
.backup-actions b { margin-top: 2px; font-size: 10px; }
.backup-actions small { margin-top: 5px; color: #7c8981; font-size: 8px; line-height: 1.4; }
.toast-stack { position: fixed; z-index: 120; right: 308px; bottom: 48px; display: grid; gap: 7px; pointer-events: none; }
.toast { min-width: 220px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; background: rgba(24,42,31,.9); backdrop-filter: blur(10px); color: white; padding: 10px 12px; box-shadow: 0 8px 25px rgba(18,32,23,.2); font-size: 9px; animation: toastIn .25s ease; }
.toast b { color: #aee2c2; margin-right: 5px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .4; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 218px minmax(360px, 1fr) 260px; }
  .save-state { display: none; }
  .status-strip { gap: 12px; }
  .toast-stack { right: 275px; }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 190px minmax(360px, 1fr); }
  .inspector-panel { position: fixed; z-index: 50; right: 0; top: 70px; bottom: 0; width: 282px; box-shadow: -15px 0 40px rgba(28,43,33,.16); transform: translateX(100%); transition: .25s; }
  .inspector-panel:not(.empty) { transform: translateX(0); }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar-centre { display: none; }
  .toast-stack { right: 16px; }
}

@media (max-width: 620px) {
  .app-shell { display: block; padding-top: 62px; }
  .topbar { position: fixed; inset: 0 0 auto; height: 62px; grid-template-columns: 1fr auto; }
  .library-panel { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 112px; border: 0; border-top: 1px solid var(--line); }
  .panel-heading, .search-wrap, .section-title { display: none; }
  .library-scroll { display: flex; overflow-x: auto; padding: 10px; }
  .asset-section { display: contents; }
  .asset-grid, .asset-grid.two-up { display: flex; flex: 0 0 auto; }
  .asset-card, .asset-card.compact { width: 92px; display: block; padding: 5px; }
  .asset-card .asset-icon, .asset-card.compact .asset-icon { width: 100%; height: 45px; margin-bottom: 4px; }
  .asset-card small, .asset-card em { display: none; }
  .viewport-wrap { height: calc(100vh - 174px); }
  .top-actions .avatars, .top-actions .secondary { display: none; }
  .top-actions .account-dashboard-link { display:inline-flex; padding:8px 10px; }
  .account-dashboard-link span { display:none; }
  .scene-settings, .status-strip, .site-chip { display: none; }
  .inspector-panel { top: 62px; bottom: 112px; }
  .app-shell.pov-mode .library-panel { display: none; }
  .app-shell.view-only-mode .library-panel, .app-shell.view-only-mode .inspector-panel { display: none; }
  .app-shell.view-only-mode .viewport-wrap { height: calc(100vh - 62px); }
  .app-shell.pov-mode .viewport-wrap { height: calc(100vh - 62px); }
  .pov-controls { max-width: calc(100% - 20px); overflow: hidden; }
}

/* Non-interactive live scene used behind the public homepage. */
body.embedded-preview { overflow: hidden; }
body.embedded-preview .app-shell { display:block !important; width:100vw; height:100vh; min-height:100vh; padding:0 !important; }
body.embedded-preview .topbar,
body.embedded-preview .library-panel,
body.embedded-preview .inspector-panel,
body.embedded-preview .pov-hud,
body.embedded-preview .site-chip,
body.embedded-preview .north-marker,
body.embedded-preview .viewport-toolbar,
body.embedded-preview .scene-settings,
body.embedded-preview .measure-readout,
body.embedded-preview .drop-hint,
body.embedded-preview .status-strip,
body.embedded-preview .toast-stack,
body.embedded-preview .modal-backdrop { display:none !important; }
body.embedded-preview .viewport-wrap { position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; min-height:100vh !important; }
body.embedded-preview #scene-canvas { width:100% !important; height:100% !important; pointer-events:none; }