* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 13px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; background: #ececec; }
#app { display: flex; flex-direction: column; height: 100vh; }
.grow { flex: 1; }

/* menu bar */
#menubar { display: flex; background: #f4f4f4; border-bottom: 1px solid #c8c8c8; padding: 0 4px; user-select: none; }
#menubar .top { padding: 4px 10px; cursor: default; }
#menubar .top:hover, #menubar .top.open { background: #cfe0f7; }
.menu { position: fixed; z-index: 50; background: #fafafa; border: 1px solid #9a9a9a; box-shadow: 2px 3px 8px rgba(0,0,0,.25); min-width: 190px; padding: 3px 0; user-select: none; }
.menu .mi { display: flex; align-items: center; padding: 4px 10px 4px 4px; position: relative; white-space: nowrap; }
.menu .mi:hover:not(.off) { background: #3d7de0; color: #fff; }
.menu .mi.off { color: #999; }
.menu .ck { width: 18px; text-align: center; }
.menu .lb { flex: 1; padding-right: 24px; }
.menu .ky { color: #888; font-size: 11px; }
.menu .mi:hover:not(.off) > .ky { color: #dde; }
.menu .sub { color: #111; cursor: default; }
.menu .sep { height: 1px; background: #d4d4d4; margin: 3px 0; }
.menu .sub { display: none; position: absolute; left: 100%; top: -4px; }
.menu .mi:hover > .sub { display: block; }
.menu.ctx:not(.sub) { }

/* toolbar */
#toolbar { display: flex; align-items: center; gap: 3px; padding: 3px 6px; background: #f4f4f4; border-bottom: 1px solid #b5b5b5; flex-wrap: wrap; }
#toolbar .tb { min-width: 30px; height: 30px; padding: 2px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
#toolbar .tb.txt { padding: 2px 8px; font: inherit; border-color: #bbb; background: #fff; height: 26px; }
#toolbar .tb:hover { border-color: #8aa; background: #e8f0fb; }
#toolbar .tb.on { border-color: #3d7de0; background: #cfe0f7; }
#toolbar .tbtools { display: contents; }
#toolbar .tsep { width: 1px; height: 22px; background: #c4c4c4; margin: 0 5px; }
#toolbar .chk { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; cursor: pointer; }
#toolbar select { height: 24px; font: inherit; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge.ok { background: #d8f0d8; color: #165a16; } .badge.off { background: #eee; color: #666; }

/* layout */
#main { flex: 1; display: flex; min-height: 0; }
#side { width: 290px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #b5b5b5; min-width: 0; }
#explorer { flex: 1 1 60%; overflow: auto; padding: 2px 0; }
#split { height: 5px; background: #e2e2e2; cursor: row-resize; border-top: 1px solid #c4c4c4; border-bottom: 1px solid #c4c4c4; flex: none; }
#attrs { flex: 0 0 auto; max-height: 45%; overflow: auto; background: #fafafa; min-height: 80px; }
#vsplit { width: 5px; cursor: col-resize; background: #e2e2e2; flex: none; }
#work { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#crumbs { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: #f4f4f4; border-bottom: 1px solid #c8c8c8; min-height: 26px; }
#crumbs .crumb.root { font-weight: bold; }
#crumbs .err { color: #b00000; font-weight: bold; }
#canvaswrap { flex: 1; position: relative; min-height: 0; background: #fff; overflow: hidden; }
#cv { position: absolute; left: 0; top: 0; outline: none; touch-action: none; }
#statusbar { display: flex; padding: 2px 8px; background: #f4f4f4; border-top: 1px solid #b5b5b5; font-size: 12px; color: #444; }

/* explorer */
.node { display: flex; align-items: center; gap: 4px; padding: 1px 6px; cursor: default; white-space: nowrap; user-select: none; }
.node.head { font-weight: 600; background: #f0f0f0; padding: 2px 4px; border-top: 1px solid #e4e4e4; }
.node.head .twist { width: 12px; color: #666; }
.node.item { padding-left: 20px; }
.node.item:hover { background: #eaf1fb; }
.node.item.sel { background: #cfe0f7; }
.node.circ.cur .nm { text-decoration: underline; }
.node .nm.main { font-weight: bold; }
.node .ico { width: 18px; height: 18px; display: inline-flex; flex: none; }
.node .ico canvas { width: 18px !important; height: 18px !important; }

/* attribute table */
.attrtitle { padding: 3px 8px; font-weight: 600; background: #e9e9e9; border-bottom: 1px solid #d0d0d0; position: sticky; top: 0; }
table.attrs { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.attrs td { padding: 2px 6px; border-bottom: 1px solid #e6e6e6; vertical-align: middle; }
table.attrs td.an { width: 42%; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.attrs td.av { width: 58%; min-width: 0; }
table.attrs td.av > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
table.attrs input[type=text], table.attrs input[type=number], table.attrs select, table.attrs textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 1px 3px; }
table.attrs input[type=color] { width: 40px; height: 22px; padding: 0; }
.dim { color: #777; } .pad { padding: 6px 8px; }

button.mini { font: inherit; font-size: 12px; padding: 1px 7px; cursor: pointer; }

/* dialogs */
#overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.28); z-index: 100; align-items: center; justify-content: center; }
#overlay.on { display: flex; }
.dlg { background: #f6f6f6; border: 1px solid #777; box-shadow: 0 8px 28px rgba(0,0,0,.4); min-width: 340px; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; }
.dlg.wide { min-width: min(720px, 92vw); }
.dlg-title { padding: 7px 12px; font-weight: 600; background: #dfe6f2; border-bottom: 1px solid #b9c3d6; }
.dlg-body { padding: 12px; overflow: auto; }
.dlg-body .pre { white-space: pre-wrap; }
.dlg-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid #d6d6d6; }
.dlg-btns button { font: inherit; padding: 4px 16px; min-width: 76px; cursor: pointer; }
.dlg-btns button.primary { background: #3d7de0; color: #fff; border: 1px solid #2a5fb4; }
.wide-input { width: 100%; font: inherit; padding: 3px 5px; margin-top: 4px; }
.srvlist { min-height: 80px; max-height: 50vh; overflow: auto; }
.srvrow { display: flex; align-items: center; gap: 12px; padding: 5px 4px; border-bottom: 1px solid #e0e0e0; }
.srvrow .fn { flex: 1; color: #134a9c; text-decoration: none; font-weight: 600; }
.srvrow .meta { color: #777; font-size: 12px; }
.help h4 { margin: 10px 0 4px; } .help ul { margin: 0 0 6px; padding-left: 20px; } .help li { margin: 2px 0; }

/* hex editor */
.hexbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.addrin { width: 70px; font-family: monospace; }
.hexgrid { display: grid; grid-template-columns: auto repeat(var(--cols), auto); gap: 1px 2px; font-family: "Courier New", monospace; font-size: 12px; align-items: center; }
.hexgrid .hh { color: #777; text-align: center; } .hexgrid .ha { color: #555; padding-right: 6px; }
.hexgrid input { font: inherit; padding: 1px 2px; text-align: center; }

/* ---- Combinational analysis dialog ---- */
.an { min-width: min(640px, 80vw); }
.an-vars { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; align-items: center; }
.an-grp { display: inline-flex; align-items: center; gap: 4px; }
.an-grp input { font: inherit; padding: 1px 3px; width: 5.5em; }
.an .tabs { display: flex; gap: 2px; border-bottom: 1px solid #aaa; margin-bottom: 6px; }
.an .tab { font: inherit; padding: 3px 14px; border: 1px solid #aaa; border-bottom: none; background: #e6e6e6; cursor: pointer; }
.an .tab.on { background: #fff; font-weight: 600; }
.an-scroll { max-height: 48vh; overflow: auto; background: #fff; border: 1px solid #bbb; }
.an-table { border-collapse: collapse; margin: 0 auto; font-family: "Courier New", monospace; }
.an-table th, .an-table td { border: 1px solid #ccc; padding: 1px 10px; text-align: center; min-width: 2.2em; }
.an-table th { background: #eef2f8; position: sticky; top: 0; }
.an-table th.out, .an-table td.out { background-color: #f4fbf0; }
.an-table td.cell { cursor: pointer; user-select: none; }
.an-table td.cell:hover { background: #cfe4ff; }
.an-expr { padding: 6px 10px; border-bottom: 1px solid #eee; font-size: 14px; }
.an-expr code { font-family: "Courier New", monospace; white-space: pre-wrap; }

.rate { font: 12px/1 ui-monospace, Menlo, Consolas, monospace; color: #333; min-width: 92px; padding: 0 6px; }
.rate.slow { color: #b45f00; }

/* appearance editor */
#apbar { display: none; align-items: center; gap: 2px; padding: 3px 6px; background: #f3f3f3; border-bottom: 1px solid #d0d0d0; }
#apbar .tb { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: none; border-radius: 3px; cursor: pointer; }
#apbar .tb.txt { width: auto; padding: 0 8px; border-color: #bbb; background: #fff; font: inherit; }
#apbar .tb.on { background: #cfe0ff; border-color: #7aa7ff; }
#apbar .tb:hover { background: #e4ecfb; }
#apbar .grow { flex: 1; }
body.appearance-mode #apbar { display: flex; }
body.appearance-mode #canvaswrap { background: #fcfcf4; }
.seg { display: inline-flex; border: 1px solid #aaa; border-radius: 4px; overflow: hidden; margin-left: 8px; }
.seg button { border: 0; background: #fff; padding: 2px 10px; font: inherit; cursor: pointer; }
.seg button + button { border-left: 1px solid #aaa; }
.seg button.on { background: #cfe0ff; font-weight: 600; }

#tip { position: fixed; z-index: 1000; display: none; pointer-events: none; background: #ffffe1; color: #000; border: 1px solid #000; padding: 2px 5px; font: 12px/1.3 sans-serif; max-width: 360px; box-shadow: 1px 1px 2px rgba(0,0,0,.25); }
#crumbs .ro { color: #8a5a00; background: #fff3cd; border: 1px solid #e6c866; border-radius: 3px; padding: 1px 6px; margin-right: 8px; font-size: 12px; }
#explorer .node.item.dim { color: #999; font-style: italic; }
#toolbar .tb:disabled { color: #aaa; border-color: #ddd; background: #f4f4f4; cursor: default; }
#toolbar .tb:disabled:hover { border-color: #ddd; background: #f4f4f4; }

.imgpanel:not(:empty) { border: 1px solid #bbb; background: #f7f9fc; padding: 6px 8px; margin: 6px 0; }
.imgpanel .imghead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.imgpanel .imgname { width: 180px; }
.imgpanel .imglist { max-height: 120px; overflow: auto; margin-top: 6px; background: #fff; border: 1px solid #ddd; }
.imgpanel .imgnote { margin-top: 4px; color: #345; font-size: 12px; }
/* Project > Options */
.opt-tabs { display: flex; gap: 2px; border-bottom: 1px solid #b9c3d6; margin-bottom: 10px; }
.opt-tabs button { border: 1px solid #b9c3d6; border-bottom: 0; background: #e9edf5; padding: 5px 14px; border-radius: 4px 4px 0 0; cursor: pointer; }
.opt-tabs button.on { background: #fff; font-weight: 600; }
.opt-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.opt-row label { min-width: 210px; }
.opt-two { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; min-height: 280px; }
.opt-tree, .opt-list { border: 1px solid #b9c3d6; background: #fff; height: 260px; overflow: auto; }
.opt-grp { font-weight: 600; padding: 3px 6px; background: #eef1f7; cursor: pointer; user-select: none; }
.opt-tool, .opt-item { padding: 3px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.opt-tool.sel, .opt-item.sel { background: #cfe0ff; }
.opt-item.sep { color: #777; }
.opt-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.opt-help { margin-bottom: 4px; color: #444; }
.opt-note { color: #555; font-size: 12px; margin-top: 6px; }
.opt-atitle { font-weight: 600; margin: 6px 0 2px; }
.opt-attrs { max-height: 150px; overflow: auto; }
.opt-v { color: #333; }
.fontedit { display: flex; flex-direction: column; gap: 3px; }
.fontedit > div { display: flex; gap: 3px; }
.fontedit select { min-width: 0; width: 100%; }
.fontedit > div select { flex: 1; }