/* KedDiffraction — Electron UI. Mirrors the WinForms layout of MainForm.cs. */
:root {
  --panel: rgb(245, 246, 248);
  --border: rgb(196, 200, 206);
  --text: rgb(28, 28, 30);
  --font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 12px/1.35 var(--font); color: var(--text); background: var(--panel); user-select: none; }
body.wait, body.wait * { cursor: progress !important; }
#root { display: flex; flex-direction: column; height: 100%; }
.hidden { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }

/* tabs */
.tabs { display: flex; align-items: flex-end; gap: 2px; padding: 4px 4px 0; background: rgb(232, 234, 238); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.tab { border: 1px solid var(--border); border-bottom: none; background: rgb(240, 241, 244); padding: 4px 16px; border-radius: 4px 4px 0 0; cursor: pointer; }
.tab.active { background: var(--panel); font-weight: bold; position: relative; top: 1px; }
.tab.lang { font-weight: normal; padding: 3px 10px; margin-bottom: 3px; border-radius: 4px; border-bottom: 1px solid var(--border); }
.spacer { flex: 1; }
.pages { flex: 1; min-height: 0; position: relative; }
.status { flex: 0 0 24px; border-top: 1px solid var(--border); background: rgb(240, 240, 240); display: flex; align-items: center; padding: 0 8px; }
.status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* main page */
.home { display: flex; height: 100%; }
.left { flex: 0 0 396px; box-sizing: border-box; padding: 12px 8px 12px 12px; overflow-y: auto; overflow-x: hidden; background: var(--panel); }
.stack { width: 360px; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
.stack > .btn { height: 30px; width: 360px; }
.row { display: flex; gap: 8px; }
.row > .btn { flex: 1; height: 30px; }
.btn { border: 1px solid rgb(173, 173, 173); background: rgb(225, 225, 225); border-radius: 2px; padding: 0 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 30px; }
.btn:hover:not(:disabled) { background: rgb(229, 241, 251); border-color: rgb(0, 120, 215); }
.btn:active:not(:disabled) { background: rgb(204, 228, 247); }
.btn:disabled { color: rgb(150, 150, 150); cursor: default; }
.btn.primary { min-width: 90px; }
.section { font-size: 13.3px; font-weight: bold; height: 22px; display: flex; align-items: flex-end; }
.field { display: flex; align-items: center; height: 30px; }
.field-label { flex: 0 0 168px; }
.field-input { flex: 1; min-width: 0; display: flex; }
.field-unit { flex: 0 0 52px; padding-left: 6px; }
.field-unit.wide { flex: 0 0 108px; }
.triple { display: flex; gap: 4px; width: 100%; }
.triple > .num { flex: 1; min-width: 0; }
.info { height: 120px; width: 360px; resize: none; border: 1px solid rgb(122, 122, 122); background: #fff; padding: 3px; font-size: 12px; user-select: text; white-space: pre; overflow: auto; }
.readline { height: 22px; display: flex; align-items: center; color: rgb(40, 40, 40); }
.target-tilt { min-height: 48px; color: rgb(40, 40, 40); }
.check { display: flex; align-items: center; gap: 6px; min-height: 24px; cursor: default; }
.check input { margin: 0; }

/* NumericUpDown */
.num { display: flex; height: 23px; width: 100%; border: 1px solid rgb(122, 122, 122); background: #fff; }
.num input { flex: 1; min-width: 0; border: none; outline: none; padding: 0 3px; background: transparent; user-select: text; }
.num:focus-within { border-color: rgb(0, 120, 215); }
.spins { display: flex; flex-direction: column; width: 16px; border-left: 1px solid rgb(220, 220, 220); }
.spin { flex: 1; border: none; padding: 0; margin: 0; font-size: 7px; line-height: 1; background: rgb(240, 240, 240); cursor: default; }
.spin:hover { background: rgb(218, 234, 247); }
.num.readout { border-color: rgb(170, 170, 170); }

/* pattern stage */
.right { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px 8px 0 8px; background: rgb(18, 18, 18); }
.stage { flex: 1; min-height: 0; position: relative; background: #000; display: flex; flex-direction: column; }
.picture { flex: 1; min-height: 0; position: relative; }
.pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; outline: none; image-rendering: auto; }
.placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: silver; pointer-events: none; }
.caption { flex: 0 0 28px; display: flex; align-items: center; padding: 0 8px 0 10px; color: rgb(230, 230, 230); background: rgb(18, 18, 18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cellbox { position: absolute; right: 6px; bottom: 34px; width: 132px; height: 132px; background: #000; }
.cell { width: 100%; height: 100%; display: block; }
.cell-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: dimgray; pointer-events: none; }
.spots { flex: 0 0 210px; overflow: auto; background: #fff; }
.spots table { border-collapse: collapse; width: 100%; }
.spots th, .spots td { border: 1px solid rgb(230, 230, 230); padding: 1px 6px; text-align: left; width: 90px; white-space: nowrap; }
.spots th { position: sticky; top: 0; background: rgb(248, 248, 248); font-weight: normal; }
.spots tr:hover td { background: rgb(229, 243, 255); }

/* context menu */
.menu { position: fixed; z-index: 100000; background: #f2f2f2; border: 1px solid rgb(160, 160, 160); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); padding: 2px 0; min-width: 220px; }
.menu-item { padding: 4px 24px; cursor: default; }
.menu-item:hover:not(.disabled) { background: rgb(145, 201, 247); }
.menu-item.disabled { color: rgb(160, 160, 160); }
.menu-sep { height: 1px; background: rgb(200, 200, 200); margin: 3px 2px; }

/* atlas */
.atlas-page { display: flex; flex-direction: column; height: 100%; background: var(--panel); }
.atlas-bar { flex: 0 0 46px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 0 8px; }
.atlas-bar .btn { width: 120px; }
.atlas-bar .num { width: 64px; }
.atlas-label { padding-right: 4px; }
.atlas-status { padding-left: 8px; }
.atlas-hint { flex: 0 0 28px; padding: 4px 0 0 12px; }
.atlas-cards { flex: 1; min-height: 0; overflow: auto; padding: 8px; display: flex; flex-wrap: wrap; align-content: flex-start; }
.atlas-card { width: 210px; height: 238px; margin: 6px; background: #fff; cursor: pointer; display: flex; flex-direction: column; }
.atlas-img { width: 210px; height: 200px; object-fit: contain; background: #000; display: block; }
.atlas-caption { flex: 1; display: flex; align-items: center; justify-content: center; }

/* windows */
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.12); }
.window { position: fixed; display: flex; flex-direction: column; background: rgb(240, 240, 240); border: 1px solid rgb(100, 110, 125); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); }
.win-head { flex: 0 0 32px; display: flex; align-items: center; background: #fff; border-bottom: 1px solid rgb(220, 220, 220); padding-left: 10px; cursor: default; }
.win-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-close { width: 44px; height: 31px; border: none; background: transparent; font-size: 13px; cursor: pointer; }
.win-close:hover { background: rgb(232, 17, 35); color: #fff; }
.win-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.settings { padding: 12px 16px; }
.settings > .btn { width: 360px; }
.msgbox .win-body { padding: 16px; }
.msg-row { display: flex; gap: 12px; align-items: flex-start; }
.msg-icon { flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; background: rgb(0, 102, 204); }
.msg-icon.warn { background: rgb(230, 160, 0); }
.msg-text { white-space: pre-wrap; user-select: text; max-height: 50vh; overflow: auto; padding-top: 4px; }
.msg-buttons, .dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dlg-buttons .btn { width: 100px; }
.dlg-buttons.left { justify-content: flex-start; }
.dlg-text { padding: 16px 16px 0 16px; min-height: 40px; }
.window .dlg-buttons.left { padding: 0 16px 16px; }

/* indexing */
.ix-layout { display: flex; height: 100%; }
.ix-left { flex: 0 0 680px; max-width: 58%; padding: 12px; display: flex; }
.ix-source { flex: 1; width: 100%; height: 100%; background: #000; display: block; }
.ix-tools { flex: 1; min-width: 0; padding: 12px 12px 12px 8px; display: flex; flex-direction: column; }
.ix-hint { flex: 0 0 auto; margin-bottom: 8px; }
.ix-preview { flex: 0 1 480px; min-height: 160px; width: 100%; background: #000; cursor: move; display: block; }
.ix-sliders { flex: 1 1 auto; overflow: auto; padding-top: 4px; }
.ix-slider { height: 52px; }
.ix-slider input { width: 280px; }
.ix-tools .dlg-buttons { margin-top: 6px; }

/* auto index */
.autoindex .win-body { padding: 8px 12px 12px; }
.curve { display: block; background: #fff; }
.ai-bottom { display: flex; gap: 16px; align-items: flex-start; margin-top: 4px; }
.ai-left { flex: 1; }
.ai-label { height: 48px; white-space: pre; }
.ai-bar { width: 100%; height: 22px; }
.ai-bottom .btn { width: 100px; margin-top: 52px; }

/* periodic table */
.periodic .win-body { display: flex; flex-direction: column; overflow: hidden; }
.pt-hint { flex: 0 0 28px; padding: 6px 0 0 12px; }
.pt-main { flex: 1; min-height: 0; display: flex; }
.pt-board-host { flex: 1; min-width: 0; overflow: auto; }
.pt-board { position: relative; width: 800px; height: 520px; }
.pt-tile { position: absolute; border: 1px solid rgb(176, 180, 186); color: rgb(32, 32, 32); padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: bold 10.7px "Segoe UI", var(--font); cursor: pointer; line-height: 1.2; }
.pt-tile:hover { filter: brightness(0.94); }
.pt-tile.on { border: 3px solid rgb(20, 20, 20); }
.pt-tile b { font-size: 10.7px; }
.pt-mark { position: absolute; display: flex; align-items: center; justify-content: center; color: rgb(90, 94, 102); }
.pt-legend { flex: 0 0 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 4px 8px; }
.pt-swatch { display: inline-flex; align-items: center; gap: 4px; }
.pt-swatch i { display: inline-block; width: 12px; height: 12px; }
.pt-list { flex: 0 0 480px; display: flex; flex-direction: column; padding: 4px 8px; min-height: 0; }
.pt-filter-row { flex: 0 0 32px; display: flex; gap: 4px; align-items: center; padding-bottom: 4px; }
.pt-limit-label { width: 60px; }
.pt-filter-row .num { width: 64px; }
.pt-filter { flex: 1; min-width: 0; height: 23px; border: 1px solid rgb(122, 122, 122); padding: 0 4px; user-select: text; }
.pt-filter-row .btn { width: 72px; height: 25px; }
.pt-head { display: flex; background: #fff; border: 1px solid rgb(200, 200, 200); border-bottom: none; }
.pt-head span, .pt-row span { padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; border-right: 1px solid rgb(230, 230, 230); }
.pt-rows { flex: 1; min-height: 0; overflow: auto; position: relative; background: #fff; border: 1px solid rgb(200, 200, 200); outline: none; }
.pt-rows-layer { position: absolute; left: 0; top: 0; right: 0; }
.pt-row { position: absolute; left: 0; height: 22px; display: flex; align-items: center; cursor: default; border-bottom: 1px solid rgb(240, 240, 240); width: 100%; }
.pt-row:hover { background: rgb(229, 243, 255); }
.pt-row.selected { background: rgb(204, 232, 255); }
.pt-status { flex: 0 0 36px; display: flex; align-items: center; padding: 0 8px; }
.pt-cod-row { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.pt-cod-row .btn { flex: 0 0 auto; height: 26px; }
.pt-cod { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(90, 94, 102); }

/* TEM column */
.tem-layout { display: flex; height: 100%; }
.tem-left { flex: 0 0 390px; overflow-y: auto; padding: 12px; background: var(--panel); }
.tem-left .title { font-size: 16px; font-weight: bold; height: 32px; display: flex; align-items: center; }
.tem-left .hint { min-height: 52px; color: rgb(60, 60, 60); }
.tem-left .readout { height: 250px; resize: none; border: 1px solid rgb(122, 122, 122); background: #fff; white-space: pre; user-select: text; font-size: 12px; }
.tem-right { flex: 1; min-width: 0; display: flex; }
.column { flex: 1; width: 100%; height: 100%; display: block; }

.fatal { position: fixed; inset: 20px; background: #fff; color: #a00; border: 1px solid #a00; padding: 12px; overflow: auto; z-index: 999999; white-space: pre-wrap; }

/* web build: a long status line must not widen the list column (flex min-content) */
.pt-list, .pt-cod-row { min-width: 0; }