:root{color-scheme:light dark;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#111827;color:#e5e7eb}body,html,#root{margin:0;padding:0;width:100%;height:100%}*:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}body{display:flex;justify-content:center;align-items:stretch}.app-shell{display:grid;grid-template-columns:var(--sidebar-width, 320px) 6px 1fr;grid-template-rows:auto 1fr;width:100%;height:100%;background:#0f172a}.sidebar{grid-row:1 / span 2;background:#0f172ae6;border-right:1px solid rgba(148,163,184,.2);padding:1.5rem;overflow-y:auto}.sidebar-divider{grid-row:1 / span 2;width:6px;cursor:col-resize;background:#94a3b833}.sidebar-divider:hover{background:#94a3b859}.main-content{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;overflow:hidden;flex:1;min-height:0}.header{display:flex;justify-content:space-between;align-items:center}.button{background:#2563eb;color:#fff;border:none;padding:.5rem .75rem;border-radius:.5rem;cursor:pointer;font-weight:600;font-size:.85rem;white-space:nowrap;min-width:fit-content}.button:disabled{opacity:.6;cursor:not-allowed}.button:hover:not(:disabled){background:#1d4ed8}.button-sm{padding:.35rem .6rem;font-size:.8rem}.button-secondary{background:#475569}.button-secondary:hover:not(:disabled){background:#334155}.run-item{padding:.75rem 1rem;border-radius:.75rem;margin-bottom:.75rem;background:#1e293bcc;cursor:pointer;position:relative}.run-item.active{border:1px solid #3b82f6}.icon-btn{position:absolute;top:8px;right:8px;background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:2px 6px;font-size:.9rem;opacity:0;transition:opacity .12s ease-in-out,background .12s}.run-item:hover .icon-btn{opacity:1}.icon-btn:hover{background:#ef444433}@media (max-width: 980px){.app-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{max-height:40vh}.sidebar-divider{display:none}}@media (max-width: 600px){.header{flex-direction:column;align-items:flex-start;gap:.5rem}}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}.metric-card{background:#1e293bcc;border-radius:.75rem;padding:1rem}.metric-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8}.metric-value{font-size:1.4rem;font-weight:700}.viewer-panel{flex:1;min-height:320px;background:#0f172a99;border-radius:.75rem;border:1px solid rgba(148,163,184,.2);position:relative;overflow:hidden}.viewer-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.log-panel{background:#1e293bb3;border-radius:.75rem;padding:1rem;max-height:200px;overflow-y:auto;font-family:JetBrains Mono,Fira Code,monospace;font-size:.85rem;color:#cbd5f5}.split-container{display:flex;gap:.75rem;align-items:stretch}.split-pane{border-radius:.75rem;border:1px solid rgba(148,163,184,.2);background:#0f172a80;overflow:hidden}.split-divider{width:6px;cursor:col-resize;background:#94a3b833;border-radius:4px}.split-divider:hover{background:#94a3b859}.vsplit-container{display:flex;flex-direction:column;gap:.75rem;align-items:stretch}.vsplit-pane{border-radius:.75rem;border:1px solid rgba(148,163,184,.2);background:#0f172a80;overflow:hidden}.vsplit-divider{height:6px;cursor:row-resize;background:#94a3b833;border-radius:4px}.vsplit-divider:hover{background:#94a3b859}.dt-builder{display:flex;height:100%;background:#0f172a;color:#e2e8f0}.dt-palette{width:220px;border-right:1px solid #334155;padding:12px;overflow-y:auto}.dt-palette-item{padding:8px 10px;background:#1e293b;border-radius:6px;cursor:grab;display:flex;align-items:center;gap:8px;margin-bottom:8px;border:2px solid transparent;transition:all .15s}.dt-palette-item:hover{border-color:currentColor}.dt-palette-item:active{cursor:grabbing}.dt-canvas{flex:1;position:relative;background:linear-gradient(#0f172a 1px,transparent 1px),linear-gradient(90deg,#0f172a 1px,transparent 1px),#1e293b;background-size:20px 20px;overflow:hidden}.dt-component{position:absolute;width:60px;height:60px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:move;transition:box-shadow .15s}.dt-component.selected{box-shadow:0 0 12px #ffffff4d}.dt-properties{width:260px;border-left:1px solid #334155;padding:12px;overflow-y:auto}.dt-ped-status{margin-top:20px;padding:12px;background:#1e293b;border-radius:8px}.dt-ped-achievable{background:#166534;padding:4px 8px;border-radius:4px;text-align:center;margin-top:6px}.dt-ped-not-achievable{background:#7f1d1d;padding:4px 8px;border-radius:4px;text-align:center;margin-top:6px}