*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
button{font:inherit;color:var(--c-text);background:var(--c-surface);border:1px solid var(--c-border);border-radius:6px;padding:4px 10px;cursor:pointer}
button:hover{border-color:var(--c-accent)}
button.primary{background:var(--c-accent);color:var(--c-bg);border-color:var(--c-accent);font-weight:600}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}
input:not([type=checkbox]):not([type=radio]){font:inherit;color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border);border-radius:6px;padding:6px 8px;width:100%}
.grow{flex:1}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
#top{display:flex;align-items:center;gap:10px;padding:4px 64px 4px 12px;min-height:40px}
#brand{font-weight:700;color:var(--c-accent);white-space:nowrap}
#menubar{display:flex;gap:2px;flex-wrap:wrap;position:relative}
#menubar>button{border-color:transparent;background:transparent}
#menubar>button[aria-expanded=true],#menubar>button:hover{background:var(--c-surface);border-color:var(--c-border)}
.dd{position:fixed;z-index:50;min-width:230px;max-height:70vh;overflow:auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:8px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.dd button{display:flex;width:100%;justify-content:space-between;gap:18px;border:0;background:transparent;text-align:left;border-radius:5px;padding:5px 10px}
.dd button:hover{background:var(--c-bg)}
.dd .sc{color:var(--c-muted);font-size:12px}
.dd hr{border:0;border-top:1px solid var(--c-border);margin:4px 0}
.dd .sub{color:var(--c-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px}
#tabbar{display:flex;overflow-x:auto;gap:2px;padding:0 8px;border-bottom:1px solid var(--c-border);min-height:32px;scrollbar-width:thin}
.tab{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--c-border);border-bottom:0;border-radius:8px 8px 0 0;background:var(--c-bg);color:var(--c-muted);cursor:pointer;white-space:nowrap;max-width:220px;user-select:none}
.tab[aria-selected=true]{background:var(--c-surface);color:var(--c-text);border-color:var(--c-accent)}
.tab .nm{overflow:hidden;text-overflow:ellipsis}
.tab .dirty{color:var(--c-accent)}
.tab .cl{border:0;background:transparent;padding:0 3px;border-radius:4px;color:inherit}
.tab .cl:hover{background:var(--c-border)}
#editor-wrap{flex:1;min-height:80px;position:relative;background:var(--c-surface);border-bottom:1px solid var(--c-border)}
#editor{position:absolute;inset:0}
.CodeMirror{height:100%;background:var(--c-surface);color:var(--c-text);font:14px/1.45 ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace}
.CodeMirror-gutters{background:var(--c-surface);border-right:1px solid var(--c-border)}
.CodeMirror-linenumber{color:var(--c-muted)}
.CodeMirror-cursor{border-left:2px solid var(--c-accent)}
.CodeMirror-selected{background:color-mix(in srgb,var(--c-accent) 35%,transparent)!important}
.CodeMirror-focused .CodeMirror-selected{background:color-mix(in srgb,var(--c-accent) 45%,transparent)!important}
.CodeMirror-activeline-background{background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
.cm-keyword{color:var(--c-accent);font-weight:600}.cm-comment{color:var(--c-muted);font-style:italic}
.cm-string,.cm-string-2{color:color-mix(in srgb,var(--c-accent) 55%,var(--c-text))}
.cm-number,.cm-atom{color:color-mix(in srgb,var(--c-accent) 70%,var(--c-text))}
.cm-def,.cm-tag,.cm-header{color:var(--c-accent)}
.bm-gutter{width:14px}
.bm-dot{width:10px;height:10px;border-radius:50%;background:var(--c-accent);margin:4px 2px 0 2px;border:1px solid var(--c-bg)}
#split{height:5px;cursor:ns-resize;background:var(--c-border);flex:none}
#console{flex:none;height:150px;display:flex;flex-direction:column;background:var(--c-surface);min-height:0}
#console[hidden],#split[hidden]{display:none}
#console-head{display:flex;gap:6px;align-items:center;padding:3px 8px;border-bottom:1px solid var(--c-border)}
#console-head button{padding:1px 8px;font-size:12px}
#console-out{flex:1;margin:0;padding:6px 10px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:12.5px/1.4 ui-monospace,Consolas,monospace}
#console-out .warn{color:var(--c-accent)}#console-out .err{color:#ff6b6b}#console-out .inf{color:var(--c-muted)}
#status{display:flex;gap:14px;align-items:center;padding:3px 12px;font-size:12px;color:var(--c-muted);flex-wrap:wrap}
#status button{padding:0 8px;font-size:12px}
.panel{background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);border-radius:12px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;cursor:default}
.panel .x{border:0;background:transparent;font-size:20px;line-height:1;padding:0 6px}
.panel label{display:block;margin:6px 0;font-size:12px;color:var(--c-muted)}
.panel label.inl{display:inline-flex;gap:6px;align-items:center;margin:3px 12px 3px 0;color:var(--c-text);font-size:13px}
fieldset{border:1px solid var(--c-border);border-radius:8px;margin:8px 0;padding:4px 8px}
legend{font-size:12px;color:var(--c-muted);padding:0 4px}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;justify-content:flex-end}
.msg{min-height:1.4em;margin-top:6px;font-size:12px;color:var(--c-muted)}
#find{position:fixed;z-index:60;top:84px;right:14px;width:min(430px,calc(100vw - 20px));max-height:calc(100dvh - 100px);overflow:auto}
#find-drag{cursor:move}
.overlay{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.overlay[hidden],#find[hidden],#drop[hidden]{display:none}
.modal{width:min(460px,100%)}
.modal p{white-space:pre-wrap;word-break:break-word;margin:6px 0 10px;max-height:50vh;overflow:auto}
.browser{width:min(560px,100%);max-height:85dvh;display:flex;flex-direction:column}
#b-list{list-style:none;margin:8px 0 0;padding:0;overflow:auto;flex:1;min-height:120px}
#b-list li{display:flex;gap:6px;align-items:center;padding:4px 6px;border-radius:6px}
#b-list li:hover{background:var(--c-bg)}
#b-list li .go{flex:1;text-align:left;border:0;background:transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#b-list li .warnw{color:var(--c-accent);font-size:12px}
#drop{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--c-bg) 80%,transparent);border:3px dashed var(--c-accent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;pointer-events:none}
@media (max-width:600px){#brand{display:none}#find{top:48px;right:8px}}