:root {
	color-scheme: light;
	--ink: #202522;
	--muted: #737b75;
	--line: #dfe3de;
	--paper: #f4f5f1;
	--surface: #ffffff;
	--green: #2f6d57;
	--orange: #c65332;
	--code: #1d2421;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif; }
button, select { font: inherit; }
button { cursor: pointer; }

.topbar { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: #202a25; color: #f4f6f3; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #9bc4ad; color: #b9ddc8; font: 700 11px/1 Consolas, monospace; }
.brand-light { color: #c6cec8; font-weight: 450; }
.topbar-meta { display: flex; align-items: center; gap: 19px; color: #d0d7d1; font-size: 12px; }
.version { border: 1px solid #59655d; padding: 5px 8px; font: 11px/1 Consolas, monospace; }
.engine-state, .trace-live { display: inline-flex; align-items: center; gap: 7px; }
.engine-state i, .trace-live i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #e0a34e; }
.engine-state.ready i, .trace-live i { background: #62a981; }
.engine-state.error i { background: #d3614a; }

.workspace { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr); gap: 18px; max-width: 1600px; min-height: calc(100vh - 58px); margin: 0 auto; padding: 20px; }
.left-column, .source-column { min-width: 0; }
.section-heading, .source-heading, .results-heading, .pipeline-head, .trace-log-heading { display: flex; align-items: center; justify-content: space-between; }
.section-heading, .source-heading { height: 52px; margin-bottom: 12px; }
.eyebrow { margin: 0 0 3px; color: var(--muted); font: 10px/1.2 Consolas, monospace; }
h1, h2, p { margin-top: 0; }
h1, .source-heading h2 { margin: 0; font-size: 17px; font-weight: 620; }
.source-heading h2 { font-size: 16px; }
.run-state { color: var(--muted); font-size: 12px; }
.run-state.busy { color: var(--green); }
.run-state.error, .error-message { color: #a43b2b; }
.run-state.success { color: var(--green); }

.image-frame { position: relative; display: grid; place-items: center; min-height: 330px; height: min(48vh, 520px); border: 1px solid #d5dbd5; background-color: #e9ece7; background-image: linear-gradient(45deg, #dfe4de 25%, transparent 25%), linear-gradient(-45deg, #dfe4de 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dfe4de 75%), linear-gradient(-45deg, transparent 75%, #dfe4de 75%); background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; overflow: hidden; }
.image-frame.dragging { outline: 2px solid var(--green); outline-offset: -4px; }
#preview { display: block; }
.empty-state { position: absolute; display: grid; justify-items: center; gap: 10px; color: #606861; text-align: center; }
.empty-state[hidden] { display: none; }
.empty-state p { margin: 0; font-size: 13px; }
.target-mark { position: relative; width: 34px; height: 34px; }
.target-mark span { position: absolute; width: 9px; height: 9px; border-color: #81968a; border-style: solid; }
.target-mark span:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.target-mark span:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.target-mark span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.target-mark span:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }

.image-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; border-bottom: 1px solid var(--line); }
.file-meta { display: grid; min-width: 0; gap: 3px; font-size: 12px; }
.file-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-meta span { color: var(--muted); font-size: 11px; }
.controls { display: flex; align-items: center; gap: 8px; }
.secondary-button { min-height: 35px; padding: 0 9px; border: 1px solid #cfd5cf; border-radius: 3px; background: var(--surface); color: var(--ink); font-size: 11px; white-space: nowrap; }
.mode-control { display: inline-flex; height: 34px; padding: 2px; border: 1px solid #cfd5cf; border-radius: 3px; background: #f1f3f0; }
.mode-option { min-width: 42px; padding: 0 8px; border: 0; border-radius: 2px; background: transparent; color: var(--muted); font-size: 11px; }
.mode-option.selected { background: var(--surface); color: var(--green); box-shadow: 0 0 0 1px #d4ddd6; }
.mode-option:disabled { cursor: not-allowed; opacity: .55; }
.format-control { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.format-control select { width: 138px; height: 34px; padding: 0 9px; border: 1px solid #cfd5cf; border-radius: 3px; background: var(--surface); color: var(--ink); font-size: 12px; }
.run-button { height: 35px; padding: 0 14px; border: 1px solid var(--green); border-radius: 3px; background: var(--green); color: #fff; font-size: 12px; font-weight: 650; }
.run-button:disabled { border-color: #aebbb2; background: #aebbb2; cursor: not-allowed; }
.run-button[hidden] { display: none; }

.pipeline { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.pipeline-head { margin-bottom: 12px; font-size: 12px; font-weight: 620; }
.pipeline-head > span:last-child { color: var(--muted); font: 11px/1 Consolas, monospace; font-weight: 400; }
.pipeline-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pipeline-step { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; border-left: 2px solid #c8cec8; color: #687069; font-size: 11px; transition: background .16s, color .16s, border-color .16s; }
.pipeline-step.active { border-color: var(--orange); background: #f7e9e3; color: #843c29; }
.pipeline-step.done { border-color: #77a38a; color: #3e6e55; }
.step-number { color: #8e968f; font: 10px/1 Consolas, monospace; }

.results-section { padding-top: 15px; }
.results-heading { margin-bottom: 10px; }
.results-heading h2, .trace-log-heading h2 { margin: 0; font-size: 13px; font-weight: 650; }
.results-heading > span { color: var(--muted); font: 11px/1 Consolas, monospace; }
.results-empty { padding: 14px 0; color: var(--muted); font-size: 12px; }
.results-empty.no-result { color: #7c6640; }
.result-list { display: grid; gap: 8px; }
.result-item { padding: 11px 12px; border-left: 2px solid var(--green); background: #fff; }
.result-title { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.result-title span { color: var(--muted); font: 10px/1 Consolas, monospace; }
.result-text { margin: 8px 0 6px; overflow-wrap: anywhere; white-space: pre-wrap; font: 13px/1.5 Consolas, "Microsoft YaHei UI", monospace; }
.result-bytes { color: #778078; font: 10px/1.4 Consolas, monospace; overflow-wrap: anywhere; }

.source-column { display: flex; flex-direction: column; min-height: 700px; border: 1px solid #d8ddd8; background: var(--surface); }
.source-heading { padding: 0 15px; margin: 0; }
.trace-live { color: var(--muted); font-size: 11px; }
.function-card { padding: 11px 15px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbf9; }
.function-name { overflow: hidden; color: #284f3d; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.4 Consolas, monospace; }
.function-location { margin-top: 4px; color: var(--muted); font: 10px/1.3 Consolas, monospace; }
.code-toolbar { display: flex; justify-content: space-between; gap: 12px; min-height: 34px; padding: 0 13px; align-items: center; background: #2a322e; color: #bdc8bf; font: 10px/1 Consolas, monospace; }
.code-window { min-height: 290px; max-height: 43vh; flex: 1 1 290px; overflow: auto; background: var(--code); color: #dbe2dd; scrollbar-color: #526058 #1d2421; }
.source-code { display: block; min-width: max-content; margin: 0; padding: 12px 0 16px; font: 11px/1.8 Consolas, "Cascadia Code", monospace; }
.source-line { display: grid; grid-template-columns: 52px max-content; padding-right: 16px; }
.source-line.current { background: #34453a; box-shadow: inset 3px 0 #df805f; color: #fff; }
.line-number { padding-right: 11px; color: #718077; text-align: right; user-select: none; }
.source-line.current .line-number { color: #efb09a; }
.line-text { white-space: pre; }
.trace-log { border-top: 1px solid var(--line); }
.trace-log-heading { min-height: 40px; padding: 0 14px; }
.quiet-button { padding: 4px 0 4px 8px; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.trace-events { display: flex; flex-direction: column; max-height: 230px; margin: 0; padding: 0 12px 8px; overflow: auto; list-style: none; }
.trace-placeholder { padding: 7px 0 10px; color: #919891; font-size: 11px; }
.trace-event { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 6px 2px; border-top: 1px solid #eef0ec; }
.event-number { color: #8f9a91; font: 10px/1 Consolas, monospace; }
.event-description { color: #39443c; font-size: 11px; }
.event-location { color: #889088; font: 9px/1.2 Consolas, monospace; }
.toast { position: fixed; right: 20px; bottom: 20px; max-width: min(400px, calc(100% - 40px)); padding: 11px 14px; transform: translateY(12px); border: 1px solid #d8b49f; background: #fff; color: #753d2e; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.visible { transform: translateY(0); opacity: 1; }

@media (max-width: 900px) {
	.workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.source-column { min-height: 650px; }
	.code-window { max-height: 44vh; }
}

@media (max-width: 560px) {
	.topbar { height: 52px; padding: 0 13px; }
	.topbar-meta { gap: 9px; font-size: 10px; }
	.version { padding: 4px 6px; }
	.workspace { padding: 12px; }
	.image-frame { min-height: 250px; height: 38vh; }
	.image-toolbar { align-items: flex-start; flex-wrap: wrap; padding: 10px 0; }
	.file-meta { flex: 1 1 100%; }
	.controls { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
	.format-control select { width: 110px; }
	.run-button { padding: 0 9px; }
	.pipeline-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.source-column { min-height: 620px; }
	.code-window { min-height: 280px; max-height: 42vh; }
	.trace-event { grid-template-columns: 30px minmax(0, 1fr); }
	.event-location { grid-column: 2; }
}