:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, "Noto Sans", "Segoe UI Symbol", sans-serif;
  --black: #000;
  --white: #fff;
  --grey: #a7a7a7;
  --grey-2: #6f6f6f;
  --line: rgba(255,255,255,.28);
  --line-strong: rgba(255,255,255,.65);
  --panel: rgba(0,0,0,.90);
  --panel-soft: rgba(0,0,0,.72);
  --danger: #fff;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#000; color:#fff; }
body { overscroll-behavior:none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { border-radius:0; }
button { touch-action:manipulation; }

#app, #canvas-host, #canvas-host canvas { position:absolute; inset:0; width:100%; height:100%; }
#canvas-host canvas { display:block; cursor:grab; touch-action:none; }
#canvas-host canvas:active { cursor:grabbing; }
body.builder-object-drag #canvas-host canvas { cursor:move; }

.is-hidden { display:none !important; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.start-screen { position:absolute; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:#000; }
.start-card { width:min(600px,100%); border:1px solid #fff; padding:clamp(28px,5vw,58px); text-align:left; }
.start-card h1 { margin:6px 0 14px; font-size:clamp(42px,9vw,84px); font-weight:400; letter-spacing:-.055em; line-height:.92; }
.start-copy { max-width:500px; color:#c3c3c3; line-height:1.5; margin:0 0 28px; }
.start-actions { display:grid; gap:10px; }
.eyebrow { margin:0; color:var(--grey); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.micro { margin:5px 0 0; color:var(--grey); font-size:10px; line-height:1.45; }
.center { text-align:center; margin-top:18px; }

.primary-button, .button, .small-button, .text-button, .slot-button, .chip, select, input[type="text"], input[type="number"], input[type="url"], input[type="color"], textarea {
  border:1px solid #fff;
  background:#000;
  color:#fff;
}
.primary-button, .button, .small-button, .text-button, .slot-button, .chip { cursor:pointer; }
.primary-button { min-height:52px; padding:13px 16px; font-size:13px; letter-spacing:.12em; }
.primary-button:hover, .primary-button:focus-visible, .button:hover:not(:disabled), .small-button:hover:not(:disabled), .slot-button:hover:not(:disabled), .chip:hover:not(:disabled) { background:#fff; color:#000; }
.button { width:100%; min-height:40px; padding:9px 11px; font-size:11px; letter-spacing:.08em; }
.small-button { min-height:32px; padding:7px 9px; font-size:10px; letter-spacing:.07em; }
.text-button { border:0; background:transparent; padding:4px; color:#fff; font-size:10px; letter-spacing:.12em; }
.text-button:hover { text-decoration:underline; }
button:disabled { opacity:.35; cursor:default; }

.floating-button { position:absolute; z-index:45; min-height:36px; border:1px solid #fff; background:rgba(0,0,0,.78); color:#fff; padding:7px 10px; font-size:10px; letter-spacing:.1em; backdrop-filter:blur(8px); }
.top-left { left:14px; top:14px; }
.panel-show { left:14px; top:58px; }
.inspector-show { right:14px; top:14px; }

.side-panel { position:absolute; top:58px; bottom:0; z-index:40; width:min(390px,calc(100vw - 28px)); overflow-y:auto; background:var(--panel); backdrop-filter:blur(15px); }
.left-panel { left:0; border-right:1px solid var(--line); }
.right-panel { right:0; border-left:1px solid var(--line); }
.panel-header { position:sticky; top:0; z-index:3; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.96); }
.panel-header h2 { margin:3px 0 0; font-size:22px; font-weight:400; letter-spacing:-.025em; }
.panel-content { padding:18px; }

.section { padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.section:last-child { border-bottom:0; }
.section-title-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.section h3, .field-label { margin:0; font-size:10px; font-weight:400; letter-spacing:.13em; text-transform:uppercase; }
.section-note { color:var(--grey); font-size:10px; line-height:1.45; margin:7px 0 0; }

.scene-slot, .library-slot, .stack-row { border:1px solid var(--line); margin-bottom:8px; }
.scene-slot.is-active, .stack-row.is-active { border-color:#fff; }
.slot-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; border-bottom:1px solid var(--line); }
.slot-name { min-width:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.slot-meta { color:var(--grey); font-size:9px; white-space:nowrap; }
.slot-body { padding:9px; display:grid; gap:7px; }
.slot-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.slot-file { min-width:0; color:var(--grey); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-button { min-height:31px; padding:6px 7px; font-size:9px; letter-spacing:.06em; }
.slot-button.full { grid-column:1/-1; }
.chip { display:flex; align-items:center; justify-content:center; min-height:31px; padding:6px 8px; font-size:9px; letter-spacing:.06em; border-style:dashed; }
.chip[draggable="true"] { cursor:grab; }
.chip[draggable="true"]:active { cursor:grabbing; }

.stack-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:9px; }
.stack-row input[type="checkbox"] { width:16px; height:16px; accent-color:#fff; }
.stack-main { min-width:0; cursor:pointer; }
.stack-title { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stack-sub { margin-top:2px; color:var(--grey); font-size:9px; }
.stack-x { border:0; background:transparent; color:#fff; font-size:16px; cursor:pointer; }

.field { display:grid; gap:6px; margin-bottom:12px; }
.field:last-child { margin-bottom:0; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.field-row.three { grid-template-columns:1fr 1fr 1fr; }
.field label { color:#d7d7d7; font-size:10px; }
input[type="text"], input[type="number"], input[type="url"], select, textarea { width:100%; min-height:36px; padding:8px; outline:none; }
textarea { min-height:130px; resize:vertical; line-height:1.4; }
input[type="range"] { width:100%; accent-color:#fff; }
input[type="color"] { width:100%; height:36px; padding:2px; }
.check-row { display:flex; align-items:center; gap:8px; min-height:28px; font-size:10px; }
.check-row input { accent-color:#fff; }
.radio-grid { display:grid; gap:5px; }
.inline-actions { display:flex; gap:7px; }
.inline-actions > * { flex:1; }

.panorama-title { position:absolute; top:max(16px,env(safe-area-inset-top)); left:50%; z-index:25; max-width:min(760px,calc(100vw - 80px)); transform:translateX(-50%); padding:8px 12px; border:1px solid var(--line-strong); background:rgba(0,0,0,.68); font-size:12px; letter-spacing:.05em; pointer-events:none; backdrop-filter:blur(8px); }
.builder-banner { position:absolute; z-index:28; left:50%; top:60px; transform:translateX(-50%); padding:9px 13px; border:1px solid #fff; background:#000; font-size:10px; letter-spacing:.08em; }

.viewer-navigation { position:absolute; z-index:30; right:max(16px,env(safe-area-inset-right)); bottom:max(43px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:auto auto auto; border:1px solid #fff; background:rgba(0,0,0,.76); }
.viewer-navigation button { min-height:40px; border:0; border-right:1px solid #fff; background:transparent; color:#fff; padding:9px 11px; font-size:9px; letter-spacing:.08em; cursor:pointer; }
.viewer-navigation button:last-child { border-right:0; }
.viewer-navigation button:hover:not(:disabled) { background:#fff; color:#000; }

.empty-state { position:absolute; inset:0; z-index:5; display:grid; place-content:center; justify-items:center; gap:10px; pointer-events:none; }
.empty-mark { width:84px; height:84px; display:grid; place-items:center; border:1px solid #fff; border-radius:50%; font-size:19px; }
.empty-state h2 { margin:0; font-weight:400; font-size:28px; }
.empty-state p { margin:0; color:var(--grey); }

.status-bar { position:absolute; z-index:24; left:0; right:0; bottom:0; min-height:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 12px; border-top:1px solid var(--line); background:rgba(0,0,0,.78); color:#c7c7c7; font-size:9px; letter-spacing:.04em; pointer-events:none; }

.vr-help { position:absolute; z-index:26; left:50%; bottom:55px; transform:translateX(-50%); border:1px solid var(--line-strong); background:rgba(0,0,0,.65); padding:7px 10px; font-size:9px; letter-spacing:.08em; pointer-events:none; }

.modal { position:absolute; inset:0; z-index:120; display:grid; place-items:center; padding:22px; background:rgba(0,0,0,.75); }
.modal-card { width:min(900px,100%); max-height:min(760px,88vh); overflow:auto; border:1px solid #fff; background:#000; }
.modal-header { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 16px; border-bottom:1px solid var(--line); background:#000; }
.modal-header h2 { margin:0; font-size:18px; font-weight:400; }
.modal-body { padding:18px; line-height:1.55; overflow-wrap:anywhere; }
.modal-body img, .modal-body video, .modal-body iframe { max-width:100%; }
.modal-body a { color:#fff; }
.preview-frame { width:100%; min-height:420px; border:1px solid var(--line); background:#111; }

.drop-hint { position:absolute; z-index:70; inset:18px; display:grid; place-items:center; border:1px dashed #fff; background:rgba(0,0,0,.55); font-size:12px; letter-spacing:.15em; pointer-events:none; }

.mode-badge { display:inline-block; border:1px solid var(--line); padding:3px 5px; font-size:8px; letter-spacing:.07em; }
.warning { border:1px solid #fff; padding:10px; font-size:10px; line-height:1.45; }
.spacer-6 { height:6px; }

@media (max-width: 800px) {
  .side-panel { width:min(360px,calc(100vw - 16px)); }
  .panel-header { padding:16px; }
  .panel-content { padding:14px; }
  .panorama-title { top:12px; max-width:calc(100vw - 150px); font-size:10px; }
  .viewer-navigation { right:10px; bottom:38px; }
}

.loading-overlay { position:absolute; inset:0; z-index:220; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.88); }
.loading-card { width:min(520px,100%); border:1px solid #fff; padding:28px; text-align:center; background:#000; }
.loading-card h2 { margin:16px 0 8px; font-size:24px; font-weight:400; letter-spacing:.05em; }
.loading-card p { margin:0; color:var(--grey); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.loading-spinner { width:34px; height:34px; margin:0 auto; border:1px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:in3spin .8s linear infinite; }
@keyframes in3spin { to { transform:rotate(360deg); } }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.help-grid > div { border:1px solid var(--line); padding:14px; }
.help-grid h3 { margin:0 0 9px; font-size:11px; font-weight:400; letter-spacing:.11em; }
.help-grid p { margin:0; color:#d2d2d2; font-size:12px; line-height:1.65; }
@media (max-width:700px){ .help-grid{grid-template-columns:1fr;} }

.tour-audio-mute { position:absolute; z-index:32; right:max(16px,env(safe-area-inset-right)); bottom:max(43px,env(safe-area-inset-bottom)); border:1px solid #fff; background:rgba(0,0,0,.78); color:#fff; min-height:38px; padding:0 14px; font:10px Arial,sans-serif; letter-spacing:.08em; cursor:pointer; }
.tour-audio-mute:hover { background:#fff; color:#000; }
@media (max-width:700px){ .tour-audio-mute { right:10px; bottom:38px; } }