/* MetGauge Twin: one dark theme (machine UI), laser colours green / blue, measurement orange. */
:root {
  --bg: #0f1720; --bg2: #17222e; --bg3: #1e2c3a; --line: #2a3a4b; --ink: #dce6f0; --dim: #8496a8;
  --ok: #3ccf7f; --warn: #e0a84a; --bad: #ec6b6b; --off: #5d6f82; --blue: #5b93ec; --green: #3ccf7f;
  --accent: #2f6fd1; --measure: #d9771f; --sim: #9b7ff0;
  --f: "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100% }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f); zoom: var(--ui-zoom, 1) }
[hidden] { display: none !important }
h1 { font-size: 22px; margin: 0 0 4px } h2 { font-size: 17px; margin: 0 0 10px; font-weight: 600 }
h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; font-weight: 600 }
.dim { color: var(--dim) } .small { font-size: 12px } .mono { font-family: var(--mono) }
.err { color: var(--bad); min-height: 1em; margin: 4px 0 }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap } .row.end { justify-content: flex-end }
.sp { flex: 1 }

.app { display: grid; grid-template-columns: 76px 1fr; min-height: 100vh }
.rail { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 }
.rail a { width: 64px; text-align: center; font-size: 11px; color: var(--dim); text-decoration: none; padding: 6px 0; border-radius: 8px }
.rail a .ic { display: block; font-size: 20px; line-height: 28px }
.rail a:hover, .rail a:focus-visible { color: var(--ink); background: var(--bg3); outline: none }
.rail a.on { color: #fff; background: #22384f; box-shadow: inset 0 0 0 1px #4f86c6 }
.main { min-width: 0; display: flex; flex-direction: column }
.top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap }
.top .mach { font-size: 17px; font-weight: 600 }
#view { padding: 16px; flex: 1; outline: none; container: view / inline-size }  /* layout follows the scaled content width, not the screen */

