* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b2027; color: #dfe5ec; font: 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font: inherit; color: #dfe5ec; background: #2c3440; border: 1px solid #3c4655; border-radius: 6px; padding: 7px 12px; cursor: pointer; touch-action: manipulation; }
button:hover:not(:disabled) { background: #364050; }
button:disabled { opacity: .35; cursor: default; }
button.go { background: #1f5133; border-color: #2c7a4b; }
button.stop { background: #5a2427; border-color: #8a3439; }

header button { white-space: nowrap; }
header { position: fixed; inset: 0 0 auto 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #141920e6; border-bottom: 1px solid #2c3440; z-index: 5; }
.brand { white-space: nowrap; } .brand b { color: #5ab0ff; }
.spacer { flex: 1; }
.seqmsg { color: #f0b429; font-size: 13px; }
.seqmsg:not(:empty) { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid #2c3440; }
.chip { padding: 5px 10px; border-radius: 999px; background: #2c3440; font-weight: 600; font-size: 13px; white-space: nowrap; }
.chip.ok { background: #1f5133; color: #9ff0bf; } .chip.warn { background: #5a4a1a; color: #ffd98a; } .chip.bad { background: #5a2427; color: #ffb3b6; }
.seg { display: inline-flex; } .seg button { border-radius: 0; margin-left: -1px; } .seg button:first-child { border-radius: 6px 0 0 6px; } .seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button.on { background: #2f6db5; border-color: #4a8be0; }
.tog { font-size: 13px; white-space: nowrap; }

#view { position: fixed; inset: 52px 0 120px 0; }
#view canvas, .labels { position: absolute; inset: 0; }
.labels { pointer-events: auto; }

.lbl { pointer-events: none; font-size: 11px; padding: 3px 6px; border-radius: 4px; white-space: nowrap; transform: translateY(-4px); }
.lbl.eq { background: #0f1318d9; border: 1px solid #3c4655; text-align: center; }
.lbl.eq .t { font-weight: 700; color: #fff; }
.lbl.inst { background: #10253dcc; border: 1px solid #2f5f95; font-variant-numeric: tabular-nums; }
.lbl.inst .t { color: #8fc4ff; font-weight: 700; }
.lbl.inst.alarm { background: #6b4b0a; border-color: #f0b429; }
.lbl.inst.bad, .lbl .bad { background: #5a2427; border-color: #e5484d; color: #ffb3b6; font-weight: 700; }
.lbl.pipe { background: none; color: #aab6c3; font-size: 10px; letter-spacing: .04em; }
.lbl b { padding: 0 4px; border-radius: 3px; font-size: 10px; }
.m-a { background: #1f5133; } .m-m { background: #8a6a12; } .m-o { background: #5a2427; }
body.hide-eq .lbl.eq, body.hide-inst .lbl.inst { display: none; }

.kpi { position: fixed; left: 12px; top: 64px; width: 280px; max-height: calc(100% - 200px); overflow: auto; background: #141920e6; border: 1px solid #2c3440; border-radius: 8px; padding: 10px 12px; z-index: 4; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; }
.row span:first-child { color: #9aa6b4; }
.row b { font-variant-numeric: tabular-nums; }
.hint { color: #7f8b99; font-size: 12px; margin: 8px 0 0; }

.faceplate { position: fixed; right: 12px; top: 64px; width: 320px; max-height: calc(100% - 230px); overflow: auto; background: #141920f2; border: 1px solid #3c4655; border-radius: 8px; padding: 12px; z-index: 4; display: none; }
.faceplate.open { display: block; }
.fp-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.fp-id { font-size: 20px; font-weight: 700; } .fp-desc { color: #9aa6b4; font-size: 12px; }
.x { padding: 3px 9px; }
.btns { display: flex; gap: 8px; margin: 10px 0 4px; } .btns button { flex: 1; padding: 10px; }
.big { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 4px 0 8px; } .big small { font-size: 14px; color: #9aa6b4; }
.bar { height: 8px; background: #2c3440; border-radius: 4px; overflow: hidden; margin: 4px 0 6px; } .bar i { display: block; height: 100%; background: #5ab0ff; transition: width .25s; }
.trend { width: 100%; height: 110px; background: #0f1318; border-radius: 6px; margin-top: 8px; }
details { margin-top: 10px; color: #9aa6b4; font-size: 12px; } .io { font-family: ui-monospace, monospace; padding: 6px 0; }
.msg { color: #f0b429; font-size: 12px; margin-top: 8px; min-height: 1em; }
input[type=number] { width: 60px; background: #0f1318; color: #dfe5ec; border: 1px solid #3c4655; border-radius: 4px; padding: 4px; }

.drawer { position: fixed; left: 274px; top: 64px; width: 330px; background: #20190ff2; border: 1px solid #6b4b0a; border-radius: 8px; padding: 12px 14px; z-index: 6; display: none; }
.drawer.open { display: block; }
.drawer h3 { margin: 0 0 6px; color: #ffd98a; } .drawer h4 { margin: 12px 0 4px; color: #c9a85a; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.drawer label { display: block; margin: 6px 0; font-size: 13px; } .drawer label output { float: right; font-weight: 700; }
.drawer input[type=range] { width: 100%; }
.drawer .cb { display: flex; gap: 8px; align-items: center; }

footer { position: fixed; inset: auto 0 0 0; height: 120px; background: #12161c; border-top: 1px solid #2c3440; z-index: 5; display: flex; flex-direction: column; }
.al-head { display: flex; align-items: center; gap: 10px; padding: 6px 12px; } .al-head button { margin-left: auto; padding: 4px 10px; }
.badge:not(:empty) { background: #e5484d; color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.al-list { overflow: auto; padding: 0 12px 8px; }
.al { display: grid; grid-template-columns: 80px 34px 1fr 70px; gap: 10px; padding: 4px 8px; border-left: 4px solid; margin-bottom: 2px; font-size: 13px; background: #1a2028; }
.al.p1 { border-color: #e5484d; } .al.p2 { border-color: #f0b429; } .al.p3 { border-color: #5ab0ff; }
.al:not(.ack) { animation: blink 1s steps(2) infinite; }
.al.rtn { color: #7f8b99; }
@keyframes blink { 50% { background: #3a2124; } }
.none { color: #7f8b99; padding: 4px 8px; }
#toast { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); background: #5a4a1a; color: #ffd98a; padding: 8px 14px; border-radius: 6px; opacity: 0; transition: opacity .2s; z-index: 10; pointer-events: none; }
#toast.show { opacity: 1; }

/* ---- v2: whole plant ---- */
.trains { display: flex; gap: 4px; }
.chip.train { border: 1px solid transparent; cursor: pointer; padding: 5px 9px; font-size: 12px; }
.chip.train.sel { border-color: #5ab0ff; }
button.estop { background: #8a1c22; border-color: #d33; font-weight: 700; color: #fff; }
button.estop.active { animation: blink 0.8s steps(2) infinite; background: #d33; }
select.views { background: #2c3440; color: #dfe5ec; border: 1px solid #3c4655; border-radius: 6px; padding: 7px 8px; font: inherit; }
.k-h { color: #5ab0ff; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin: 8px 0 2px; }
.kpi { width: 280px; }
.lbl.area { background: none; border: none; color: #ffffffcc; font-size: 15px; font-weight: 800; letter-spacing: .12em; text-shadow: 0 1px 4px #000; }
.lbl .warn { color: #f0b429; } .lbl .sel { text-decoration: underline; font-weight: 700; }
.faceplate .seg button { padding: 6px 9px; }
.learnbtn { width: 100%; margin-top: 10px; padding: 12px; background: #1d3b5c; border-color: #2f6db5; font-weight: 600; }
.drawer { max-height: calc(100% - 200px); overflow: auto; }
.drawer .frow { display: flex; gap: 6px; margin: 5px 0; } .drawer select { flex: 1; background: #0f1318; color: #dfe5ec; border: 1px solid #6b4b0a; border-radius: 4px; padding: 4px; }
.drawer .frow button { white-space: nowrap; padding: 5px 8px; }
.ibtns { display: flex; gap: 6px; margin: 6px 0; } .ibtns button { flex: 1; padding: 6px; }
.factive { font-size: 12px; color: #ffd98a; margin: 6px 0; }

/* ---- learning model panel ---- */
.learn { position: fixed; left: 12px; top: 64px; bottom: 132px; width: 380px; overflow: auto; background: #141920f2; border: 1px solid #2f6db5; border-radius: 8px; padding: 12px; z-index: 7; display: none; }
.learn.open { display: block; }
body.learning .kpi, body.learning .lbl.eq, body.learning .lbl.inst, body.learning .lbl.area, body.learning .lbl.pipe { display: none; }
.l-head { display: flex; justify-content: space-between; gap: 8px; } .l-title { font-size: 17px; font-weight: 700; } .l-sub { color: #9aa6b4; font-size: 12px; }
.l-steps { display: flex; flex-direction: column; gap: 3px; margin: 10px 0; } .l-steps button { text-align: left; padding: 5px 8px; font-size: 13px; }
.l-steps button.on, .l-parts button.on { background: #2f6db5; border-color: #4a8be0; }
.l-nav { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; }
.l-text { background: #0f1318; border-radius: 6px; padding: 10px; font-size: 13px; line-height: 1.5; }
.l-ctrl { margin: 10px 0; } .l-ctrl label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; margin: 3px 0; } .l-ctrl input[type=range] { width: 200px; }
.l-ctrl .cb { justify-content: flex-start; }
.l-parts { display: flex; flex-wrap: wrap; gap: 4px; } .l-parts button { font-size: 11px; padding: 4px 7px; }
.l-info { background: #0f1318; border-radius: 6px; padding: 10px; font-size: 13px; margin-top: 8px; } .l-info p { margin: 6px 0 0; line-height: 1.45; } .l-info .spare { color: #f0b429; font-size: 12px; }
.l-live { margin-top: 8px; font-size: 12px; } .l-live .row { padding: 1px 0; }

/* header must fit laptop widths: drop the long title, compact toggles */
@media (max-width: 1750px) { #title { display: none; } }
@media (max-width: 1500px) { .tog { font-size: 0; } .tog input { margin: 0 2px; } .tog::after { font-size: 12px; } .tog.t-eq::after { content: "Eq"; } .tog.t-in::after { content: "Inst"; } header { gap: 6px; } header button { padding: 7px 9px; } }
header { overflow-x: auto; }

/* ===== v4: UX ===== */
header { gap: 8px; }
.pills { display: flex; gap: 6px; }
.pill { background: #222a33; border: 1px solid #333d49; border-radius: 999px; padding: 4px 10px; font-size: 12px; white-space: nowrap; color: #b8c3cf; }
.pill b { color: #fff; } .pill.bad { background: #5a2427; border-color: #8a3439; cursor: pointer; animation: blink 1s steps(2) infinite; }
.hgroup { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border: 1px solid #2c3440; border-radius: 8px; background: #161c23; }
.find { display: flex; align-items: center; gap: 4px; background: #0f1318; border: 1px solid #3c4655; border-radius: 6px; padding: 0 8px; }
.find input { background: none; border: none; outline: none; color: #dfe5ec; font: inherit; width: 190px; padding: 7px 0; }
.find:focus-within { border-color: #5ab0ff; box-shadow: 0 0 0 2px #5ab0ff33; }
.learnhdr { background: #1d3b5c; border-color: #2f6db5; font-weight: 600; }
.tools { display: flex; gap: 6px; align-items: center; }
.tools button { min-width: 34px; }
.kpi-title { cursor: pointer; font-weight: 700; color: #cfd8e3; display: flex; justify-content: space-between; user-select: none; }
.kpi.collapsed .kpi-body { display: none; } .kpi.collapsed .chev { transform: rotate(-90deg); display: inline-block; }
.fp-tools { display: flex; gap: 6px; align-items: flex-start; }
.fp-tools button { padding: 4px 8px; }
.learnmini { background: #1d3b5c; border-color: #2f6db5; }
.al.link { cursor: pointer; } .al.link:hover { outline: 1px solid #5ab0ff; }
.hovertip { position: fixed; z-index: 20; pointer-events: none; display: none; background: #0f1318f2; border: 1px solid #3c4655; border-radius: 6px; padding: 6px 9px; font-size: 12px; max-width: 280px; box-shadow: 0 4px 16px #0008; }
.hovertip b { color: #fff; font-size: 13px; } .hovertip .tiphint { color: #7f8b99; font-size: 11px; margin-top: 3px; }
.hovertip span[class^="m-"] { padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.modal { position: fixed; inset: 0; background: #0009; z-index: 30; display: none; align-items: center; justify-content: center; }
.modal.open { display: flex; }
.modal-body { background: #161c23; border: 1px solid #3c4655; border-radius: 10px; padding: 16px 20px; width: min(1100px, 94vw); max-height: 88vh; overflow: auto; box-shadow: 0 10px 40px #000a; }
.modal-head { display: flex; justify-content: space-between; align-items: center; } .modal-head h2 { margin: 0; font-size: 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.card { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 10px; background: #1d242d; border: 1px solid #333d49; min-height: 150px; }
.card:hover { border-color: #5ab0ff; background: #212a35; transform: translateY(-1px); }
.card .ic { font-size: 30px; } .card .ct { font-weight: 700; font-size: 15px; } .card .cs { color: #9aa6b4; font-size: 12px; flex: 1; } .card .cm { color: #5ab0ff; font-size: 12px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 22px; }
.help-grid h3 { color: #5ab0ff; font-size: 14px; margin: 12px 0 4px; } .help-grid ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: #cfd8e3; }
.help-grid .legend { list-style: none; padding-left: 0; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; border: 1px solid #0006; }
kbd { background: #2c3440; border: 1px solid #4a5563; border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 12px; font-family: ui-monospace, monospace; }
.m-a { background: #1f5133; } .m-m { background: #8a6a12; } .m-o { background: #5a2427; }
.help-grid .m-a, .help-grid .m-m, .help-grid .m-o { padding: 0 5px; border-radius: 3px; font-weight: 700; }
/* learning studio */
body.studio-on .kpi, body.studio-on #faceplate { display: none; }
body.studio-on footer { opacity: 0.6; }
.learn.studio .l-lib { margin: 8px 0; } .learn.studio .l-lib select { width: 100%; background: #0f1318; color: #dfe5ec; border: 1px solid #3c4655; border-radius: 6px; padding: 6px; font: inherit; }
.learn details > summary { cursor: pointer; color: #9aa6b4; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin: 6px 0; }
.l-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 4px; }
.l-cams { display: flex; gap: 4px; align-items: center; margin-top: 6px; font-size: 12px; color: #9aa6b4; } .l-cams button { padding: 4px 8px; font-size: 12px; }
#s-opctl { display: flex; align-items: center; gap: 6px; } #s-opctl .seg button { padding: 4px 7px; font-size: 11px; } #s-opctl input { width: 160px; }
.ltip { position: fixed; z-index: 20; pointer-events: none; display: none; background: #1d3b5cf2; border: 1px solid #5ab0ff; border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 600; }
.lbl.partlbl { background: #1d3b5ce6; border: 1px solid #5ab0ff; color: #fff; font-size: 11px; }
/* big UI for the 98" touch screen */
body.big-ui header, body.big-ui aside, body.big-ui footer, body.big-ui .modal-body, body.big-ui .hovertip { zoom: 1.3; }
body.big-ui #view { inset: 68px 0 156px 0; }
body.big-ui footer { height: 120px; }
@media (max-width: 1500px) { .pills { display: none; } .find input { width: 140px; } }
@media (max-width: 1200px) { .tog { display: none; } }

.l-nav { gap: 6px; }
.l-dots { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; justify-content: center; }
.l-dots button { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 12px; }
.l-dots button.on { background: #2f6db5; border-color: #5ab0ff; color: #fff; font-weight: 700; }
.l-steptitle { color: #5ab0ff; font-weight: 700; margin-bottom: 4px; }
select.views { max-width: 170px; }
@media (max-width: 1500px) { .tog { display: none; } .tools button { min-width: 30px; padding: 7px 8px; } }