@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap";:root{--bg: #0a0e14;--panel: #0d1219;--surface: #111921;--border: #1a2a36;--border-active: #2a4a5a;--text: #d4dce6;--muted: #5a7a8f;--dim: #3a5060;--amber: #f5b35c;--teal: #66d7c4;--red: #ff8a6b;--green: #a7f06b}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:13px/1.4 IBM Plex Mono,monospace}button,input,textarea{font:inherit;color:inherit}.shell-app{height:100vh;display:grid;grid-template-rows:auto auto 1fr;overflow:hidden}.topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--panel)}.brand-block{display:flex;gap:12px;align-items:baseline;flex-shrink:0}.brand-title{color:var(--amber);font-weight:600;font-size:12px;letter-spacing:.12em}.brand-subtitle{color:var(--dim);font-size:11px}.status-strip{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px;text-align:right}.topbar-btn{background:transparent;border:1px solid var(--border);padding:5px 12px;font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap}.topbar-btn:hover{border-color:var(--border-active);color:var(--text)}.config-drawer{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel)}.config-drawer label{display:grid;gap:4px}.config-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}input,textarea{width:100%;border:1px solid var(--border);background:var(--bg);padding:7px 10px;font-size:12px;outline:none}input:focus,textarea:focus{border-color:var(--border-active)}.mobile-tabs{display:none;border-bottom:1px solid var(--border);background:var(--panel)}.mobile-tab{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;padding:8px 0;font-size:11px;color:var(--muted);cursor:pointer;text-transform:uppercase;letter-spacing:.06em}.mobile-tab-active{color:var(--amber);border-bottom-color:var(--amber)}.layout{display:grid;grid-template-columns:1fr 440px;gap:0;min-height:0;overflow:hidden}.terminal-col{display:grid;grid-template-rows:1fr auto;min-height:0;border-right:1px solid var(--border)}.sidebar-col{display:grid;grid-template-rows:minmax(140px,1fr) minmax(0,3fr);min-height:0;overflow:hidden}.sidebar-col>div{min-height:0;overflow:hidden;display:grid}.pane{min-height:0;overflow:hidden;display:grid}.terminal-pane{background:var(--bg)}.browser-pane{grid-template-rows:auto auto 1fr auto;border-bottom:2px solid var(--border)}.script-pane{grid-template-rows:auto auto 1fr auto}.pane-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel)}.pane-title-row{display:flex;gap:10px;align-items:baseline;min-width:0}.pane-title{color:var(--amber);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;flex-shrink:0}.pane-meta{color:var(--dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pane-tabs{display:flex;gap:6px}.tab-btn{background:transparent;border:1px solid var(--border);padding:4px 10px;font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap}.tab-btn:hover{border-color:var(--border-active);color:var(--text)}.tab-active{color:var(--amber);border-color:var(--amber)}.xterm-host{height:100%;min-height:0;padding:10px;cursor:text}.xterm-host .xterm-viewport{scrollbar-color:var(--border-active) var(--bg);scrollbar-width:thin}.terminal-footer{display:flex;flex-wrap:wrap;gap:12px;padding:6px 14px;color:var(--dim);font-size:10px;border-top:1px solid var(--border);background:var(--panel);letter-spacing:.02em}.hint-text{color:var(--teal)}.browser-list{overflow-y:auto;padding:6px;display:grid;align-content:start;gap:3px;scrollbar-color:var(--border-active) var(--bg);scrollbar-width:thin}.browser-entry{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center;width:100%;text-align:left;border:1px solid transparent;background:transparent;padding:6px 10px;cursor:pointer;font-size:12px}.browser-entry:hover{background:var(--surface)}.browser-selected{background:#f5b35c0f;border-color:#f5b35c4d}.entry-type{color:var(--dim);text-transform:uppercase;font-size:10px}.entry-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.up-entry{color:var(--amber);grid-template-columns:1fr;font-size:12px}.browser-empty{padding:12px 10px;color:var(--dim);font-size:12px}.error-text{color:var(--red)}.preview-pane{border-top:1px solid var(--border);display:grid;grid-template-rows:auto 1fr;min-height:80px;max-height:180px}.preview-header{display:flex;gap:10px;padding:6px 14px;color:var(--dim);font-size:10px;border-bottom:1px solid var(--border)}.preview-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-body{margin:0;padding:8px 14px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.4;scrollbar-color:var(--border-active) var(--bg);scrollbar-width:thin}.script-path-input{font-size:11px;padding:5px 8px}.example-strip{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel)}.script-editor{border:none;border-radius:0;min-height:0;height:100%;resize:none;padding:12px 14px;font-size:13px;line-height:1.5;background:var(--bg);scrollbar-color:var(--border-active) var(--bg);scrollbar-width:thin}.script-actions{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border);background:var(--panel)}.script-actions button{border:1px solid var(--border);background:var(--surface);padding:6px 14px;font-size:11px;cursor:pointer}.script-actions button:hover:not(:disabled){border-color:var(--border-active);background:var(--panel)}.script-actions button:disabled{opacity:.4;cursor:default}@media (max-width: 960px){.mobile-tabs{display:flex}.mobile-hidden{display:none!important}.layout{grid-template-columns:1fr;grid-template-rows:1fr}.terminal-col{border-right:none}.sidebar-col{grid-template-rows:1fr;height:100%;overflow-y:auto}.sidebar-col>div{height:100%}.browser-pane,.script-pane{height:100%}.pane-header{grid-template-columns:1fr}.script-path-input{width:100%}.config-drawer{grid-template-columns:1fr}}@media (min-width: 1600px){.layout{grid-template-columns:1fr 520px}}