* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 12px "Segoe UI", Tahoma, sans-serif; background: #ececec; color: #111; display: flex; flex-direction: column; min-width: 1100px; }   /* fixed Eclipse layout: small windows scroll rather than stack */
#titlebar { background: #fff; border-bottom: 1px solid #bbb; padding: 4px 10px; font-weight: 600; }
#caseName { font-weight: 400; color: #555; margin-left: 12px; }
#titlebar { display: flex; align-items: center; }
#btnInstall { margin-left: auto; font-weight: 400; padding: 1px 9px; }
#btnInstall[hidden] { display: none; }
#toolbar { background: linear-gradient(#f7f7f7, #dcdcdc); border-bottom: 1px solid #aaa; padding: 4px 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#toolbar .sp { flex: 1; }
button, select, input { font: inherit; }
button { background: linear-gradient(#fdfdfd, #ddd); border: 1px solid #999; border-radius: 3px; padding: 3px 9px; cursor: pointer; }
button:hover { background: #eef4fb; }
button.go { background: linear-gradient(#e8f6e8, #b9deb9); border-color: #5a9a5a; }
button.big { padding: 8px 12px; font-size: 14px; flex: 1; }
button.big.stop { background: linear-gradient(#fbe6e6, #e2a6a6); border-color: #b05454; }
#sizeHint { background: #fff4c2; border-bottom: 1px solid #d9b84a; padding: 4px 10px; display: flex; align-items: center; gap: 8px; }
#sizeHint[hidden] { display: none; }
#sizeHint #shClose { margin-left: auto; padding: 0 7px; font-size: 14px; line-height: 18px; }
#main { flex: 1; display: flex; min-height: 0; }
#left { width: 320px; flex: none; background: #f4f4f4; border-right: 1px solid #aaa; display: flex; flex-direction: column; overflow-y: auto; }
.tabs { display: flex; }
.tab { flex: 1; border-radius: 0; border-bottom: 1px solid #999; background: #e2e2e2; }
.tab.on { background: #f4f4f4; border-bottom-color: #f4f4f4; font-weight: 600; }
.tabpane { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.tabpane[hidden] { display: none; }
.box { background: #fff; border: 1px solid #c8c8c8; padding: 6px 8px; }
.box .row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; gap: 8px; }
.box .row > span:first-child { color: #333; }
.box input[type=number] { width: 60px; text-align: center; }
.lbl { font-weight: 600; margin-bottom: 4px; }
.hint { color: #666; font-size: 11px; }
.btns { display: flex; gap: 8px; }
.bar { height: 8px; background: #ddd; border: 1px solid #aaa; margin-top: 3px; }
#repBar { height: 100%; width: 0; background: #3b78c9; }
#lvlGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
#lvlGrid button { padding: 2px 0; }
#lvlGrid button.on { background: #3b78c9; color: #fff; border-color: #1f4f96; }
#lvlGrid button:disabled { color: #aaa; background: #f0f0f0; cursor: not-allowed; }
#catBtns button, #waveBtns button { font-weight: 700; min-width: 30px; padding: 3px 7px; }
#catBtns button.on[data-c="CR"] { background: #2e8b3a; color: #fff; border-color: #1f6a2a; }
#catBtns button.on[data-c="NR"] { background: #777; color: #fff; border-color: #555; }
#catBtns button.on[data-c="INC"] { background: #d08a00; color: #fff; border-color: #9a6600; }
.kb { font-size: 9px; font-weight: 400; opacity: .65; margin-left: 3px; }
#nudge button { flex: 1; }
#waveBtns button.on { background: #3b78c9; color: #fff; border-color: #1f4f96; }
.lblgrp .kb { margin-left: 2px; }
#latSel table { border-collapse: collapse; width: 100%; }
#latSel th, #latSel td { border: 1px solid #ccc; padding: 2px 4px; text-align: center; }
#latSel th { background: #eee; }
.li-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px; }
.li-charts canvas { width: 100%; height: 320px; border: 1px solid #ccc; background: #fff; display: block; }
#traceList .tr { display: flex; gap: 6px; align-items: center; padding: 2px 4px; cursor: pointer; border-bottom: 1px solid #eee; }
#traceList .tr.sel { background: #dbe8fa; }
#traceList .tr .tag { font-weight: 700; color: #a11; min-width: 62px; }
#traceList .tr.L .tag { color: #22a; }
#right { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 6px; gap: 6px; overflow-y: auto; }
#strip { background: #fff; border: 1px solid #c8c8c8; padding: 5px 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#strip .conf b { font-size: 15px; }
#strip .conf b.ok { color: #1a8a2a; }
#prog { flex: 1; min-width: 120px; height: 10px; border: 1px solid #999; background: #eee; }
#progFill { height: 100%; width: 0; background: #2fa84f; }
#eeg { background: #fff; border: 1px solid #c8c8c8; }
#maskLvl { width: 52px; }
#zBadge { font-weight: 700; padding: 2px 8px; }
#tab-record { flex: 1; }
#setupBtns { margin-top: auto; padding-top: 8px; border-top: 1px solid #ccc; }   /* bottom of the Record tab */
#setupBtns button { flex: 1; padding: 6px 8px; }
#tbClamp.on { background: #3b78c9; color: #fff; border-color: #1f4f96; }
#zBadge.ok { background: #e3f3e3; border-color: #5a9a5a; color: #1d6b28; }
#zBadge.warn { background: #fdf0d5; border-color: #c89a2e; color: #8a5d00; }
#zBadge.bad { background: #f8dcdc; border-color: #b05454; color: #9b1c1c; }
/* electrodes float: non-modal, dragged by its header */
#elecFloat { position: fixed; right: 24px; top: 110px; width: 360px; background: #fff; border: 1px solid #888; box-shadow: 3px 3px 10px #0004; z-index: 15; }
#elecFloat[hidden] { display: none; }
#elecFloat .fhead { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: linear-gradient(#f7f7f7, #dcdcdc); border-bottom: 1px solid #aaa; cursor: move; }
#elecFloat .fhead .hint { flex: 1; }
#elecFloat .fhead button { padding: 0 7px; font-size: 14px; line-height: 18px; }
#elBody { padding: 8px 10px; }
#elBody svg { display: block; margin: 0 auto 6px; }
#elBody table { border-collapse: collapse; width: 100%; }
#elBody td { padding: 2px 3px; border-bottom: 1px solid #eee; }
#elBody td.z { font-weight: 700; text-align: right; width: 48px; }
#elBody td.b { text-align: right; white-space: nowrap; }
#elBody td.b button { padding: 1px 6px; font-size: 11px; }
#elBody .pairs { margin-top: 6px; display: flex; gap: 12px; }
.zok { color: #1d6b28; } .zwarn { color: #a86d00; } .zbad { color: #b01c1c; } .zoff { color: #888; }
#graphs { display: flex; gap: 6px; flex: 1; min-height: 300px; }
.pane { flex: 1; display: flex; flex-direction: column; background: #fff; border: 1px solid #c8c8c8; min-width: 0; }
.ptitle { padding: 2px 8px; font-weight: 600; border-bottom: 1px solid #ddd; }
.ptitle.r { color: #a11; } .ptitle.l { color: #22a; }
.pane .cvwrap { flex: 1; position: relative; display: flex; min-height: 260px; }
.pane canvas { flex: 1; width: 100%; min-height: 260px; display: block; cursor: crosshair; }
/* scale buttons sit above the +200 nV label, in the empty strip over the curve tags; both change the shared scale */
.zbtns { position: absolute; left: 5px; top: 5px; display: inline-flex; }
.zbtns button { padding: 0 6px; font-size: 10px; line-height: 16px; border-radius: 0; margin-left: -1px; }
.zbtns button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; } .zbtns button:last-child { border-radius: 0 3px 3px 0; }
table.lat, #reportBody table { border-collapse: collapse; width: 100%; }
table.lat th, table.lat td, #reportBody th, #reportBody td { border: 1px solid #ccc; padding: 2px 6px; text-align: center; }
table.lat th, #reportBody th { background: #eee; }
#ctx { position: fixed; background: #fff; border: 1px solid #888; box-shadow: 2px 2px 6px #0004; z-index: 20; min-width: 140px; }
#ctx div { padding: 4px 12px; cursor: pointer; }
#ctx div:hover { background: #cfe0f7; }
#toast { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 7px 14px; border-radius: 4px; z-index: 30; }
.modal { position: fixed; inset: 0; background: #0006; display: flex; align-items: flex-start; justify-content: center; overflow: auto; z-index: 10; padding: 20px; }
.modal[hidden] { display: none; }
.mbox { background: #f8f8f8; border: 1px solid #777; padding: 14px 18px; width: 620px; max-width: 100%; }
.mbox.wide { width: 1000px; }
.mbox h2 { margin: 0 0 8px; font-size: 16px; } .mbox h3 { margin: 12px 0 4px; font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.grid2 label { display: flex; flex-direction: column; gap: 2px; }
.mbox input[type=number], .mbox input:not([type]) { padding: 2px 4px; }
#pAudBox, #pAns { margin-top: 10px; } #pAudBox summary, #pAns summary { font-weight: 600; cursor: pointer; }
#pAud { border-collapse: collapse; margin-top: 4px; } #pAud th, #pAud td { padding: 2px 5px; border: 1px solid #ccc; text-align: center; }
#pAud input { width: 54px; text-align: center; }
#pPath .earblk { border: 1px solid #ccc; background: #fff; padding: 6px; margin: 6px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; }
#pPath .earblk h4 { grid-column: 1/-1; margin: 0; }
#pPath label { display: flex; flex-direction: column; font-size: 11px; }
#reportBody .rep-head { display: flex; justify-content: space-between; border-bottom: 2px solid #333; margin-bottom: 8px; }
#reportBody .rep-graphs { display: flex; gap: 8px; } #reportBody .rep-graphs > div { width: 50%; border: 1px solid #aaa; }
#reportBody .rep-graphs canvas, #reportBody .rep-graphs img { width: 100%; height: auto; display: block; }
#reportBody .li-charts img.chart { width: 100%; height: auto; display: block; border: 1px solid #ccc; }
#reportBody .li-charts { grid-template-columns: 1fr 1fr; }
#reportBody .li-charts canvas { height: 300px; }
#reportBody table.log td { font-size: 11px; } #reportBody table.log td.l { text-align: left; }
/* print: only the report, flowing over as many pages as needed (the old visibility:hidden + absolute inset:0 clipped it to one page) */
@page { size: A4; margin: 10mm; }
@media print {
  html, body { height: auto; display: block; background: #fff; min-width: 0; }
  body > *:not(#mReport) { display: none !important; }
  #mReport { position: static; display: block; overflow: visible; padding: 0; background: #fff; }
  #mReport .mbox { width: auto; border: 0; padding: 0; background: #fff; }
  .noprint { display: none !important; }
  .rep-graphs, .li-charts canvas, .li-charts img, #reportBody tr { break-inside: avoid; }
  #reportBody h3 { break-after: avoid; }
  #reportBody table { font-size: 10px; }
}

.lockbar { display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid #ccc; padding: 4px 8px; margin-bottom: 8px; }
.lockbar .err { color: #b00; } .lockbar #pRelock { margin-left: auto; }
.locked .admin { display: none !important; }
#mPatient:not(.locked) .admin-off, #mPatient:not(.locked) #pPw, #mPatient:not(.locked) #pUnlock { display: none; }
.pane canvas { user-select: none; }
.tgrp { display: inline-flex; margin-left: 6px; }
.tgrp button { border-radius: 0; min-width: 30px; margin-left: -1px; font-weight: 600; }
.tgrp button:first-child { border-radius: 3px 0 0 3px; margin-left: 0; } .tgrp button:last-child { border-radius: 0 3px 3px 0; }
.tgrp button.has { text-decoration: underline; }
#pageBtns button { min-width: 26px; padding: 3px 5px; }
#pageBtns { margin-right: 8px; }
.tgrp button.on { background: #3b78c9; color: #fff; border-color: #1f4f96; }