*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#1e1e1e;color:#d4d4d4;font-size:13px}.app{display:flex;flex-direction:column;height:100vh}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#252526;border-bottom:1px solid #333;gap:16px;flex-shrink:0}.toolbar-left{display:flex;align-items:center;gap:8px}.toolbar-title{font-weight:700;font-size:14px;color:#569cd6}.toolbar-sep{color:#555}.project-name{color:#ccc;font-style:italic}.toolbar-center{display:flex;align-items:center;gap:8px}.toolbar-right{display:flex;align-items:center}.cplus-toggle,.toggle{display:flex;align-items:center;gap:4px;cursor:pointer;color:#aaa;font-size:12px;-webkit-user-select:none;user-select:none}.cplus-toggle input,.toggle input{cursor:pointer}.toggle--directive{font-size:11px}.toggle--directive span{color:#777}.btn{padding:4px 12px;border:1px solid #555;border-radius:3px;background:#333;color:#d4d4d4;cursor:pointer;font-size:12px;white-space:nowrap}.btn:hover{background:#444}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-compile{background:#0e639c;border-color:#0e639c;color:#fff;font-weight:600}.btn-compile:hover:not(:disabled){background:#17b}.main-panels{display:grid;grid-template-columns:220px 1fr 1fr;flex:1;overflow:hidden}.panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #333}.panel:last-child{border-right:none}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#252526;border-bottom:1px solid #333;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#888;flex-shrink:0}.panel-badge{font-size:10px;text-transform:lowercase;background:#333;padding:1px 6px;border-radius:3px;color:#666;letter-spacing:0}.panel-header-actions{display:flex;align-items:center;gap:4px}.panel-btn{background:none;border:none;cursor:pointer;font-size:13px;line-height:1;padding:1px 4px;border-radius:3px;color:#888}.panel-btn:hover{background:#444;color:#d4d4d4}.editor-panel,.viewer-panel{background:#1e1e1e}.viewer-panel .panel-header{color:#6a9955}.cm-container{flex:1;overflow:auto}.cm-container .cm-editor{height:100%}.cm-container .cm-scroller{overflow:auto}.explorer-panel{background:#252526}.file-list{flex:1;overflow-y:auto;padding:4px 0}.file-list-empty{padding:16px;color:#555;text-align:center;font-size:12px}.file-item{display:flex;align-items:center;padding:3px 12px;cursor:pointer;gap:6px;-webkit-user-select:none;user-select:none}.file-item:hover{background:#2a2d2e}.file-item--active{background:#37373d}.file-item--selected,.file-item--selected:hover{background:#094771}.file-item--viewed{background:#2a2d2e}.file-icon{font-size:14px;width:16px;text-align:center;color:#888;flex-shrink:0}.file-item--selected .file-icon{color:#ccc}.file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.file-delete{visibility:hidden;background:none;border:none;color:#888;cursor:pointer;font-size:16px;line-height:1;padding:0 2px;flex-shrink:0}.file-item:hover .file-delete{visibility:visible}.file-delete:hover{color:#e06c75}.status-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;font-size:12px;flex-shrink:0;border-top:1px solid #333}.status-bar--info{background:#1e1e1e;color:#888}.status-bar--error{background:#5a1d1d;color:#e06c75}.status-bar--success{background:#1d3a1d;color:#6a9955}.status-close{background:none;border:none;color:inherit;cursor:pointer;font-size:16px;opacity:.6}.status-close:hover{opacity:1}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#252526;border:1px solid #444;border-radius:8px;max-width:600px;width:90%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 32px #00000080}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #333}.modal-header h2{font-size:16px;color:#569cd6;margin:0}.modal-close{background:none;border:none;color:#888;font-size:22px;cursor:pointer;line-height:1;padding:0 4px}.modal-close:hover{color:#e06c75}.modal-body{padding:20px;overflow-y:auto;font-size:13px;line-height:1.6;color:#d4d4d4}.modal-body h3{font-size:14px;color:#ccc;margin:16px 0 8px}.modal-body p{margin-bottom:8px}.modal-body ul{margin:4px 0 8px 20px}.modal-body li{margin-bottom:4px}.modal-body code{background:#1e1e1e;padding:1px 5px;border-radius:3px;font-size:12px;color:#ce9178}.modal-body a{color:#569cd6;text-decoration:none}.modal-body a:hover{text-decoration:underline}.symbol-panels{border-top:1px solid #333;display:flex;flex-shrink:0;min-height:0}.symbol-panel{flex:1;min-width:0;display:flex;flex-direction:column;max-height:160px}.symbol-panel+.symbol-panel{border-left:1px solid #333}.symbol-panel-header{padding:4px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#888;background:#252526;border-bottom:1px solid #333;flex-shrink:0}.symbol-panel-list{overflow-y:auto;padding:2px 0;flex:1}.symbol-item{display:flex;align-items:center;gap:8px;width:100%;padding:2px 12px;border:none;background:none;color:#d4d4d4;cursor:pointer;font-size:12px;font-family:SF Mono,Monaco,Cascadia Code,Consolas,monospace;text-align:left}.symbol-item:hover{background:#2a2d2e}.symbol-name{color:#569cd6}.symbol-name--fn,.symbol-name--val{color:#6a9955}.symbol-line{color:#555;font-size:11px;margin-left:auto}.btn-demo{background:#2d5a3d;border-color:#2d5a3d;color:#fff;font-weight:600;margin-right:6px}.btn-demo:hover{background:#3a7a4e}.btn-help{background:#5a4a2d;border-color:#5a4a2d;color:#fff;font-weight:600;margin-right:6px}.btn-help:hover{background:#7a6a3d}