* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #202124; color: #ddd; font: 13px/1.35 system-ui, "Segoe UI", "Microsoft YaHei", sans-serif; overflow: hidden; }
body { display: flex; flex-direction: column; }
button { background: #3a3d42; color: #eee; border: 1px solid #555; border-radius: 3px; padding: 2px 8px; cursor: pointer; font: inherit; }
button:hover:not(:disabled) { background: #4a4f57; } button:disabled { opacity: .45; cursor: default; }
input, select { background: #15161a; color: #eee; border: 1px solid #555; border-radius: 3px; font: inherit; padding: 1px 4px; }
.hidden { display: none !important; }
small, .small { color: #9aa; font-size: 11px; }
#menubar { display: flex; background: #2b2d31; border-bottom: 1px solid #111; user-select: none; flex: none; }
.menu { position: relative; }
.menu > .mtitle { padding: 5px 10px; cursor: default; }
.menu.open > .mtitle, .menu > .mtitle:hover { background: #3d4046; }
.mlist { position: absolute; left: 0; top: 100%; min-width: 250px; background: #2b2d31; border: 1px solid #111; box-shadow: 0 4px 14px #0008; z-index: 50; padding: 3px 0; display: none; }
.menu.open > .mlist { display: block; }
.mitem { padding: 4px 24px 4px 26px; position: relative; white-space: nowrap; display: flex; justify-content: space-between; gap: 20px; }
.mitem:hover:not(.disabled) { background: #3f6db3; }
.mitem.disabled { color: #888; font-weight: 600; }
.mitem.checked::before { content: "●"; position: absolute; left: 9px; font-size: 10px; top: 6px; }
.mitem .sc { color: #aaa; }
.msep { border-top: 1px solid #444; margin: 3px 0; }
.mitem.sub > .mlist { left: 100%; top: -4px; }
.mitem.sub:hover > .mlist { display: block; }
.mitem.sub::after { content: "▸"; position: absolute; right: 8px; }
#main { flex: 1; display: flex; min-height: 0; }
#diffPanel { flex: 1 1 50%; } #right { flex: 1 1 50%; display: flex; flex-direction: column; min-width: 0; }
#realPanel { flex: 1 1 60%; } #fftPanel { flex: 1 1 40%; border-top: 1px solid #111; }
.splitter { width: 5px; cursor: col-resize; background: #111; flex: none; }
.panel { display: flex; min-height: 0; min-width: 0; }
.side { width: 112px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 4px; background: #232427; }
.hist { flex: 1; min-height: 60px; }
.lv { display: flex; flex-direction: column; gap: 2px; } .lv input { width: 100%; font-size: 11px; }
.chk { display: block; font-size: 12px; } .chk.inline { display: inline; }
.viewwrap { position: relative; flex: 1; min-width: 0; min-height: 0; }
.view { position: absolute; inset: 0; } .iv-canvas { display: block; touch-action: none; }
.viewtitle { position: absolute; left: 8px; top: 4px; color: #ccc; pointer-events: none; text-shadow: 0 0 3px #000; font-size: 12px; }
.vimgbtns { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center; background: #ebebebdd; color: #111; padding: 4px; border-radius: 4px; }
.vimgbtns button { background: #f5f5f5; color: #111; border-color: #999; }
.legend { position: absolute; right: 6px; top: 6px; background: #ebebebee; color: #111; padding: 6px; border-radius: 4px; width: 150px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.legend input[type=number] { width: 56px; background: #fff; color: #111; } .legend .small { color: #333; }
#toolbar { flex: none; display: flex; gap: 4px; align-items: center; padding: 3px 6px; background: #26282c; border-top: 1px solid #111; flex-wrap: wrap; }
.sep { width: 1px; height: 18px; background: #555; margin: 0 4px; }
#statusbar { flex: none; display: flex; gap: 6px; align-items: center; padding: 3px 6px; background: #2b2d31; border-top: 1px solid #111; white-space: nowrap; overflow: hidden; color: #777; }
#statusbar > * { color: #ddd; } .grow { flex: 1; } #statusMsg { color: #fc6 !important; overflow: hidden; text-overflow: ellipsis; }
.latch.on { background: #2f5d9c; border-color: #6aa0ef; }
#progress { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); width: 420px; background: #2b2d31; border: 1px solid #555; padding: 12px; border-radius: 6px; z-index: 80; box-shadow: 0 6px 30px #000a; }
#progressBar { height: 8px; background: #4c8be0; width: 0; border-radius: 4px; margin-bottom: 8px; transition: width .1s; }
#progress button { float: right; }
.dlg-back { position: fixed; inset: 0; background: #0007; z-index: 90; display: flex; align-items: center; justify-content: center; }
.dlg { background: #2b2d31; border: 1px solid #555; border-radius: 6px; min-width: 360px; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px #000c; }
.dlg.free { position: fixed; z-index: 70; }
.dlg h3 { margin: 0; padding: 8px 12px; background: #34373c; border-bottom: 1px solid #111; font-size: 14px; cursor: move; display: flex; justify-content: space-between; }
.dlg h3 .x { cursor: pointer; padding: 0 4px; }
.dlg .body { padding: 10px 12px; overflow: auto; }
.dlg .btns { padding: 8px 12px; display: flex; gap: 6px; justify-content: flex-end; border-top: 1px solid #111; flex-wrap: wrap; }
.dlg .row { display: flex; gap: 6px; align-items: center; margin: 4px 0; } .dlg .row > label { min-width: 120px; }
.fb-list { height: 46vh; width: min(760px, 86vw); overflow: auto; border: 1px solid #444; background: #1b1c1f; margin-top: 6px; }
.fb-item { padding: 3px 8px; display: flex; gap: 8px; cursor: pointer; } .fb-item:hover { background: #2e3f5c; } .fb-item.sel { background: #3f6db3; }
.fb-item .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-item .sz { color: #9aa; width: 90px; text-align: right; }
.fb-item.dim { color: #777; }
.warnbox { background: #4a3a1c; border: 1px solid #a8812d; padding: 8px; border-radius: 4px; margin: 6px 0; white-space: pre-wrap; }
.errbox { background: #4a1c1c; border: 1px solid #a83d2d; padding: 8px; border-radius: 4px; margin: 6px 0; white-space: pre-wrap; }
table.stats td { padding: 1px 8px; }
.plot { width: 100%; height: 300px; background: #111; display: block; }
button.danger { border-color: #a33; color: #f88; }
button.tog.on, button.latch.on { background: #2f5d8a; border-color: #5b9bd5; color: #fff; }
.ctxmenu { z-index: 9999; }
fieldset { border: 1px solid #555; border-radius: 4px; margin: 6px 0; padding: 4px 8px; }
legend { color: #aaa; font-size: 12px; }
.fb-item.sup span:first-child { color: #9fd3ff; }
table.stats td { padding: 1px 10px 1px 0; font-family: monospace; }
.mlist .mitem.disabled { color: #888; font-size: 11px; cursor: default; }
/* pure-browser edition */
.fb-empty { padding: 24px; color: #9aa; text-align: center; line-height: 1.7; }
#dropOverlay { position: fixed; inset: 0; z-index: 9999; background: rgba(30, 60, 110, .55); border: 4px dashed #9fd3ff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; text-align: center; pointer-events: none; }
#dropOverlay.hidden { display: none; }
#isoWarn { position: fixed; bottom: 34px; right: 8px; max-width: 460px; z-index: 50; }