.chip { border: 1px solid var(--line); border-radius: 14px; padding: 2px 10px; font-size: 12px; white-space: nowrap }
.chip.kind { border-color: var(--sim); color: #d6c8ff; font-weight: 600; letter-spacing: .04em }
.chip.ok { border-color: #2c7a4f; color: #9fe3bd } .chip.warn { border-color: #9a6a1c; color: #f2cf8f }
.chip.bad { border-color: #a33a3a; color: #f3b0b0 } .chip.off { color: var(--dim) }
.chip.meas { background: #5a2e0b; border-color: var(--measure); color: #ffd9b3 }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden }
.lang button { background: transparent; color: var(--dim); border: 0; padding: 3px 9px; font: inherit; cursor: pointer }
.lang button[aria-pressed="true"] { background: #22384f; color: #fff }

.btn { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 6px 13px; font: 600 13px var(--f); cursor: pointer }
.btn:hover { filter: brightness(1.12) } .btn:disabled { opacity: .5; cursor: default; filter: none }
.btn:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #4f86c6; outline-offset: 1px }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 500 }
.btn.danger { background: #8e2b2b } .btn.big { padding: 9px 18px; font-size: 14px } .btn.small { padding: 3px 9px; font-size: 12px }
.btn.busy { position: relative; color: transparent } .btn.busy::after { content: "…"; position: absolute; inset: 0; color: #fff; display: grid; place-items: center }

.grid { display: grid; gap: 14px }
.g-main { grid-template-columns: minmax(0, 1fr) 340px }
.g-cs { grid-template-columns: minmax(0, 1fr) 360px }
@container view (max-width: 890px) { .g-main { grid-template-columns: minmax(0, 1fr) } }
@container view (max-width: 1140px) { .g-cs { grid-template-columns: minmax(0, 1fr) } }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-width: 0 }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 18px }
.pcard { display: flex; flex-direction: column; gap: 6px }
.pcard p { margin: 0; color: var(--dim); font-size: 13px; flex: 1 }
.pcard.soon { opacity: .6 }

.att { background: var(--bg3); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 6px; padding: 9px 11px; margin-bottom: 8px }
.att.bad { border-left-color: var(--bad) } .att.ok { border-left-color: var(--ok) }
.att b { display: block } .att small { display: block; color: var(--dim); margin: 2px 0 6px }

.svcbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px }
.cam-svg { width: 100%; height: auto; display: block; max-height: 62vh }

/* cold start chain */
.chain { display: flex; flex-direction: column; gap: 10px }
.lane { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 4px }
.lane .arrow { color: var(--dim); align-self: center }
.node { border: 1px solid var(--line); background: var(--bg3); border-radius: 8px; padding: 7px 10px; width: 168px; cursor: pointer; text-align: left; color: var(--ink); font: inherit }
.node small { display: block; color: var(--dim); font-size: 11px }
.node.ok { border-color: #2c7a4f } .node.warn { border-color: #b7791f; background: #2b2110 } .node.bad { border-color: #c44; background: #2c1414 }
.node.off { opacity: .65 } .node.sel { box-shadow: 0 0 0 2px #4f86c6 }
.node .root { display: inline-block; font-size: 10px; background: var(--bad); color: #fff; border-radius: 8px; padding: 0 6px; margin-left: 4px }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0 }
.dot.ok { background: var(--ok) } .dot.warn { background: var(--warn) } .dot.bad { background: var(--bad) } .dot.off { background: var(--off) }
@media (prefers-reduced-motion: no-preference) { .node.bad .dot, .pulse { animation: pulse 1.8s ease-in-out infinite } }
@keyframes pulse { 50% { opacity: .35 } }
.log { font-family: var(--mono); font-size: 12px; color: var(--dim); max-height: 260px; overflow: auto; line-height: 1.7 }
.log b { color: var(--ink); font-weight: 400 }
.score { font-size: 28px; font-weight: 600 }
.speed button { min-width: 38px }

table.t { width: 100%; border-collapse: collapse; font-size: 13px }
table.t th, table.t td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top }
table.t th { color: var(--dim); font-weight: 500 }
.tw { overflow-x: auto }
pre.raw { font-family: var(--mono); font-size: 11px; max-height: 300px; overflow: auto; background: var(--bg); padding: 8px; border-radius: 6px }

label { display: block; margin: 8px 0 }
label > span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 3px }
input, select, textarea { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: inherit }
select.inline, input.inline { width: auto }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px }
.loginCard { width: min(420px, 100%) }
.dlg { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; width: min(480px, calc(100% - 32px)) }
.dlg::backdrop { background: rgba(0, 0, 0, .55) }
.fbBtn { position: fixed; right: 16px; bottom: 16px; background: #3a2f63; color: #e5dcff; border: 1px solid var(--sim); border-radius: 18px; padding: 7px 16px; font: 600 13px var(--f); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4) }
.toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 10; width: min(520px, calc(100% - 32px)) }
.toast { background: var(--bg3); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: 6px; padding: 8px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.4) }
.toast.bad { border-left-color: var(--bad) } .toast.info { border-left-color: var(--blue) }

@media (max-width: 640px) {
  .app { grid-template-columns: 1fr; padding-bottom: 64px }
  .rail { position: fixed; bottom: 0; left: 0; right: 0; flex-direction: row; justify-content: space-around; padding: 4px; z-index: 5; border-right: 0; border-top: 1px solid var(--line) }
  .fbBtn { bottom: 72px }
}

/* ---------------- machine picker ---------------- */
button.mach { background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: 600 16px var(--f); padding: 3px 10px; cursor: pointer }
button.mach:hover { background: var(--bg3) }
.dlg.wide { width: min(980px, calc(100% - 32px)) }
.mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px }
.mcard.cur { border-color: #2c7a4f }
table.kv th { width: 34%; font-weight: 500 } table.kv td, table.kv th { padding: 4px 6px; font-size: 12.5px }

/* ---------------- level map ---------------- */
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.lvcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 18px }
.lvcard p { margin: 0; color: var(--dim); font-size: 13px; flex: 1 }
.lvcard.locked { opacity: .55 }
.lvnum { position: absolute; right: 12px; top: 6px; font-size: 34px; font-weight: 700; color: var(--line) }
.stars { color: #f2c94c; letter-spacing: 2px }

/* ---------------- level screen (m11-style header) ---------------- */
.lvhdr { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px }
.lvname { font-size: 15px }
.chip.calib { border-color: #3b6fb0; color: #bcd4f5 }
.lvgrid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; gap: 12px; align-items: start }
@container view (max-width: 1140px) { .lvgrid { grid-template-columns: 220px minmax(0, 1fr) } .lvgrid > #lvSide { grid-column: 1 / -1 } }
@container view (max-width: 650px) { .lvgrid { grid-template-columns: minmax(0, 1fr) } }
.step { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 6px 0; color: var(--dim); font-size: 13px }
.step i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-style: normal; font-size: 11px }
.step.done { color: #9fe3bd } .step.done i { background: #1d4d34; border-color: #2c7a4f }
.card.done { border-color: #2c7a4f; margin-top: 12px }
.camgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.camgrid.cams8 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@container view (max-width: 790px) { .camgrid, .camgrid.cams8 { grid-template-columns: minmax(0, 1fr) } }
.camgrid.working .imgwrap { outline: 1px dashed var(--line) }
.camcard { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 0 }
.camcard.busy .imgwrap { opacity: .5 }
.camhead { margin-bottom: 6px }
.imgwrap { position: relative; aspect-ratio: 1050 / 540; background: #070b10; border-radius: 4px; overflow: hidden }
.imgwrap img, .imgwrap svg { position: absolute; inset: 0; width: 100%; height: 100% }
.imgmsg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-size: 12px; text-align: center; padding: 8px }
.stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin: 6px 0 }
.ctl label { margin: 4px 0 } .ctl label > span { display: flex; justify-content: space-between }
input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--accent) }
.seg { display: flex; gap: 6px; flex-wrap: wrap }
.pad { display: grid; grid-template-columns: repeat(3, 48px); gap: 6px; justify-content: center }
.pad .btn { padding: 8px 0; font-size: 16px }
.topsvg { width: 100%; height: auto; display: block; background: #0a1118; border-radius: 6px }
.okc { color: #7ee2a8 } .warnc { color: #f2cf8f }
.lz { padding: 5px 0; border-bottom: 1px dashed var(--line) }
.lzdot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line) }
.lzdot.on.green { background: var(--green); box-shadow: 0 0 8px var(--green) } .lzdot.on.blue { background: var(--blue); box-shadow: 0 0 8px var(--blue) }
.imgwrap img:not([src]) { display: none }

/* ---------------- Machine area = status page ---------------- */
.verdict { display: flex; align-items: center; gap: 14px; border-radius: 10px; padding: 12px 16px; border: 1px solid var(--line) }
.verdict.ok { background: #12301f; border-color: #2c7a4f } .verdict.warn { background: #2b2110; border-color: #9a6a1c } .verdict.bad { background: #2c1414; border-color: #a33a3a }
.vicon { font-size: 26px; width: 36px; text-align: center }
.verdict.ok .vicon { color: var(--ok) } .verdict.warn .vicon { color: var(--warn) } .verdict.bad .vicon { color: var(--bad) }
.vtitle { font-size: 19px; font-weight: 600 } .vsub { color: var(--dim); font-size: 13px }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px }
.pcard2 { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px }
.pcard2.warn { border-color: #9a6a1c } .pcard2.bad { border-color: #a33a3a }
.pmain { font-size: 16px; font-weight: 600; margin: 2px 0 }
.att.wait { border-left-color: var(--blue) }
.cline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.cstack { display: flex; flex-direction: column; gap: 4px }
.cnode { border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font-size: 13px; background: var(--bg3) }
.cnode small { display: block; color: var(--dim); font-size: 11px }
.cnode.ok { border-color: #2c7a4f } .cnode.warn { border-color: #b7791f } .cnode.bad { border-color: #c44; background: #2c1414 }
.cnode.off { opacity: .75 } .cnode.opt { border-style: dashed }
.carrow { color: var(--dim) }
.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 10px }
.zbar { position: relative; height: 10px; border-radius: 5px; background: var(--bg); margin: 6px 0 4px }
.zband { position: absolute; top: 0; bottom: 0; background: #1d4d34; border-radius: 5px }
.zair { position: absolute; top: -2px; width: 12px; height: 14px; border-radius: 50%; background: var(--blue) }
.zsteel { position: absolute; top: -2px; width: 12px; height: 14px; border-radius: 2px }
.zsteel.ok { background: var(--ok) } .zsteel.warn { background: var(--warn) }
.badc { color: #f29b9b }
.psus { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px }
.lbar { height: 8px; border-radius: 4px; background: var(--bg); margin: 6px 0 4px; overflow: hidden }
.lbar > div { height: 100%; border-radius: 4px } .lbar .ok { background: var(--ok) } .lbar .warn { background: var(--warn) } .lbar .bad { background: var(--bad) }
details.card > summary { cursor: pointer; font-weight: 600 }

/* ---------------- accounts ---------------- */
.expbanner { background: #2b2110; border-bottom: 1px solid #9a6a1c; color: #f2cf8f; padding: 6px 16px; font-size: 13px }
.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px }
label.inl { display: inline-flex; align-items: center; gap: 4px; margin: 4px 8px 4px 0; font-size: 13px }
label.inl input { width: auto }
.temppw { font-family: var(--mono); font-size: 18px; background: var(--bg); padding: 4px 10px; border-radius: 6px; letter-spacing: 1px; user-select: all }
select.small { padding: 3px 6px; font-size: 12px }
.imgwrap img { user-select: none; -webkit-user-drag: none }

/* ---------------- feedback replies / diagnostics ---------------- */
.reply { margin-top: 6px; padding: 6px 8px; background: var(--bg); border-radius: 6px; font-size: 13px }
input.small { padding: 3px 8px; font-size: 12px }

/* ---------------- help + tour ---------------- */
.helpgrid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start }
@container view (max-width: 650px) { .helpgrid { grid-template-columns: minmax(0, 1fr) } }
.helpnav a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--dim); text-decoration: none; font-size: 13px }
.helpnav a:hover { color: var(--ink); background: var(--bg3) } .helpnav a.on { color: #fff; background: #22384f }
.helpart { max-width: 820px } .helpart p { line-height: 1.7 }
.hsteps { padding-left: 22px } .hsteps li { margin: 6px 0; line-height: 1.6 }
.tourbox { position: fixed; z-index: 2147482000; width: 300px; background: var(--bg2); border: 1px solid #4f86c6; border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.5) }
.tourbox p { margin: 6px 0 10px }
.tourmark { outline: 3px solid #4f86c6 !important; outline-offset: 3px; border-radius: 8px; position: relative; z-index: 2147481000 }

/* ---------------- display: scale control ---------------- */
.uictl { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden }
.uib { background: transparent; color: var(--ink); border: 0; padding: 3px 9px; font: 600 13px var(--f); cursor: pointer }
.uib:disabled { opacity: .35; cursor: default }
.uib[aria-pressed="true"] { background: #22384f }
.uipct { font: 12px var(--mono); color: var(--dim); min-width: 40px; text-align: center }
.ctlrow { margin: 6px 0 } .ctlrow > span { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim) }
.stepper { display: flex; align-items: center; gap: 6px } .stepper input { flex: 1 }
.topsvg { touch-action: none; cursor: grab } .topsvg.dragging { cursor: grabbing }

/* ---------------- touch layout (site panels: fingers, gloves, arm's length) ---------------- */
html.touch .btn { min-height: 44px; padding: 10px 16px; font-size: 15px }
html.touch .btn.small { min-height: 40px; padding: 8px 12px; font-size: 14px }
html.touch .btn.big { min-height: 52px; font-size: 16px }
html.touch .uib, html.touch .lang button { min-width: 44px; min-height: 40px; font-size: 15px }
html.touch .rail { gap: 10px } html.touch .rail a { width: 72px; padding: 10px 0; font-size: 12px } html.touch .rail a .ic { font-size: 24px }
html.touch input, html.touch select, html.touch textarea { min-height: 44px; font-size: 15px }
html.touch input[type=checkbox] { min-height: 0; width: 22px; height: 22px }
html.touch input[type=range] { height: 40px }
html.touch .stepper .btn { min-width: 48px; font-size: 20px; padding: 4px 0 }
html.touch .pad { grid-template-columns: repeat(3, 64px); gap: 10px } html.touch .pad .btn { min-height: 60px; font-size: 22px }
html.touch .node, html.touch .cnode { min-height: 52px; padding: 9px 12px; font-size: 14px }
html.touch .chip { padding: 5px 12px; font-size: 13px }
html.touch table.t th, html.touch table.t td { padding: 10px 10px }
html.touch .fbBtn { padding: 12px 22px; font-size: 15px }
html.touch .helpnav a { padding: 10px 10px; font-size: 15px }
html.touch .lz { padding: 8px 0 } html.touch .lzdot { width: 16px; height: 16px }
html.touch .att { padding: 12px 14px }
html.touch details > summary { padding: 8px 0 }
.nowrap { white-space: nowrap }
.vizframe { width: 100%; height: calc((100vh - 150px) / var(--ui-zoom, 1)); min-height: 520px; border: 1px solid var(--line); border-radius: 8px; background: #fff }

/* ---------------- 3D ---------------- */
.v3bar { margin: 8px 0; gap: 10px }
.v3grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start }
@container view (max-width: 900px) { .v3grid { grid-template-columns: minmax(0, 1fr) } }
.v3box { position: relative; height: calc((100vh - 230px) / var(--ui-zoom, 1)); min-height: 420px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #0b1118; touch-action: none }
.v3box canvas { display: block }
[data-v3layer][aria-pressed="false"] { opacity: .6 }
/* levels 2-5 */
.cutsvg, .plotsvg { width: 100%; height: auto; display: block; background: #0a1118; border-radius: 6px }
.plotsvg { max-height: 340px; margin-top: 6px }
.lzadj { padding: 8px 0; border-bottom: 1px dashed var(--line) }
.screw { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 }
.seg.col { flex-direction: column; align-items: stretch } .seg.col .btn { text-align: left }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px }
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px }
html.touch .screw .btn { min-width: 52px; min-height: 48px; font-size: 20px }
/* real-machine interface, hardware check, levels on the real machine */
.realgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr); gap: 12px; align-items: start }
@container view (max-width: 1100px) { .realgrid { grid-template-columns: minmax(0, 1fr) } }
.rres { position: sticky; top: 8px; margin-top: 12px; max-height: calc(100vh / var(--ui-zoom, 1) - 40px); overflow: auto }
.rrow { padding: 8px 0; border-bottom: 1px dashed var(--line) } .rrow .row { flex-wrap: wrap; gap: 6px }
.inl { display: inline-flex; align-items: center; gap: 4px }
.btn.warnb { background: #8a5a12; border-color: #b8781c; color: #fff }
pre.cmd { white-space: pre-wrap; word-break: break-all; background: #0a1118; border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: 12px }
.ladder { margin: 8px 0; padding-left: 20px } .ladder li { margin: 3px 0 } .ladder li.ok b { color: var(--ok) } .ladder li.bad b { color: var(--bad) }
.ladder li.warn b { color: var(--warn) } .ladder li.skip { color: var(--dim) }
.att.warn { border-color: var(--warn) }
.lzpad { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.lzcell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 8px }
.hwt td { vertical-align: top } .hwt td:nth-child(2), .hwt td:nth-child(3) { max-width: 260px; word-break: break-word }
.lvreal { border-color: #b8781c; margin-bottom: 12px } .lvrev { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px }
.lvrrun { margin: 4px 0 } .lvrrun.bad b { color: var(--bad) } .lvrrun.ok b { color: var(--ok) } .lvrrun.warn b { color: var(--warn) }
html.touch .rrow .btn, html.touch .lzcell .btn { min-height: 48px }