/* Layout scales with the window: 1rem ≈ 14 px on a 1600 px-wide screen.
   Fixed-height bars, fixed table columns and locked text blocks keep every module in place
   when the theme or the language is switched. */
html { font-size: clamp(11px, min(0.875vw, 1.55vh), 18px); }

:root, :root[data-theme="kh"] {
  --c-primary: #0081c6; --c-primary-dark: #00609a; --c-topbar: #0081c6;
  --c-titlebar: #c6e3f3; --c-titlebar-line: #b5d6ea; --c-title: #0b3c5d;
  --c-panel: #f0f5fd; --c-accent: #a40f16; --c-page: #f7f9fc; --c-text: #333;
  --font: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --font-title: var(--font);
  --font-h1: var(--font);
}
:root[data-theme="kw"] {
  --c-primary: #7a282d; --c-primary-dark: #5e1e22; --c-topbar: #7a282d;      /* KwangWoon Brown */
  --c-titlebar: #f3eaea; --c-titlebar-line: #e2cfd0; --c-title: #4a171b;
  --c-panel: #faf5f5; --c-accent: #920800; --c-page: #f8f8f8; --c-text: #222;
  --font: 'ShinGulim', '신굴림', 'Gulim', sans-serif;
  --font-title: 'PrintingGothic300', 'ShinGulim', sans-serif;
  --font-h1: 'ShinGulim', '신굴림', sans-serif;
}
:root[data-theme="kw"][lang="en"] { --font-title: 'Times New Roman', Times, serif; --font-h1: 'Times New Roman', Times, serif; }
/* KW theme: 공간컴퓨팅연구소 = 활자고딕300, 시스템 제목 = 신굴림 (single-weight fonts → no synthetic bold) */
:root[data-theme="kw"] .brand .dept { font-family: var(--font-title); font-weight: 400; font-size: 1.5rem; }
:root[data-theme="kw"] .kh-titlebar h1 { font-weight: 700; }
:root {
  --c-sub: #555; --c-muted: #777; --c-line: #ddd;
  --ok: #1b8a4b; --warn: #c77700; --bad: #a40f16;
  --radius: 0.43rem; --surface: #fff;
  --band-h: rgba(0, 131, 0, 0.08); --band-d: rgba(227, 73, 72, 0.10);
  --h-top: 3.6rem; --h-title: 3.1rem; --h-foot: 2.2rem; --h-card: 2.5rem; --h-btn: 2.3rem; --h-row: 2rem; --h-chip: 1.85rem;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--font); color: var(--c-text); background: var(--c-page); font-size: 1rem; line-height: 1.5; display: flex; flex-direction: column; min-height: 0; }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- header (fixed heights) ---------- */
