*{box-sizing:border-box}body,html{color:#fff;background:#1e1e1e;flex-direction:column;height:100vh;margin:0;padding:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex;overflow:hidden}main{flex:1;width:100%;display:flex;position:relative}main.layout-horizontal #editor{border-right:1px solid #333;flex:1}main.layout-horizontal #output-panel{width:40%;min-width:300px}main.layout-horizontal #tab-nav{display:none}main.layout-tabbed{flex-direction:column}main.layout-tabbed #tab-nav{background:#252526;border-bottom:1px solid #333;height:40px;display:flex}main.layout-tabbed .tab-btn{color:#888;cursor:pointer;text-transform:uppercase;background:0 0;border:none;flex:1;font-size:.8rem;font-weight:700}main.layout-tabbed .tab-btn.active{color:#fff;background:#333;border-bottom:2px solid #007acc}main.layout-tabbed #editor,main.layout-tabbed #output-panel{height:100%;display:none}main.layout-tabbed.show-editor #editor,main.layout-tabbed.show-output #output-panel{display:block}header{background:#252526;border-bottom:1px solid #333;justify-content:space-between;align-items:center;height:50px;padding:0 15px;display:flex}.controls-left,.controls-right{align-items:center;gap:8px;display:flex}button,select{color:#eee;cursor:pointer;background:#3c3c3c;border:1px solid #444;padding:6px 12px;font-size:.85rem;transition:all .2s}button:hover:not(:disabled){background:#4d4d4d;border-color:#666}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background:green;border:none;font-weight:600}.btn-primary:hover:not(:disabled){background:#006400}.btn-danger{color:#fff;background:#8b0000;border:none}.btn-danger:hover:not(:disabled){background:color-mix(darkred, black 20%)}.custom-select{user-select:none;min-width:130px;position:relative}.select-trigger{color:#eee;cursor:pointer;background:#3c3c3c;border:1px solid #444;justify-content:space-between;align-items:center;padding:6px 12px;font-size:.85rem;display:flex}.select-trigger:after{content:"▼";color:#888;margin-left:10px;font-size:.6rem}.select-options{z-index:1000;background:#2d2d2d;border:1px solid #444;margin-top:4px;display:none;position:absolute;top:100%;left:0;right:0;box-shadow:0 4px 12px #00000080}.custom-select.active .select-options{animation:.2s ease-out fadeIn;display:block}.option{cursor:pointer;padding:8px 12px;font-size:.85rem}.option:hover{color:#fff;background:#007acc}.optgroup-label{text-transform:uppercase;color:#888;padding:8px 12px 4px;font-size:.7rem;font-weight:700}main{flex:1;width:100%;display:flex}#editor{flex:1;height:100%}#output-panel{background:#0f0f0f;border-left:1px solid #333;flex-direction:column;flex:1;display:flex}#output-header{text-transform:uppercase;color:#888;background:#252526;border-bottom:1px solid #222;padding:6px 15px;font-size:.75rem;font-weight:700}#output{white-space:pre-wrap;flex:1;margin:0;padding:15px;font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.5;overflow-y:auto}.success{color:#4ec9b0}.error{color:#f44747}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media screen and (width<=600px){header{flex-direction:column;gap:8px;height:auto;padding:8px}.controls-left,.controls-right{justify-content:space-between;gap:4px;width:100%}.custom-select{flex:1;min-width:0}.select-trigger{padding:6px 8px;font-size:.8rem}.select-options{width:auto;position:fixed;top:auto;left:10px;right:10px}#run-btn,#stop-btn{flex:none;padding:6px 10px}#view-select-custom{display:none}}