*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Consolas', 'Courier New', monospace; font-size: 12px; background: #1a1e24; color: #c0c8d0;
       overflow: hidden; height: 100vh; display: flex; flex-direction: column; }

#menubar { display: flex; align-items: center; background: #222830; border-bottom: 1px solid #3a4050;
           padding: 0 8px; height: 30px; flex-shrink: 0; gap: 4px; white-space: nowrap; overflow: hidden; }
#menubar > * { flex-shrink: 0; }
#menubar .logo { font-weight: bold; color: #60a8e0; margin-right: 8px; font-size: 13px; }
#menubar .menu-item { padding: 3px 10px; cursor: pointer; border-radius: 3px; color: #a0aab8; user-select: none; }
#menubar .menu-item:hover { background: #2e3642; color: #e0e8f0; }
#menubar .menu-item.disabled { color: #4a5464; cursor: default; }
#menubar .menu-item.disabled:hover { background: none; }
#menubar .sep { width: 1px; background: #3a4050; height: 16px; margin: 0 4px; }
#menubar .spacer { flex: 1; }
#menubar .lbl { color: #607080; font-size: 10px; text-transform: uppercase; margin-left: 6px; }
.inline-select { background: #1c222c; color: #a0b0c0; border: 1px solid #2e3848; font-size: 11px; padding: 2px 4px; }
.seg { display: inline-flex; border: 1px solid #2e3848; border-radius: 3px; overflow: hidden; }
.seg button { background: #1c222c; color: #8090a8; border: none; padding: 2px 8px; font-size: 11px; cursor: pointer; font-family: inherit; }
.seg button.active { background: #1a3050; color: #80c0f0; }
.project-title { color: #708090; margin-left: 10px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

#main { display: flex; flex: 1; overflow: hidden; }
#center { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#workspace-container { flex: 1; position: relative; background: #141820; overflow: hidden; min-height: 200px; }

#bottom { height: 210px; border-top: 1px solid #2a3040; background: #181e28; display: flex; flex-direction: column; flex-shrink: 0; }
.bottom-tabs { display: flex; background: #151b24; border-bottom: 1px solid #2a3040; }
.btab { padding: 4px 14px; cursor: pointer; font-size: 11px; color: #607080; border-bottom: 2px solid transparent; }
.btab.active { color: #80b8e0; border-bottom-color: #4080c0; }
.bottom-body { flex: 1; overflow: auto; }
.data-table { border-collapse: collapse; width: 100%; font-size: 11px; }
.data-table th { position: sticky; top: 0; background: #1c2430; color: #7090a8; font-weight: normal; text-align: right;
                 padding: 3px 10px; border-bottom: 1px solid #2a3040; white-space: nowrap; }
.data-table td { text-align: right; padding: 2px 10px; color: #a8c0d0; white-space: nowrap; }
.data-table tr:hover td, .data-table tr.hl td { background: #22304a; }
.data-table td.neg { color: #e0a080; }
.data-table td.pos { color: #90d0a0; }

#right-panel { width: 310px; background: #1e2430; border-left: 1px solid #2a3040; display: flex; flex-direction: column; flex-shrink: 0; }
#panel-tabs { display: flex; background: #181e28; border-bottom: 1px solid #2a3040; }
.panel-tab { flex: 1; padding: 6px 0; text-align: center; cursor: pointer; font-size: 10px; color: #607080;
             border-bottom: 2px solid transparent; user-select: none; }
.panel-tab.active { color: #80b8e0; border-bottom-color: #4080c0; }
#panel-content { flex: 1; overflow-y: auto; padding: 8px; }

.prop-section { margin-bottom: 12px; }
.prop-section-header { font-size: 10px; color: #607080; text-transform: uppercase; letter-spacing: 1px;
                       padding: 3px 0; border-bottom: 1px solid #252d3a; margin-bottom: 6px; }
.prop-row { display: flex; align-items: center; margin-bottom: 4px; gap: 4px; }
.prop-label { width: 112px; color: #8090a8; font-size: 11px; flex-shrink: 0; }
.prop-value { flex: 1; background: #141820; border: 1px solid #252e3a; border-radius: 2px; color: #c0d0e0;
              padding: 3px 5px; font-size: 11px; font-family: monospace; width: 0; min-width: 0; }
.prop-value:focus { outline: none; border-color: #4080c0; background: #181e28; }
.prop-value.invalid { border-color: #c04030; color: #e08070; }
.prop-value.computed { background: #1a2030; color: #7090a8; border-style: dashed; cursor: default; }
.prop-select { flex: 1; background: #141820; border: 1px solid #252e3a; border-radius: 2px; color: #c0d0e0; padding: 3px 4px; font-size: 11px; min-width: 0; }
.prop-unit { color: #506070; font-size: 10px; width: 34px; flex-shrink: 0; }
.prop-checkbox { width: 14px; height: 14px; }
.check-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; cursor: pointer; color: #a0b0c0; font-size: 11px; }
.hint { color: #506070; font-size: 10px; margin: 2px 0 6px; line-height: 1.4; }
.warning-text { color: #e08040; font-size: 10px; margin: 2px 0; padding: 3px 6px; background: #2a1a10; border-radius: 2px; }
.btn { background: #2a3440; border: 1px solid #3a4858; border-radius: 3px; color: #a0b8c8; padding: 3px 10px;
       cursor: pointer; font-size: 11px; font-family: inherit; }
.btn:hover { background: #354050; color: #e0f0ff; }
.btn.primary { background: #1a3a5a; border-color: #3060a0; color: #80b8e0; }
.btn.danger:hover { background: #4a2020; border-color: #a04040; }
.btn-row { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }

.item-list { margin-bottom: 8px; }
.list-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid #2a3040; border-radius: 3px;
             margin-bottom: 3px; cursor: pointer; background: #1a202a; }
.list-item:hover { border-color: #3a5070; }
.list-item.selected { border-color: #4080c0; background: #1a3050; }
.list-item 
.list-item .iname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#statusbar { height: 22px; background: #181e28; border-top: 1px solid #2a3040; display: flex; align-items: center;
             padding: 0 8px; gap: 16px; flex-shrink: 0; }
.status-item { font-size: 10px; color: #506070; }
#status-msg { flex: 1; }
.status-item.warn { color: #e08040; }
.status-item.ok { color: #50a070; }

#dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; }
#dialog-overlay.visible { display: flex; }
.dialog { background: #1e2630; border: 1px solid #3a4858; border-radius: 6px; padding: 18px; min-width: 340px; max-width: 480px; }
.dialog h3 { color: #80b0e0; margin-bottom: 12px; font-size: 14px; }
.dialog input[type=text] { width: 100%; background: #141820; border: 1px solid #252e3a; color: #c0d0e0; padding: 5px 7px; font-family: monospace; }
.dialog .file-list { max-height: 220px; overflow-y: auto; margin: 6px 0; border: 1px solid #252e3a; }
.dialog .file-item { padding: 4px 8px; cursor: pointer; }
.dialog .file-item:hover, .dialog .file-item.selected { background: #22304a; }
.dialog .dialog-btns { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }

.menu-item.active { background: #2a4058; color: #e0f0ff; }
#workspace { padding: 12px; overflow: auto; height: 100%; }
body.light { background: #eef0f3; color: #22262c; }