body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;display:flex;height:100vh;background-color:#f0f0f0}#sidebar{width:250px;background-color:#2c3e50;color:#fff;padding:20px;display:flex;flex-direction:column;overflow-y:auto;flex:0 0 250px}#sidebar h2{margin-top:0;font-size:1.2rem;border-bottom:1px solid #34495e;padding-bottom:10px}.example-btn{background:none;border:none;color:#ecf0f1;padding:10px;text-align:left;cursor:pointer;transition:background .2s;border-radius:4px;margin-bottom:5px}.example-btn:hover{background-color:#34495e}#main-content{flex:1;display:flex;flex-direction:column;padding:20px;gap:12px;min-width:0}#topbar{display:flex;background:#e0e0e0;border-bottom:1px solid #ccc;padding:10px 12px;align-items:center;justify-content:space-between;gap:12px}#filebar{display:flex;align-items:center;gap:10px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #bbb;background:#fff;color:#333;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600}button:hover{background:#f5f5f5}button:active{transform:translateY(1px)}#run-btn{background-color:#3498db;color:#fff;border-color:#2980b9}#run-btn:hover{background-color:#2980b9}#workspace{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0}#editor-container{flex:1;border:1px solid #ccc;border-radius:4px;overflow:hidden;background:#fff}#output-section{flex:0 0 200px;display:flex;flex-direction:column}#output-header{background:#34495e;color:#fff;padding:8px 12px;font-weight:600;border-radius:4px 4px 0 0}#output-container{flex:1;background:#1e1e1e;color:#d4d4d4;font-family:Consolas,Monaco,Courier New,monospace;padding:12px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;border:1px solid #ccc;border-radius:0 0 4px 4px}