*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #1a1a1e;--bg-panel: #252528;--bg-viewport: #2d2d32;--border-color: #3a3a40;--text-primary: #e0e0e0;--text-secondary: #888;--accent: #4a9eff;--accent-hover: #6ab0ff;--button-bg: #3a3a42;--button-hover: #4a4a52;--button-active: #4a9eff}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:13px;background:var(--bg-dark);color:var(--text-primary);overflow:hidden;height:100vh}#app{display:flex;flex-direction:column;height:100vh}#menu-bar{display:flex;background:var(--bg-panel);border-bottom:1px solid var(--border-color);padding:0 8px;height:28px;align-items:center}.menu-item{padding:6px 12px;cursor:pointer;border-radius:3px}.menu-button{background:transparent;border:none;color:var(--text-primary);padding:6px 12px;cursor:pointer;border-radius:3px;font-size:13px}.menu-button:hover,.menu-item:hover{background:var(--button-hover)}.menu-spacer{flex:1}.play-button{background:#2d8a2d;color:#fff;border:none;padding:4px 16px;border-radius:3px;font-weight:700;cursor:pointer;font-size:12px}.play-button:hover{background:#3aa33a}.play-button.playing{background:#c44}.play-button.playing:hover{background:#d55}#app.play-mode #tool-panel,#app.play-mode #grid-view,#app.play-mode #console-panel,#app.play-mode #properties-panel,#app.play-mode #splitter-v,#app.play-mode #splitter-v2,#app.play-mode #splitter-h,#app.play-mode #status-bar{display:none!important}#app.play-mode #viewport-area{width:100%;padding:0;gap:0}#app.play-mode #viewport-row-top{flex:1 1 0!important;height:auto!important}#app.play-mode #viewport-row-bottom{display:none!important}#app.play-mode #view-3d{width:100%!important;flex:1}#main-content{display:flex;flex:1;overflow:hidden}#tool-panel{width:140px;background:var(--bg-panel);border-right:1px solid var(--border-color);padding:8px;overflow-y:auto}.panel-section{margin-bottom:16px}.panel-header{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border-color)}.tool-buttons{display:flex;flex-direction:column;gap:4px}.tool-btn{background:var(--button-bg);border:1px solid var(--border-color);color:var(--text-primary);padding:6px 8px;border-radius:3px;cursor:pointer;font-size:12px;text-align:left}.tool-btn:hover{background:var(--button-hover)}.tool-btn.active{background:var(--button-active);border-color:var(--accent)}#viewport-area{flex:1;display:flex;flex-direction:column;padding:4px;gap:4px}#viewport-row-top,#viewport-row-bottom{display:flex;gap:4px;min-height:0}#viewport-row-top{flex:7}#viewport-row-bottom{flex:3}.viewport{flex:1;background:var(--bg-viewport);border:1px solid var(--border-color);border-radius:3px;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}#view-3d{position:relative}.viewport-header{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:var(--bg-panel);border-bottom:1px solid var(--border-color);font-size:11px}.viewport-title{font-weight:600}.viewport-info{color:var(--text-secondary)}#grid-canvas,#three-canvas{flex:1;width:100%;display:block}#play-hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding:24px;z-index:5}#benchmark-hud{position:absolute;top:14px;left:14px;width:180px;padding:10px 12px;border:1px solid rgba(160,220,255,.28);border-radius:6px;background:#080d14c7;color:#eaf6ff;font-family:Consolas,Monaco,monospace;font-size:12px;box-shadow:0 14px 36px #00000052}#benchmark-hud[hidden]{display:none}.benchmark-hud-title{margin-bottom:8px;color:#ffcf8a;font-weight:700;text-transform:uppercase}.benchmark-hud-grid{display:grid;grid-template-columns:1fr auto;gap:4px 10px}.benchmark-hud-grid span{color:#eaf6ffb8}.benchmark-hud-grid strong{color:#fff;text-align:right}#bench-status{margin-top:8px;padding-top:7px;border-top:1px solid rgba(160,220,255,.18);color:#eaf6ffb8}#play-message{max-width:min(520px,90%);padding:12px 18px;border:1px solid rgba(160,220,255,.35);border-radius:999px;background:#08101cd1;color:#eaf6ff;font-size:18px;font-weight:600;letter-spacing:.02em;text-align:center;opacity:0;transform:translateY(18px);transition:opacity .18s ease,transform .18s ease;box-shadow:0 14px 36px #00000059}#play-message.visible{opacity:1;transform:translateY(0)}#app:not(.play-mode) #play-hud{display:none}.splitter{background:var(--border-color);flex-shrink:0;touch-action:none}.splitter.vertical{width:4px;cursor:col-resize}.splitter.horizontal{height:4px;cursor:row-resize}.splitter:hover,.splitter.dragging{background:var(--accent)}body.is-resizing{-webkit-user-select:none;user-select:none}#console-output{flex:1;padding:8px;font-family:Consolas,Monaco,monospace;font-size:12px;overflow-y:auto;background:#1e1e22}#console-input{background:var(--bg-dark);border:none;border-top:1px solid var(--border-color);padding:8px;color:var(--text-primary);font-family:Consolas,Monaco,monospace;font-size:12px}#console-input:focus{outline:none;background:#222228}#properties-content{padding:8px;flex:1;overflow-y:auto}.placeholder-text{color:var(--text-secondary);font-style:italic}#texture-browser{border-top:1px solid var(--border-color);padding:8px}#texture-preview{min-height:150px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-dark);margin-top:8px;overflow:hidden}.texture-preview-media{height:96px;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.04) 75%,rgba(255,255,255,.04)),linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.04) 75%,rgba(255,255,255,.04));background-size:20px 20px;background-position:0 0,10px 10px}.texture-preview-media img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.texture-preview-placeholder{color:var(--text-secondary);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.texture-preview-meta{padding:10px;display:grid;gap:4px}.texture-preview-name{font-weight:600}.texture-preview-selection,.texture-preview-hint{color:var(--text-secondary);font-size:11px;line-height:1.4}#apply-texture-btn{width:100%;margin-top:8px;background:var(--button-bg);border:1px solid var(--border-color);color:var(--text-primary);padding:7px 10px;border-radius:4px;cursor:pointer;font-size:12px}#apply-texture-btn:hover:not(:disabled){background:var(--button-hover)}#apply-texture-btn:disabled{opacity:.55;cursor:not-allowed}#link-support-beam-btn,#clear-support-link-btn{width:100%;margin-top:6px;background:var(--button-bg);border:1px solid var(--border-color);color:var(--text-primary);padding:7px 10px;border-radius:4px;cursor:pointer;font-size:12px}#link-support-beam-btn:hover:not(:disabled),#clear-support-link-btn:hover:not(:disabled){background:var(--button-hover)}#link-support-beam-btn:disabled,#clear-support-link-btn:disabled{opacity:.55;cursor:not-allowed}#texture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px;margin-top:8px}.texture-item{aspect-ratio:1;background:var(--button-bg);border:2px solid transparent;border-radius:3px;cursor:pointer;overflow:hidden}.texture-item:hover,.texture-item.selected{border-color:var(--accent)}.texture-item img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.texture-item-label{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-secondary);text-transform:uppercase}#status-bar{display:flex;justify-content:space-between;padding:4px 12px;background:var(--bg-panel);border-top:1px solid var(--border-color);font-size:11px;color:var(--text-secondary)}.property-group{margin-bottom:12px}.property-row{display:flex;align-items:center;margin-bottom:6px}.property-label{width:80px;font-size:11px;color:var(--text-secondary)}.property-input{flex:1;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:3px;padding:4px 6px;color:var(--text-primary);font-size:12px}.property-input:focus{outline:none;border-color:var(--accent)}.property-checkbox{margin-right:8px}.log-info{color:var(--text-primary)}.log-warn{color:#fc0}.log-error{color:#f66}.log-success{color:#6f6}.grid-controls{display:flex;align-items:center;gap:4px;font-size:11px}.grid-controls select{background:var(--bg-dark);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);padding:2px 4px;font-size:11px}.grid-controls label{display:flex;align-items:center;gap:2px;color:var(--text-secondary)}.grid-controls input[type=checkbox]{accent-color:var(--accent)}
