:root { color-scheme: dark; }
button, input, select, textarea { font: inherit; }

.themeSelect {
  height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 5px; background: #171d1f; font-size: 12px;
}
.themeSelect select, .fieldSize select {
  border: 0; outline: 0; color: var(--text); background: transparent; font-size: 9px; font-weight: 800;
}
.fieldSize { margin: 0 16px 8px; display: grid; gap: 7px; }
.fieldSize > select, .fieldSize input, .fieldSize button {
  height: 34px; border: 1px solid #303a3d; border-radius: 4px; background: #101517; color: var(--text);
}
.fieldSize > select, .fieldSize button { padding: 0 9px; }
.fieldSize > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fieldSize label { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--muted); }
.fieldSize input { width: 100%; padding: 0 7px; }
.fieldSize button { color: var(--acid); background: #1d2517; border-color: #536324; text-transform: uppercase; font-size: 8px; font-weight: 900; }

.viewSwitch { display: flex; border: 1px solid #344044; border-radius: 5px; overflow: hidden; background: #171d1f; }
.viewSwitch button { height: 28px; padding: 0 10px; border: 0; border-right: 1px solid #344044; background: transparent; color: #839092; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.viewSwitch button:last-child { border: 0; }
.viewSwitch button.active { background: var(--acid); color: #111; }
.viewHint { display: none; position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 8px 12px; border-radius: 5px; background: #101517dd; border: 1px solid #344044; color: #b8c2be; font-size: 9px; pointer-events: none; white-space: nowrap; }
.viewHint.show { display: block; }
.stage { overflow: hidden; padding: 0; perspective: 1800px; }
.stage .meta { position: absolute; top: 12px; left: 18px; right: 18px; }
.stage .zoom { position: absolute; }
.wrap { position: absolute; left: 50%; top: 52%; transition: none; transform-origin: center; transform-style: preserve-3d; box-shadow: none; will-change: transform; }
.field { transform: none !important; transition: width .25s, height .25s; transform-style: preserve-3d; }
.view-3d .field { transform-origin: center; overflow:visible; box-shadow: 0 18px 0 #182e1b, 0 36px 65px #000c; }
.stage.view-3d { cursor: grab; }
.stage.orbiting { cursor: grabbing; }
.stage.orbiting .wrap { transition: none; }
.view-3d .ob { cursor:pointer; transform-style:preserve-3d; }
.view-2d .shape > i { box-shadow:inset 0 0 0 1px #ffffff18,0 3px 6px #0007; }
.view-3d .shape > i { transform:translateZ(var(--depth)); transform-style:preserve-3d; box-shadow:inset 0 0 0 1px #ffffff2b,0 5px 12px #0006; }
.view-3d .shape > i::before,.view-3d .shape > i::after { content:""; position:absolute; display:block; pointer-events:none; }
.view-3d .shape > i::before { left:-2px; top:calc(100% - 1px); width:calc(100% + 4px); height:var(--depth); transform-origin:top; transform:rotateX(-90deg); background:linear-gradient(90deg,color-mix(in srgb,var(--shape-color),black 34%),color-mix(in srgb,var(--shape-color),black 53%)); border:1px solid color-mix(in srgb,var(--shape-color),black 62%); }
.view-3d .shape > i::after { left:calc(100% - 1px); top:-2px; width:var(--depth); height:calc(100% + 4px); transform-origin:left; transform:rotateY(90deg); background:linear-gradient(color-mix(in srgb,var(--shape-color),black 22%),color-mix(in srgb,var(--shape-color),black 48%)); border:1px solid color-mix(in srgb,var(--shape-color),black 62%); }
.view-3d .objectNote { transform:translateX(-50%) translateZ(calc(var(--depth,40px) + 12px))!important; }

.modeTitle { display:flex; align-items:center; justify-content:center; gap:14px; }
.modeTitle label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:8px; font-weight:900; }
.modeTitle select, .propertySelect, #customMaterial { border:1px solid #344044; border-radius:4px; background:#12191b; color:var(--text); outline:0; }
.modeTitle select { height:32px; padding:0 26px 0 9px; font-size:9px; font-weight:900; }
.modeTitle > b { min-width:110px; color:var(--acid); font-size:10px; text-align:left; }
.modeHelp { margin:10px 15px 13px; padding:10px; border:1px solid #334044; border-left:3px solid var(--acid2); border-radius:4px; background:#141b1d; color:#8f9b9d; font-size:9px; line-height:1.45; }
.modeHelp b { color:var(--text); }
.propertySelect { width:100%; height:36px; margin-bottom:12px; padding:0 9px; font-size:10px; }
.measureInput { height:36px; margin-bottom:12px; display:flex; align-items:center; border:1px solid #303b3e; border-radius:4px; background:#0f1416; overflow:hidden; }
.measureInput input { min-width:0; flex:1; height:100%; padding:0 10px; border:0; outline:0; background:transparent; color:var(--text); }
.measureInput span { padding:0 10px; color:var(--muted); font-size:10px; }
.rotation input { width:68px; height:34px; border:1px solid #303b3e; background:#0f1416; color:var(--text); text-align:center; }
.rotation > b { width:auto; padding:0 6px; }
.builderForm select { width:100%; height:38px; padding:0 10px; }

body.mode-cqb .field { background-color:#202a2d; background-image:linear-gradient(#47575c55 1px,transparent 1px),linear-gradient(90deg,#47575c55 1px,transparent 1px); background-size:40px 40px; }
body.mode-cqb .mid, body.mode-cqb .spawn { display:none; }
body.mode-cqb .field::after { content:'CQB · СВОБОДНАЯ ПЛАНИРОВКА'; position:absolute; right:18px; bottom:15px; color:#6d7c80; font-size:9px; font-weight:900; letter-spacing:1px; }
.material-glass > i { background:linear-gradient(135deg,#93edff88,#1d9edc55)!important; border:2px solid #8be7ff!important; box-shadow:inset 0 0 10px #d8f9ff99!important; }
.view-3d .material-glass > i { background:linear-gradient(135deg,#b9f5ff99,#168fc477)!important; box-shadow:inset 0 0 12px #e9fcffcc,0 5px 14px #0006!important; }
.view-3d .material-glass > i::before,.view-3d .material-glass > i::after { background:linear-gradient(135deg,#72dfff66,#0d6c9466)!important; border-color:#9beaff99!important; backdrop-filter:blur(1px); }
.view-3d .material-window > i::before { background:linear-gradient(90deg,#145b8a 0 22%,#75dfff99 23% 72%,#145b8a 73%)!important; }
.view-3d .material-doorway > i::before,.view-3d .material-doorway > i::after { background:linear-gradient(#a3162a,#5e0c18)!important; }
.view-3d .material-mesh > i::before,.view-3d .material-mesh > i::after { background:repeating-linear-gradient(45deg,#a8b4ba 0 2px,#283439 2px 6px)!important; }
.material-window > i { background:#2387d0!important; border-color:#75cfff!important; }
.material-window > i:nth-child(3n+2),.material-window > i:nth-child(3n) { background:linear-gradient(#2387d0 0 24%,#8fe7ff99 25% 70%,#2387d0 71%)!important; }
.material-doorway > i { background:#e52d43!important; border-color:#ff8794!important; }
.material-mesh > i { background:repeating-linear-gradient(45deg,#a8b4ba 0 2px,#283439 2px 5px)!important; border-color:#d5dde0!important; }

#objectNote, .builderForm textarea {
  width: 100%; min-height: 64px; resize: vertical; padding: 9px 10px; border: 1px solid #303b3e;
  border-radius: 4px; outline: none; background: #0f1416; color: var(--text); font-size: 10px; line-height: 1.45;
}
#objectNote:focus, .builderForm textarea:focus { border-color: var(--acid2); box-shadow: 0 0 0 3px #bdf32112; }
.objectDescription { margin: -8px 0 2px; padding: 10px; border-left: 2px solid var(--acid2); background: #1b2225; color: #899496; font-size: 9px; line-height: 1.5; }
.objectNote {
  position: absolute; left: 50%; top: -31px; transform: translateX(-50%);
  width: max-content; max-width: 170px; padding: 4px 7px; border-radius: 3px; background: #0b0e0eea;
  border: 1px solid #596365; color: white; font-size: 9px; font-weight: 800; line-height: 1.2; white-space: normal; text-align: center; z-index: 7;
}

html[data-theme="light"] {
  color-scheme: light; --bg: #e8ece9; --panel: #f7f9f7; --panel2: #fff; --panel3: #e9eeea;
  --line: #ccd4ce; --text: #18201b; --muted: #69756e;
}
html[data-theme="light"] body, html[data-theme="light"] header { background: #f8faf8; color: #18201b; }
html[data-theme="light"] header { border-color: #cbd4cd; box-shadow: 0 4px 20px #24312820; }
html[data-theme="light"] .title b, html[data-theme="light"] .catalogItem b, html[data-theme="light"] .preview b { color: #1d2820; }
html[data-theme="light"] nav button, html[data-theme="light"] .themeSelect, html[data-theme="light"] .zoom, html[data-theme="light"] .zoom > *, html[data-theme="light"] .viewSwitch { background: #fff; border-color: #cbd4cd; }
html[data-theme="light"] .left, html[data-theme="light"] .right { background: #f7f9f7; }
html[data-theme="light"] .catalogItem { border-color: #dce2dd; }
html[data-theme="light"] .catalogItem:hover, html[data-theme="light"] .rotation button, html[data-theme="light"] .modalFooter button { background: #edf1ee; }
html[data-theme="light"] .stage { background-color: #dce3dd; background-image: radial-gradient(#b7c2b9 1px,transparent 1px); }
html[data-theme="light"] .preview, html[data-theme="light"] .objectDescription { background: #eef2ef; border-color: #d0d8d2; }
html[data-theme="light"] .inputs span, html[data-theme="light"] .fieldSize > select, html[data-theme="light"] .fieldSize input, html[data-theme="light"] #objectNote, html[data-theme="light"] .builderForm textarea, html[data-theme="light"] .builderForm input[type=text] { background: #fff; border-color: #cbd4cd; color: #18201b; }
html[data-theme="light"] .inputs input { color: #18201b; }
html[data-theme="light"] .modal { background: #d9dfd9d9; }
html[data-theme="light"] .modalCard { background: #f7f9f7; border-color: #bcc7bf; box-shadow: 0 30px 100px #34433b55; }
html[data-theme="light"] .canvasBox, html[data-theme="light"] .builderPreview { background: #edf1ee; border-color: #ccd5ce; }
html[data-theme="light"] .builderGrid button { background: #fff; border-color: #bec9c1; }
html[data-theme="light"] .themeSelect select, html[data-theme="light"] .fieldSize select { color: #18201b; }
html[data-theme="light"] .modeTitle select, html[data-theme="light"] .propertySelect, html[data-theme="light"] #customMaterial, html[data-theme="light"] .measureInput, html[data-theme="light"] .rotation input { background:#fff; border-color:#cbd4cd; color:#18201b; }
html[data-theme="light"] .modeHelp { background:#eef2ef; border-color:#cbd4cd; color:#64716a; }
html[data-theme="light"] body.mode-cqb .field { background-color:#e9f1f4; background-image:linear-gradient(#8da2aa55 1px,transparent 1px),linear-gradient(90deg,#8da2aa55 1px,transparent 1px); }

@media (max-width: 1120px) {
  header { grid-template-columns: 270px 1fr 420px; }
  .brand small { display: none; }
}