.kh-header { flex-shrink: 0; }
.kh-top { height: var(--h-top); background: var(--c-topbar); color: #fff; display: flex; align-items: center; gap: 1rem; padding: 0 1.4rem; }
.brand { display: flex; align-items: center; gap: 1rem; height: 100%; flex-shrink: 0; width: auto; min-width: 34rem; }
.brand .logo { height: 2.75rem; width: 13.75rem; object-fit: contain; object-position: left center; display: block; flex-shrink: 0; }
.brand .logo-kw { height: 2.3rem; width: auto; }
.brand .divider { flex-shrink: 0; width: 1px; height: 1.9rem; background: rgba(255, 255, 255, .45); }
.brand .dept { display: flex; align-items: center; gap: 0.5rem; font-size: 1.28rem; font-weight: 700; white-space: nowrap; }
.brand .dept img { height: 1.3rem; width: auto; display: none; }
.logo-kw { display: none !important; }
:root[data-theme="kw"] .logo-kh { display: none !important; }
:root[data-theme="kw"] .logo-kw { display: block !important; }
:root[data-theme="kw"] .brand .dept img { display: block; }
.kh-top .spacer { flex: 1; }
.kh-top .ver { width: 4.4rem; text-align: center; font-size: 0.86rem; line-height: 1.5rem; border: 1px solid rgba(255,255,255,.6); border-radius: 0.15rem; }
.kh-top .demo { width: 7.6rem; text-align: center; font-size: 0.86rem; line-height: 1.5rem; font-weight: 700; border-radius: 0.15rem; background: #ffd34d; color: #3b2a00; }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,.7); border-radius: 0.3rem; overflow: hidden; height: 1.9rem; }
.seg button { width: 4.6rem; background: transparent; color: #fff; border: 0; padding: 0; cursor: pointer; font-size: 0.89rem; white-space: nowrap; }
.seg button + button { border-left: 1px solid rgba(255,255,255,.5); }
.seg button.on { background: #fff; color: var(--c-primary); font-weight: 700; }
.kh-titlebar { height: var(--h-title); background: var(--c-titlebar); padding: 0 1.4rem; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--c-titlebar-line); }
.kh-titlebar h1 { margin: 0; width: 33rem; flex-shrink: 0; font-family: var(--font-h1); font-size: 1.36rem; font-weight: 700; color: var(--c-title); }
:root[data-theme="kw"] .kh-titlebar h1 { font-weight: 700; }
.kh-titlebar .sub { flex: 1; min-width: 0; color: var(--c-sub); font-size: 0.93rem; }
.steps { display: flex; gap: 0; flex-shrink: 0; border: 1px solid var(--c-titlebar-line); border-radius: 0.15rem; background: #fff; overflow: hidden; }
.steps span { width: 9.4rem; height: 1.75rem; line-height: 1.75rem; text-align: center; cursor: pointer; user-select: none; color: var(--c-muted); font-size: 0.86rem;
  background: #fff; border-left: 1px solid var(--c-titlebar-line); box-shadow: inset 0 -0.2rem 0 transparent; }
.steps span:first-child { border-left: 0; }
.steps span:hover { color: var(--c-primary); background: var(--c-panel); }
.steps span.done { color: var(--c-primary); box-shadow: inset 0 -0.2rem 0 var(--c-primary); }
.steps span.on { background: var(--c-primary); color: #fff; font-weight: 700; box-shadow: none; }

/* ---------- main layout ---------- */
.layout { flex: 1; min-height: 0; display: flex; gap: 1.1rem; padding: 0.9rem 1.4rem; }
.col-left { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.left-fixed { flex-shrink: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.splitter { position: relative; flex-shrink: 0; height: 0.75rem; margin: 0.15rem 0; cursor: row-resize; display: flex; align-items: center; justify-content: center; }
.splitter::before { content: ''; width: 100%; height: 0.3rem; border-radius: 0.15rem; background: var(--c-line); }
.splitter::after { content: ''; position: absolute; width: 3rem; height: 0.3rem; border-radius: 0.15rem; background: var(--c-primary); opacity: .7; }
.splitter:hover::before, .splitter.drag::before { background: var(--c-titlebar-line); }
.left-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.85rem; padding-right: 0.3rem; }
.col-right { width: 31rem; flex-shrink: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.85rem; padding-right: 0.3rem; }
.left-scroll > *, .col-right > * { flex-shrink: 0; }
.left-scroll, .col-right, html, body { overflow-anchor: none; }

.card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); scroll-margin-top: 0.5rem; }
.card > h2 { margin: 0; height: var(--h-card); font-size: 1.07rem; font-weight: 700; color: #fff; background: var(--c-primary); padding: 0 1rem; border-radius: var(--radius) var(--radius) 0 0; display: flex; align-items: center; gap: 0.55rem; white-space: nowrap; overflow: hidden; }
.card > h2 > span:first-child, .card > h2 > .t { overflow: hidden; text-overflow: ellipsis; }
.card > h2 .num { flex-shrink: 0; display: inline-flex; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #fff; color: var(--c-primary); font-size: 0.86rem; align-items: center; justify-content: center; }
.card > h2 .right { margin-left: auto; font-weight: 400; font-size: 0.86rem; opacity: .95; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.4rem; }
.card > h2 .right a { color: #fff; }
.card .body { padding: 0.85rem 1rem; }
.card.panel { background: var(--c-panel); }
.card.flash { box-shadow: 0 0 0 3px var(--c-titlebar), 0 0 0 5px var(--c-primary); }

/* ---------- viewer ---------- */
.viewer { position: relative; height: var(--viewer-h, 50vh); width: min(100%, calc(var(--viewer-h, 50vh) * 16 / 9)); margin: 0 auto; background: #0d1620; border-radius: var(--radius); overflow: hidden; user-select: none; }
#stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
#video, #playVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#playVideo { display: none; }
.viewer.playing #video { visibility: hidden; }
.viewer.playing #playVideo { display: block; }
.viewer.mirrored #video, .viewer.mirrored #playVideo { transform: scaleX(-1); }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.viewer.zoomable { cursor: grab; }
.viewer.dragging { cursor: grabbing; }
.viewer.adjusting { cursor: crosshair; }
.viewer-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #c9d6e2; font-size: 1.07rem; text-align: center; padding: 1.4rem; pointer-events: none; }
.rec-badge { position: absolute; top: 0.7rem; right: 0.7rem; background: rgba(164, 15, 22, .92); color: #fff; padding: 0.25rem 0.7rem; border-radius: 0.3rem; font-weight: 700; display: none; }
.mode-badge { position: absolute; top: 0.7rem; left: 0.7rem; background: rgba(0, 0, 0, .55); color: #fff; width: 8.6rem; height: 1.75rem; line-height: 1.75rem; text-align: center; overflow: hidden; text-overflow: ellipsis; border-radius: 0.3rem; font-size: 0.89rem; white-space: nowrap; }
.mode-badge.locked { background: var(--c-primary); }
.mode-badge.play { background: #3a3938; }
.capture-bar { position: absolute; left: 0; bottom: 0; height: 0.35rem; background: var(--c-primary); width: 0; transition: width .1s; }

.toolbar, .player { display: flex; align-items: center; gap: 0.5rem; width: min(100%, max(52rem, calc(var(--viewer-h, 50vh) * 16 / 9))); margin: 0 auto; height: var(--h-btn); flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.toolbar label { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--c-sub); font-size: 0.89rem; flex-shrink: 0; }
.toolbar select { height: 1.9rem; padding: 0 0.4rem; font-size: 0.89rem; }
/* fixed widths so nothing moves when the theme font or the language changes */
#optScheme { width: 8.4rem; flex-shrink: 0; }
.toolbar label { overflow: hidden; }
.toolbar label > span { overflow: hidden; text-overflow: ellipsis; }
.toolbar label:has(#optPairs) { width: 5.8rem; }
.toolbar label:has(#optMirror) { width: 8.6rem; }
.toolbar label:has(#optLabels) { width: 4.6rem; }
.toolbar label:has(#optGuide2) { width: 9.4rem; }
.toolbar label:has(#optGuide) { width: 8.3rem; }
.toolbar label:has(#optMarker) > span:first-child, .toolbar label:has(#optLabelSize) > span:first-child { width: 3.1rem; }
.toolbar input[type=range] { width: 5.5rem; }
.toolbar .grow, .player .grow { flex: 1; }
.zoom { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.zoom .btn { width: 2.1rem; padding: 0; height: 1.9rem; }
#zoomLabel { width: 3.2rem; text-align: center; font-size: 0.93rem; color: var(--c-sub); }
.player { display: none; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 0 0.6rem; }
.player.show { display: flex; }
.player .pbtn { width: 2.2rem; height: 1.8rem; padding: 0; font-size: 0.93rem; }
.player input[type=range] { flex: 1; min-width: 6rem; }
.player .ptime { width: 7.5rem; text-align: right; font-size: 0.89rem; color: var(--c-sub); font-variant-numeric: tabular-nums; }
.player select { height: 1.8rem; font-size: 0.86rem; padding: 0 0.3rem; }
.player .pbtn.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.btn { height: var(--h-btn); border: 1px solid var(--c-line); background: #fff; color: var(--c-text); padding: 0 0.9rem; border-radius: 0.3rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn.primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn.primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn.danger { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn.on { background: #ffefe0; border-color: var(--warn); color: var(--warn); }
.btn.mini { height: 1.7rem; padding: 0 0.6rem; font-size: 0.86rem; }
.card > h2 .btn.mini { background: rgba(255,255,255,.95); color: var(--c-primary); border-color: transparent; width: 7.5rem; }
.btn.w10 { width: 10.5rem; } .btn.w8 { width: 8.5rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
select, input[type=text], input[type=number], input[type=date], input[type=password], input[type=search], textarea { height: var(--h-btn); border: 1px solid var(--c-line); border-radius: 0.3rem; padding: 0 0.55rem; background: #fff; color: var(--c-text); min-width: 0; }
textarea { height: 3.6rem; line-height: 1.4rem; padding: 0.35rem 0.55rem; resize: none; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--c-titlebar); border-color: var(--c-primary); }

/* ---------- quality chips: fixed 2-column grid ---------- */
.quality { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.chip { height: var(--h-chip); display: flex; align-items: center; gap: 0.55rem; padding: 0 0.6rem 0 0.55rem; font-size: 0.86rem;
  border: 1px solid var(--c-line); border-left: 0.22rem solid #b9b9b9; border-radius: 0.15rem; background: #fff; color: var(--c-text); white-space: nowrap; overflow: hidden; }
.chip .k { flex-shrink: 0; width: 3rem; overflow: hidden; color: var(--c-muted); font-size: 0.8rem; }
.chip .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.chip.wide { grid-column: 1 / -1; }
.chip.ok { border-left-color: var(--ok); }
.chip.warn { border-left-color: var(--warn); background: #fffaf2; }
.chip.warn .v { color: var(--warn); }
.chip.bad { border-left-color: var(--bad); background: #fdf5f5; }
.chip.bad .v { color: var(--bad); }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem 0.7rem; align-items: center; }
.form label { color: var(--c-sub); font-size: 0.93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form .req::after { content: ' *'; color: var(--c-accent); }
.note { font-size: 0.86rem; color: var(--c-muted); line-height: 1.55; margin: 0.6rem 0; }
.row { display: flex; gap: 0.55rem; align-items: center; flex-wrap: nowrap; min-height: var(--h-btn); }
.row + .row { margin-top: 0.55rem; }
.row .lbl { width: 12rem; flex-shrink: 0; font-size: 0.86rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row select, .row input { flex: 1; }
.kv { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.2rem 0.8rem; font-size: 0.93rem; margin: 0.6rem 0 0; }
.kv dt { color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { height: var(--h-btn); line-height: var(--h-btn); font-size: 0.93rem; padding: 0 0.7rem; border-radius: 0.3rem; background: var(--c-panel); color: var(--c-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status.ok { background: #effaf3; color: var(--ok); }
.status.err { background: #fdf0f0; color: var(--bad); }
.status.multi { height: auto; line-height: 1.5; padding: 0.4rem 0.7rem; white-space: normal; }
.oneline { min-height: 1.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- tables: fixed columns, fixed row height ---------- */
.tbl-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.89rem; }
table.grid th { background: var(--c-panel); color: var(--c-title); font-weight: 700; border-top: 2px solid var(--c-primary); }
table.grid th, table.grid td { height: var(--h-row); padding: 0 0.5rem; border-bottom: 1px solid #e8edf3; text-align: left; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.wrap { white-space: normal; height: auto; padding: 0.3rem 0.5rem; }
table.grid tr.sel td { background: #fff7ea; }
table.grid tr.grp td { background: #fafafa; color: var(--c-title); font-weight: 700; }
#elecTable { min-width: 44rem; }
.tag { display: inline-flex; align-items: center; justify-content: center; width: 4.3rem; height: 1.3rem; font-size: 0.79rem; border-radius: 0.2rem; background: var(--c-panel); color: var(--c-primary); vertical-align: middle; overflow: hidden; white-space: nowrap; }
.cellflex { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.tag.man { background: #fff1e0; color: var(--warn); }
.tag.apx { background: #f3f3f3; color: var(--c-muted); }
.sessions a, .refs a { color: var(--c-primary); text-decoration: none; word-break: break-all; }
.sessions a:hover, .refs a:hover { text-decoration: underline; }
.sessions details { display: inline; }
details summary { cursor: pointer; color: var(--c-primary); }
.sw-dot { display: inline-block; flex-shrink: 0; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.05rem; }


/* ---------- illustration & references ---------- */
.illus-opts { display: flex; align-items: center; gap: 1rem; height: 2.2rem; margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; }
.illus-opts select { width: 8rem; height: 1.9rem; }
.illus-opts label { display: inline-flex; align-items: center; gap: 0.3rem; width: 7.5rem; flex-shrink: 0; overflow: hidden; }
.illus-opts .note { margin: 0; overflow: hidden; text-overflow: ellipsis; }
label.off { opacity: .4; }
.illus-preview { border: 1px dashed var(--c-line); border-radius: 0.3rem; min-height: 6rem; display: flex; align-items: center; justify-content: center; background: #fff; padding: 0.4rem; }
.illus-preview svg { width: 100%; max-width: 34rem; height: auto; }
ol.refs { margin: 0; padding-left: 1.4rem; font-size: 0.89rem; line-height: 1.5; }
ol.refs li + li { margin-top: 0.55rem; }
ol.refs .note { margin: 0.15rem 0 0; }

footer { flex-shrink: 0; height: var(--h-foot); border-top: 3px solid var(--c-primary); background: #fff; padding: 0 1.4rem; font-size: 0.86rem; color: var(--c-muted); display: grid; grid-template-columns: 24rem 33rem 6rem minmax(0, 1fr); align-items: center; column-gap: 1.1rem; white-space: nowrap; overflow: hidden; }
footer > * { overflow: hidden; text-overflow: ellipsis; }
footer b { color: var(--c-sub); font-weight: 700; }
footer a { color: var(--c-primary); }
footer .ft-note { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- narrow windows: stack columns, page scrolls ---------- */
@media (max-width: 1100px), (max-aspect-ratio: 1/1) {
  html { font-size: clamp(11px, 1.6vw, 15px); }
  html, body { overflow: auto; height: auto; }
  .layout { flex-direction: column; }
  .col-left, .col-right { width: auto; overflow: visible; }
  .left-scroll { overflow: visible; }
  .splitter { display: none; }
  .steps, .kh-titlebar .sub, .kh-top .pi { display: none; }
  .brand { width: auto; }
}

#refreshSessions { display: inline-block; width: 5rem; text-align: right; }
#card5 label.oneline { display: flex; align-items: center; height: 1.6rem; gap: 0.3rem; }
/* checkboxes scale with the rem size like the text next to them */
input[type=checkbox] { width: 0.95rem; height: 0.95rem; margin: 0; flex-shrink: 0; }

/* layout-specific items shaded when that layout is not selected */
.scheme-off { opacity: .35; filter: grayscale(1); }

/* ---------- v1.4: header user box (replaces the "demo" label) ---------- */
.userbox { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.hbtn { display: inline-block; height: 1.9rem; line-height: 1.8rem; width: 6.4rem; padding: 0; text-align: center; font-size: 0.86rem; color: #fff; font-family: inherit;
  border: 1px solid rgba(255,255,255,.7); border-radius: 0.3rem; background: transparent; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbtn:hover { background: rgba(255,255,255,.16); }
.hbtn.on { background: #fff; color: var(--c-primary); font-weight: 700; }
@media (max-width: 1450px) { .kh-top .pi { display: none; } }

/* ---------- v1.4: simple pages (login / saved data / admin) ---------- */
.page { flex: 1; min-height: 0; overflow: auto; padding: 0.9rem 1.4rem; display: flex; flex-direction: column; gap: 0.85rem; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 31rem; gap: 1.1rem; align-items: start; }
.page-grid > * { min-width: 0; }
.bar { display: flex; gap: 0.55rem; align-items: center; margin-bottom: 0.65rem; }
.bar .grow { flex: 1; }
.bar input[type=search] { width: 20rem; }
.bar select { width: 12rem; }
.form-grid { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.45rem 0.6rem; align-items: center; }
.form-grid > label { font-size: 0.86rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
.form-grid textarea { height: 4.2rem; padding: 0.35rem 0.55rem; resize: vertical; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .chk { display: flex; align-items: center; gap: 0.4rem; font-size: 0.89rem; color: var(--c-text); }
.actions { display: flex; gap: 0.3rem; }
.actions .btn.mini { width: auto; }
table.grid td.act { overflow: visible; }
table.grid tr.cur td { background: #fff7ea; }
table.grid tbody tr:hover td { background: var(--c-panel); }
.btn.block { width: 100%; }
.btn.danger:hover { color: #fff; filter: brightness(1.1); }
.btn.ghost-danger { color: var(--bad); }
.btn.ghost-danger:hover { border-color: var(--bad); color: var(--bad); }
.preview img { display: block; max-width: 100%; border: 1px solid var(--c-line); border-radius: var(--radius); background: #000; }
.files { list-style: none; margin: 0; padding: 0; font-size: 0.89rem; }
.files li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.2rem 0; border-bottom: 1px solid #eef1f5; }
.files li a { color: var(--c-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files li span { color: var(--c-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.secret { margin-top: 0.5rem; background: #fffbe6; border: 1px solid #ffd34d; padding: 0.45rem 0.7rem; border-radius: 0.3rem; font-size: 0.93rem; word-break: break-all; }
.secret code { font-family: Consolas, ui-monospace, monospace; font-size: 1.05rem; user-select: all; }
.pill { display: inline-block; padding: 0 0.5rem; border-radius: 0.8rem; font-size: 0.79rem; line-height: 1.35rem; background: var(--c-panel); color: var(--c-primary); }
.pill.off { background: #f3f3f3; color: var(--c-muted); }
.pill.adm { background: #fff1e0; color: var(--warn); }
.muted { color: var(--c-muted); }
/* login */
.login-wrap { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.login-card { width: 28rem; max-width: 100%; }
.login-card .body { display: flex; flex-direction: column; gap: 0.7rem; }
.login-card .field { display: flex; flex-direction: column; gap: 0.25rem; }
.login-card .field label { font-size: 0.86rem; color: var(--c-muted); }
.login-card input { width: 100%; }
.login-card .note { margin: 0; }
.login-card .status { height: auto; line-height: 1.5; padding: 0.4rem 0.7rem; white-space: normal; }
.login-card .status:empty { display: none; }
@media (max-width: 1100px), (max-aspect-ratio: 1/1) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .hbtn { width: 5.4rem; }
}
/* saved session shown as a still image in the viewer */
#stillImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
.viewer.still #stillImg { display: block; }
.viewer.still #video { visibility: hidden; }
.viewer.mirrored #stillImg { transform: scaleX(-1); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
[hidden] { display: none !important; }
.page .status:empty { display: none; }
.form-grid input[type=checkbox] { width: 0.95rem; }
.pill.lock { background: #fdf0f0; color: var(--bad); font-weight: 700; }

/* ---------- v1.4.1: alignment of the login / data / admin pages ---------- */
body.simple { min-height: 100vh; }
.login-wrap { display: flex; align-items: center; justify-content: center; }
.login-card .btn, .page .btn:not(.mini) { height: var(--h-btn); }
.login-card .btn.block, .login-card a.btn { width: 100%; display: flex; align-items: center; justify-content: center; }
/* toolbar: every control the same height, one baseline */
.bar { min-height: var(--h-btn); }
.bar > * { height: var(--h-btn); flex-shrink: 0; }
.bar .btn.mini { height: var(--h-btn); padding: 0 1rem; font-size: 0.93rem; }
/* forms: label column | control column, every control the same height */
.form-grid { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.5rem 0.75rem; }
.form-grid > label { line-height: var(--h-btn); height: var(--h-btn); }
.form-grid > label.chk { height: auto; line-height: 1.5; padding: 0.15rem 0; }
.form-grid > label[for="eMemo"], .form-grid > label[for="fNote"] { align-self: start; }
.form-grid input:not([type=checkbox]), .form-grid select { height: var(--h-btn); }
.form-grid > .note { margin: 0; }
.inline2 { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0.5rem; }
.inline2 .btn { width: 100%; padding: 0; }
.form-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.35rem; }
.form-actions .btn { width: 100%; height: var(--h-btn); display: flex; align-items: center; justify-content: center; padding: 0; }
#uForm .form-actions { grid-template-columns: 1fr; }
#uForm .form-actions.two { grid-template-columns: 1fr 1fr; }
.subhead { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; height: var(--h-btn); margin: 0.9rem 0 0.45rem; border-bottom: 1px solid var(--c-line); }
.subhead h3 { margin: 0; font-size: 0.96rem; color: var(--c-title); }
.subhead .btn.mini { width: 5rem; }
/* table action buttons: equal height, centred in the row */
table.grid td.act .actions { align-items: center; height: 100%; }
table.grid td.act .btn.mini { height: 1.6rem; padding: 0 0.55rem; display: inline-flex; align-items: center; justify-content: center; }
table.grid td.act { vertical-align: middle; }
/* card header button */
.card > h2 .right .btn.mini { height: 1.7rem; }
.preview { margin-bottom: 0.2rem; }
.tablewrap { overflow-x: auto; }
#dTable { min-width: 81rem; }
#uTable { min-width: 66rem; }
@media (max-width: 1100px), (max-aspect-ratio: 1/1) {
  .kh-top { height: auto; min-height: var(--h-top); flex-wrap: wrap; row-gap: 0.4rem; padding: 0.4rem 0.8rem; }
  .brand { min-width: 0; }
  .kh-top .ver { display: none; }
  .kh-top .spacer { display: none; }
  .userbox { flex-wrap: wrap; margin-left: auto; }
  .page { padding: 0.8rem; }
}
html.auth-pending body { visibility: hidden; }
body.simple .kh-titlebar .sub { text-align: right; }
.pill.exm { background: #eaf6ee; color: var(--ok); }
/* header user chip: same height / corners as the other header buttons, left of the version */
.userchip-slot { display: flex; flex-shrink: 0; }
.userchip-slot:empty { display: none; }
.userchip { display: flex; align-items: center; justify-content: center; width: 14rem; height: 1.9rem; padding: 0 0.7rem; border: 1px solid #ffd34d;
  border-radius: 0.3rem; background: #ffd34d; color: #3b2a00; text-decoration: none; font-size: 0.86rem; font-weight: 700; line-height: 1; }
.userchip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip:hover { background: #ffe07a; border-color: #ffe07a; }
.kh-top .ver { height: 1.9rem; line-height: 1.75rem; border-radius: 0.3rem; }
@media (max-width: 1100px), (max-aspect-ratio: 1/1) { .userchip { width: 11rem; } }
/* recent sessions on the capture page: fixed height whether there is data or not */
.card.sessions > .body { height: 15rem; overflow: auto; }
#pidMsg { height: 3.3rem; line-height: 1.4; padding: 0.35rem 0.7rem; white-space: normal; overflow: hidden; }
#pidMsg:empty { background: transparent; }
/* saved-data list (data page): same card size with or without sessions */
.tablewrap:has(#dTable) { height: 26rem; overflow: auto; }
#dDetailBody { min-height: 31.6rem; }
.kh-titlebar .sub { text-align: right; }