* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 13px system-ui, sans-serif; background: #1d2025; color: #ddd; }
body { display: grid; grid-template-rows: auto 1fr auto; }
header, footer { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: #2a2e35; flex-wrap: wrap; }
footer #scrub { flex: 1; }
button, .btn, select { background: #3a404a; color: #eee; border: 1px solid #555; border-radius: 4px; padding: 3px 9px; cursor: pointer; font: inherit; }
button:hover, .btn:hover { background: #4a5260; }
.sep { width: 12px; }
.muted { color: #999; }
main { display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
#view { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#view canvas { display: block; }
#dropmsg { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 28px; background: rgba(40,90,160,.35); border: 3px dashed #8bf; z-index: 2; }
body.drag #dropmsg { display: flex; }
aside { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid #333; background: #23262c; }
#dro { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 6px 8px; font-family: ui-monospace, monospace; font-size: 15px; }
#dro span { color: #8a9; display: inline-block; width: 38px; }
#code { flex: 1; position: relative; min-height: 140px; }
#code .CodeMirror { position: absolute; inset: 0; height: auto; font-family: ui-monospace, monospace; font-size: 12px; line-height: 16px; background: #181a1e; color: #ccd; }
#code .CodeMirror-gutters { background: #1f2227; border-right: 1px solid #333; }
#code .CodeMirror-linenumber { color: #666; }
#code .CodeMirror-cursor { border-left-color: #eee; }
#code .CodeMirror-selected, #code .CodeMirror-focused .CodeMirror-selected { background: #3a4a66; }
#code .cm-curline { background: #3d5a80; }
#code .cm-gerr { text-decoration: underline wavy #e8b86b; text-underline-offset: 3px; }
#code .cm-after { opacity: 0.45; text-decoration: line-through; text-decoration-color: #667; }
.cm-g-gword { color: #7fb4ff; font-weight: bold; } .cm-g-mword { color: #ff8fb1; font-weight: bold; }
.cm-g-axis { color: #9fe0a6; } .cm-g-feed { color: #f5c76b; } .cm-g-number { color: #c9c9c9; }
.cm-g-comment { color: #7d8794; font-style: italic; } .cm-g-macro { color: #d6a3ff; } .cm-g-lineno { color: #6c7686; }
.cm-g-percent { color: #6c7686; } .cm-g-error { color: #ff6b6b; text-decoration: underline wavy #ff6b6b; }
#codebar { display: flex; gap: 4px; align-items: center; padding: 3px 6px; background: #2a2e35; border-top: 1px solid #333; }
#codebar button { padding: 1px 7px; }
#modflag { display: none; color: #e8b86b; font-size: 12px; } body.modified #modflag { display: inline; }
#busy { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 3; background: rgba(30,34,40,.92); border: 1px solid #556; border-radius: 6px; padding: 12px 16px; min-width: 320px; display: flex; flex-direction: column; gap: 8px; }
#busy progress { width: 100%; height: 12px; } #busy button { align-self: flex-end; }
#loadErr { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; background: #5a2328; color: #fdd; border: 1px solid #a44; border-radius: 4px; padding: 8px 10px; cursor: pointer; }
.CodeMirror-dialog { background: #2a2e35; color: #ddd; } .CodeMirror-dialog input { color: #eee; }
.cm-searching { background: rgba(255, 220, 60, .35); }
/* light theme */
body.light, body.light html { background: #f4f5f7; color: #222; }
body.light header, body.light footer, body.light #codebar { background: #e3e6ea; }
body.light aside { background: #fafbfc; border-left-color: #ccc; }
body.light button, body.light .btn, body.light select { background: #fff; color: #222; border-color: #aaa; }
body.light button:hover, body.light .btn:hover { background: #e8eef7; }
body.light details { border-top-color: #ddd; }
body.light #dro span { color: #476; } body.light .muted { color: #666; }
body.light #code .CodeMirror { background: #fff; color: #222; } body.light #code .CodeMirror-gutters { background: #f0f1f3; border-right-color: #ddd; }
body.light #code .CodeMirror-cursor { border-left-color: #222; } body.light #code .cm-curline { background: #cfe0f7; }
body.light .cm-g-gword { color: #1a56c4; } body.light .cm-g-mword { color: #b5245a; } body.light .cm-g-axis { color: #1e7a32; }
body.light .cm-g-feed { color: #9a6200; } body.light .cm-g-number { color: #333; } body.light .cm-g-comment { color: #7a828c; }
body.light .cm-g-macro { color: #7b33c4; } body.light .cm-g-lineno, body.light .cm-g-percent { color: #8a93a0; }
body.light #warnings { color: #9a6200; } body.light li.warn, body.light .warn { color: #9a6200; } body.light li.bad { color: #c62828; } body.light li.info { color: #2860a8; }
body.light .grid3 input, body.light #toolTable input, body.light .sm { background: #fff; color: #222; border-color: #bbb; }
body.light #busy { background: rgba(250,250,252,.95); border-color: #aab; }
body.light .CodeMirror-dialog { background: #e3e6ea; color: #222; } body.light .CodeMirror-dialog input { color: #222; }
details { padding: 4px 8px; border-top: 1px solid #333; max-height: 35vh; overflow: auto; }
summary { cursor: pointer; font-weight: bold; }
#stats td { padding: 1px 6px; } #stats td:first-child { color: #999; }
#warnings { margin: 4px 0; padding-left: 22px; color: #e8b86b; font-size: 12px; }
#warnings li { cursor: pointer; }
.grid3 { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 3px; margin: 4px 0; align-items: center; }
.grid3 input, #toolTable input { width: 100%; background: #15171b; color: #eee; border: 1px solid #444; border-radius: 3px; padding: 2px 4px; font: inherit; }
#toolTable { width: 100%; border-collapse: collapse; } #toolTable select { width: 100%; padding: 1px; }
#toolTable td { padding: 1px 2px; } #toolTable input { width: 58px; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
#stockWarnings { margin: 4px 0; padding-left: 22px; font-size: 12px; }
#stockWarnings li { cursor: pointer; } li.bad { color: #ff6b6b; } li.warn, .warn { color: #e8b86b; }
.sm { width: 56px; background: #15171b; color: #eee; border: 1px solid #444; border-radius: 3px; padding: 2px 4px; font: inherit; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; margin: 3px 0; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; }
.holderRow input { width: 40px !important; } .holderRow td { font-size: 11px; color: #aab; padding-bottom: 4px !important; }
li.info { color: #8fb8e8; }