/* ============ 9S90ME-C9.2 Simulator — ECR dark theme ============ */
:root {
  --bg: #0b1018;
  --panel: #121a26;
  --panel2: #182333;
  --line: #24344c;
  --txt: #cfe0f4;
  --dim: #7b93b4;
  --accent: #38b6ff;
  --ok: #34d17b;
  --warn: #ffc63e;
  --alarm: #ff4d5e;
  --sld: #ff9f2e;
  --mono: 'Consolas', 'Cascadia Mono', 'Noto Sans Myanmar', monospace, 'Noto Color Emoji';
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--txt);
  font-family: 'Segoe UI', 'Inter', 'Noto Sans Myanmar', system-ui, sans-serif, 'Noto Color Emoji'; font-size: 14px;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(180deg, #16202e, #101827);
  border-bottom: 1px solid var(--line); padding: 8px 14px; flex: 0 0 auto;
}
.brand-title { font-weight: 700; letter-spacing: .5px; font-size: 15px; }
.brand-sub { color: var(--dim); font-size: 11px; }
.top-readouts { display: flex; gap: 10px; }
.readout {
  background: #0a0f16; border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 12px; text-align: center; min-width: 78px;
}
.readout span { font-family: var(--mono); font-size: 22px; color: var(--accent); display: block; line-height: 1.1; }
.readout label { font-size: 9px; color: var(--dim); letter-spacing: 1px; }
.state-badge span { color: var(--ok); font-size: 16px; padding-top: 4px; }
#safety-banner { display: flex; gap: 8px; margin-left: auto; }
.banner {
  padding: 8px 18px; border-radius: 6px; font-weight: 800; letter-spacing: 2px;
  animation: flash 0.8s steps(2) infinite;
}
.banner.sld { background: var(--sld); color: #401e00; }
.banner.shd { background: var(--alarm); color: #3d0008; }
.hidden { display: none !important; }
@keyframes flash { 50% { opacity: 0.35; } }
.top-controls { display: flex; align-items: center; gap: 8px; }
.clock { font-family: var(--mono); font-size: 18px; color: var(--dim); }
.timewarp .tw, .small-btn {
  background: var(--panel2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 9px; cursor: pointer; font-size: 12px;
}
.timewarp .tw.active { background: var(--accent); color: #04141f; font-weight: 700; }
.ack-btn {
  background: var(--alarm); border: none; color: #fff; font-weight: 700;
  border-radius: 6px; padding: 8px 14px; cursor: pointer;
}
.ack-btn:disabled { background: #333d4d; color: #6a7889; cursor: default; }

/* ---------- layout ---------- */
#layout { display: flex; flex: 1 1 auto; min-height: 0; }
#sidenav {
  width: 148px; background: #0d141f; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding-top: 6px; flex: 0 0 auto;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
#sidenav::-webkit-scrollbar { width: 6px; }
#sidenav::-webkit-scrollbar-thumb { background: #2e4463; border-radius: 3px; }
#sidenav::-webkit-scrollbar-track { background: transparent; }
#sidenav .nav {
  background: none; border: none; border-left: 3px solid transparent;
  color: var(--dim); text-align: left; padding: 11px 12px; cursor: pointer;
  font-size: 12.5px; letter-spacing: .4px; position: relative;
}
#sidenav .nav:hover { color: var(--txt); background: #121c2a; }
#sidenav .nav.active { color: var(--accent); border-left-color: var(--accent); background: #101a29; font-weight: 700; }
/* ONE SIDEBAR ROW FOR A TABBED PAIR OF SCREENS (emergency gen + emergency
   switchboard). The second screen keeps its nav row in the DOM — every
   programmatic jump in this app clicks #sidenav [data-screen="…"] — and is
   hidden by THIS CLASS alone. Never hide such a row with an inline style:
   ui.unfilterNav() strips inline display from every nav row and it would
   reappear. See index.html and ui.navRowFor(). */
#sidenav .nav.nav-alias { display: none; }

/* ---------- grouped sidebar (sections › folders › screens) ---------- */
.nav-section { display: flex; flex-direction: column; }
.nav-sec-label {
  color: #56708f; font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 11px 12px 5px; margin-top: 5px;
  border-top: 1px solid var(--line); user-select: none;
}
.nav-folder { display: flex; flex-direction: column; }
.nav-fold-hd {
  display: flex; align-items: center; gap: 5px; width: 100%;
  background: none; border: none; border-left: 3px solid transparent;
  color: var(--dim); text-align: left; padding: 9px 12px 9px 14px; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.nav-fold-hd:hover { color: var(--txt); background: #121c2a; }
.nav-fold-hd .chev {
  color: #5a729a; font-size: 9px; width: 9px; flex: 0 0 auto; text-align: center;
}
.nav-folder.open > .nav-fold-hd { color: var(--txt); }
.nav-folder.open > .nav-fold-hd .chev { color: var(--accent); }
.nav-fold-body { display: flex; flex-direction: column; }
.nav-folder:not(.open) > .nav-fold-body { display: none; }
#sidenav .nav-fold-body .nav { padding-left: 30px; font-size: 12px; }
.badge {
  background: var(--alarm); color: #fff; border-radius: 9px; font-size: 10px;
  padding: 1px 6px; margin-left: 4px; animation: flash .8s steps(2) infinite;
}
#screens { flex: 1 1 auto; overflow: auto; padding: 14px; min-width: 0; }
.screen { display: none; }
.screen.active { display: block; }

/* ---------- generic panels ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; margin-bottom: 12px;
}
.panel h3 {
  color: var(--dim); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
.grid.c3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .grid.c2, .grid.c3 { grid-template-columns: 1fr; } }

/* value tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.tile { background: #0a0f16; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; }
.tile .tv { font-family: var(--mono); font-size: 19px; color: var(--txt); }
.tile .tu { font-size: 10px; color: var(--dim); margin-left: 3px; }
.tile .tl { font-size: 10px; color: var(--dim); letter-spacing: .5px; margin-top: 2px; line-height: 1.25; }
.tile.warn .tv { color: var(--warn); }
.tile.alarm { border-color: var(--alarm); }
.tile.alarm .tv { color: var(--alarm); animation: flash .8s steps(2) infinite; }

/* buttons */
.btn {
  background: var(--panel2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 6px; padding: 9px 16px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #04141f; border: none; }
.btn.danger { background: var(--alarm); color: #fff; border: none; }
.btn.ok { background: var(--ok); color: #06280f; border: none; }
.btn.on { background: var(--ok); color: #06280f; border-color: var(--ok); }
.btn.off {}
.btn:disabled { opacity: .4; cursor: default; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* pump / device widgets */
.dev {
  display: flex; align-items: center; gap: 8px; background: #0a0f16;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer;
  user-select: none;
}
.dev .lamp { width: 12px; height: 12px; border-radius: 50%; background: #37404e; box-shadow: 0 0 4px #000 inset; }
.dev.run .lamp { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dev .dn { font-size: 12px; }
.dev .ds { font-size: 10px; color: var(--dim); margin-left: auto; font-family: var(--mono); }

/* telegraph */
#telegraph { display: flex; flex-direction: column; gap: 4px; width: 260px; }
#telegraph button {
  background: var(--panel2); border: 1px solid var(--line); color: var(--txt);
  padding: 10px; cursor: pointer; font-weight: 700; letter-spacing: 1px; border-radius: 4px;
}
#telegraph button.sel { background: var(--accent); color: #04141f; }
#telegraph button.stop { background: #3a0f14; border-color: #7c2733; }
#telegraph button.stop.sel { background: var(--alarm); color: #fff; }

/* alarm list */
table.alist { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
table.alist th { text-align: left; color: var(--dim); font-size: 10px; letter-spacing: 1px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
table.alist td { padding: 5px 8px; border-bottom: 1px solid #16202e; }
tr.al-ACTIVE_UNACKED td { color: var(--alarm); animation: flash .8s steps(2) infinite; }
tr.al-ACTIVE_ACKED td { color: var(--alarm); }
tr.al-CLEARED_UNACKED td { color: var(--ok); animation: flash .8s steps(2) infinite; }
tr.kind-SLD td { color: var(--sld) !important; }
tr.kind-SHD td { color: #ff2038 !important; font-weight: 700; }
table.alist .ackbtn { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 4px; cursor: pointer; padding: 1px 8px; }

/* event log */
.eventlog { font-family: var(--mono); font-size: 12px; max-height: 300px; overflow: auto; }
.eventlog div { padding: 2px 6px; border-bottom: 1px solid #131c29; }
.ev-alarm { color: var(--alarm); }
.ev-warn { color: var(--warn); }
.ev-order { color: var(--accent); }
.ev-info { color: var(--dim); }

/* checklist */
.chk { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #16202e; }
.chk .cbox { width: 18px; height: 18px; border: 2px solid var(--dim); border-radius: 4px; flex: 0 0 auto; text-align: center; line-height: 15px; font-weight: 900; color: var(--ok); }
.chk.done .cbox { border-color: var(--ok); background: rgba(52,209,123,.12); }
.chk.done { color: var(--ok); }
.chk .hint { margin-left: auto; color: var(--dim); font-size: 11px; text-align: right; }

/* mimic svg */
svg text { font-family: var(--mono); }
.mimic-wrap { overflow-x: auto; }
svg .pipe { stroke-width: 4; fill: none; opacity: .95; }
svg .pipe.thin { stroke-width: 2.5; }
/* liquid/energy present in a line = animated dashes flowing in pipe direction */
svg [data-pipe]:not(.flow-off) { stroke-dasharray: 9 7; animation: pflow .7s linear infinite; }
/* flow-rev marks a link whose power/energy travels against the drawn path
   direction (e.g. a bus-tie feeding the other way, or a generator feeding up) */
svg [data-pipe].flow-rev:not(.flow-off) { animation-direction: reverse; }
svg .flow-off { opacity: .22; }
@keyframes pflow { to { stroke-dashoffset: -16; } }

/* ---------- standard machine-state GUI ----------
   green = running · grey = stopped · flashing red = fault/tripped */
.mch-off .machine { fill: #dde6f0; stroke: #8fa7c4; }
.mch-off [data-rotor] { fill: #4a638a; }
.mch-off .lbl, .mch-off text.lbl { fill: #1a2740; }
.mch-run .machine { fill: #1fae5e; stroke: #63f2a5; }
/* the HV one-line adds the state class ON the .machine element itself
   (gen circles, breaker boxes) — self-matching rules so they colour too */
.machine.mch-run { fill: #1fae5e; stroke: #63f2a5; }
.machine.mch-off { fill: #182333; stroke: #4a638a; }
.machine.mch-flt { fill: #5e1620; stroke: #ff4d5e; animation: flash .8s steps(2) infinite; }
.mch-flt .machine { fill: #5c1d24; stroke: #ff5a6a; animation: mflash .8s step-end infinite; }
@keyframes mflash { 50% { fill: #2a0d12; stroke: #7a2530; } }
.mch-run [data-rotor] { transform-box: fill-box; transform-origin: center; animation: mspin 1.1s linear infinite; fill: #0b3d22; }
.mch-flt [data-rotor] { fill: #ff8b96; }
@keyframes mspin { to { transform: rotate(360deg); } }
svg .flash-flt { animation: mflash .8s step-end infinite; }
svg .heat-on { stroke: #ff9c4a !important; stroke-width: 2.5; }
.hcu-live [data-hcu] { fill: #23405c; stroke: #38b6ff; }
svg .lbl { fill: var(--dim); font-size: 10px; letter-spacing: .5px; }
/* letters drawn INSIDE machine symbols (G, EG, ⟳): white with a dark outline
   so they stay readable on the solid-green running fill, grey stop and red fault */
svg text.mlbl { fill: #f2f8ff; font-weight: 800; paint-order: stroke; stroke: #07240f; stroke-width: 2.2px; }
/* …and these two rules make .mlbl actually WIN inside a state-coloured group.
   `.mch-off .lbl` / `.mch-run .lbl` above are (0,2,0) selectors and would
   otherwise repaint the text back to a colour that vanishes into the fill —
   which is how the scrubber's WM IN / WM OUT captions ended up unreadable on
   their solid-green running symbols. */
svg .mch-run text.mlbl { fill: #06301a; stroke: none; }   /* dark on the solid-green run fill */
svg .mch-off text.mlbl { fill: #12203a; stroke: none; }   /* dark on the white stopped fill   */
svg .mch-flt text.mlbl { fill: #ffe9ec; stroke: #3a0d14; }/* light on the red fault fill      */
/* A caption drawn OUTSIDE its symbol (pump names under the circle, etc.) must
   keep the normal dim colour in every state — the dark-on-white rule for
   labels INSIDE a stopped symbol would otherwise make it dark-on-dark. */
svg .mch-run text.olbl, svg .mch-off text.olbl, svg .mch-flt text.olbl { fill: var(--dim); }
svg .val { fill: #e8f4ff; font-size: 12px; font-weight: 700; }
svg .val.warn { fill: var(--warn); }
svg .val.alarm { fill: var(--alarm); }
svg .box { fill: #101a29; stroke: var(--line); }
svg .machine { fill: #17243a; stroke: #33507a; }

/* ---------- clickable valve symbols (LO screen) ----------
   bow-tie gate valve: green fill = OPEN, dark = SHUT (ACONIS convention).
   3-way cock: pivot pointer swings to the active port. */
svg .lovalve { fill: #223247; stroke: #5a7196; stroke-width: 1.5; }
svg [data-lov].v-open .lovalve { fill: #1fae5e; stroke: #63f2a5; }
svg [data-lov].v-shut .lovalve { fill: #223247; stroke: #5a7196; }
svg [data-lov].v-alarm .lovalve { fill: #5c1d24; stroke: #ff6a78; animation: flash .8s steps(2) infinite; }
svg [data-lov]:hover .lovalve { stroke: #cfe0f5; }
/* ---------- generic clickable valve symbol (AIR / COOLING / BOILER mimics) ----
   ACONIS convention, identical to the machine symbols above:
     OPEN  = SOLID GREEN #1fae5e   SHUT = WHITE #dde6f0   alarm = flashing red
   NB: the state MUST be carried by these classes, not by a fill="" attribute —
   a stylesheet `fill` declaration (svg .machine {…}) beats a presentation
   attribute, which is exactly why the air-mimic valves used to stay navy blue
   whatever the operator clicked. Captions are drawn OUTSIDE the symbol so they
   never have to be read on top of the green fill. */
svg .vsym { fill: #dde6f0; stroke: #8fa7c4; stroke-width: 1.4; }
svg .v-open .vsym { fill: #1fae5e; stroke: #63f2a5; }
svg .v-shut .vsym { fill: #dde6f0; stroke: #8fa7c4; }
svg .v-alarm .vsym { fill: #5c1d24; stroke: #ff6a78; animation: flash .8s steps(2) infinite; }
svg [data-vlv], svg [data-vgroup], svg [data-blrv] { cursor: pointer; }
svg [data-vlv]:hover .vsym, svg [data-vgroup]:hover .vsym, svg [data-blrv]:hover .vsym { stroke: #cfe0f5; stroke-width: 2; }
svg .lo3wbody { fill: #17243a; stroke: #5a7196; stroke-width: 1.5; }
svg .lo3wptr { stroke: #63f2a5; stroke-width: 2.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .4s ease; }
svg [data-lo3w]:hover .lo3wbody { stroke: #cfe0f5; }
/* clickable valve buttons in side panels: OPEN highlighted, shut dim */
.btn.lo-vbtn { font-family: var(--mono); font-size: 11px; line-height: 1.3; padding: 6px 10px; }
.btn.lo-vbtn.v-open { background: #123d28; border-color: #1fae5e; color: #9defc0; }
.btn.lo-vbtn.v-shut { background: #1a2333; border-color: #3a4c66; color: #8ea3c0; }

/* instructor */
.faultgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.fault { display: flex; align-items: center; gap: 8px; background: #0a0f16; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.fault input { accent-color: var(--alarm); width: 15px; height: 15px; }
.fault.on { border-color: var(--alarm); }
.fault .fs { color: var(--dim); font-size: 10px; margin-left: auto; }


.voice-btn {
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 4px; padding: 2px 7px; cursor: pointer; font-size: 12px;
}
.voice-btn.on { background: #1d5c38; border-color: #37e08a; }

.back-btn {
  background: var(--panel2); border: 1px solid var(--accent); color: var(--accent);
  border-radius: 8px; padding: 8px 14px; margin-right: 12px; cursor: pointer;
  font-size: 15px; align-self: center;
}
.back-btn:hover:not(:disabled) { background: var(--accent); color: #04141f; }
.back-btn:disabled { opacity: .3; cursor: default; border-color: var(--line); color: var(--dim); }

.chal-fix {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(52, 209, 123, .07); border: 1px solid #2a6a45;
  line-height: 1.75; font-size: 13px;
}
.chal-fix .cf-head { color: var(--ok); font-weight: 800; margin-bottom: 6px; }
.btn.warn2 { background: #4a3a10; border-color: #7a5c1e; color: #ffd97a; font-weight: 700; }
.btn.warn2:hover { background: #5d4a15; }

/* ---------- intro: app tour + operating guide ---------- */
#tour-card {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
  width: 520px; max-width: calc(100vw - 32px); z-index: 2000;
  background: linear-gradient(180deg, #1a2536, #101a28);
  border: 1px solid #7a5c1e; border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(255,198,62,.15);
}
#tour-card .tp-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255,198,62,.08); border-bottom: 1px solid var(--line);
}
#tour-card .tp-prog { background: var(--warn); color: #1a1102; font-weight: 800; font-size: 11px; border-radius: 10px; padding: 2px 9px; }
#tour-card .tp-title { font-weight: 700; font-size: 14px; flex: 1; }
#tour-card .tp-lang button {
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 4px; padding: 2px 7px; cursor: pointer; font-size: 11px;
}
#tour-card .tp-lang button.sel { background: var(--warn); color: #1a1102; font-weight: 700; }
#tour-card .tp-body { padding: 12px 14px; font-size: 13.5px; line-height: 1.75; }
#tour-card .tp-btns { display: flex; gap: 8px; padding: 10px 12px; }
#tour-card .tp-btns .btn { flex: 1; padding: 8px 6px; }

/* first-launch language chooser */
#lang-chooser {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 14, .82); backdrop-filter: blur(3px);
}
#lang-chooser .lc-box {
  background: linear-gradient(180deg, #1a2536, #101a28); border: 1px solid var(--accent);
  border-radius: 16px; padding: 34px 44px; text-align: center; max-width: 480px;
  box-shadow: 0 16px 64px rgba(0,0,0,.8), 0 0 0 1px rgba(56,182,255,.2);
}
#lang-chooser .lc-flag { font-size: 44px; }
#lang-chooser .lc-title { font-size: 19px; font-weight: 800; margin: 12px 0 20px; line-height: 1.6; }
#lang-chooser .lc-btns { display: flex; gap: 14px; justify-content: center; }
#lang-chooser .lc-btn { font-size: 17px; padding: 14px 34px; border-radius: 10px; border-color: var(--accent); }
#lang-chooser .lc-btn:hover { background: var(--accent); color: #04141f; font-weight: 700; }
#lang-chooser .lc-note { margin-top: 20px; font-size: 11.5px; color: var(--dim); line-height: 1.8; }

/* home-screen language tab */
.lang-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lang-bar .lb-label { font-weight: 800; font-size: 14px; }
.lang-bar .lb-seg { display: flex; border: 1px solid var(--accent); border-radius: 8px; overflow: hidden; }
.lang-bar .lb-seg button {
  background: transparent; border: none; color: var(--txt); padding: 8px 22px;
  cursor: pointer; font-size: 13.5px;
}
.lang-bar .lb-seg button.sel { background: var(--accent); color: #04141f; font-weight: 800; }
.lang-bar .lb-hint { color: var(--dim); font-size: 12px; }

/* ---- HOME-SCREEN PRO BANNER (ui.js proBannerHtml) — free tier only --------
   Eye-catching but classy: the app's own dark panel, a warm amber edge and a
   very slight amber wash, NOT a gradient slab. Two columns at the 1280 px
   design width (pitch left, the offer and its buttons right), stacking on a
   narrow phone. The payment block inside is tier.js's, shared with the lock
   cards, so it inherits .pro-pay styling untouched. */
.pro-banner {
  display: flex; align-items: stretch; gap: 22px;
  border-color: #8a6a22 !important;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,198,62,.07), rgba(255,198,62,0) 60%),
    var(--panel);
}
.pro-banner .pb-pitch { flex: 1 1 auto; min-width: 0; }
.pro-banner .pb-ttl {
  font: 800 20px/1.25 inherit; letter-spacing: .02em; color: var(--txt);
  display: flex; align-items: center; gap: 8px;
}
.pro-banner .pb-star { font-size: 20px; filter: drop-shadow(0 0 6px rgba(255,198,62,.55)); }
.pro-banner .pb-ttl2 { font-size: 12.5px; color: #8fd0a8; margin-top: 3px; }
.pro-banner .pb-list {
  list-style: none; margin: 11px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
}
.pro-banner .pb-list li {
  position: relative; padding-left: 16px;
  font-size: 12.5px; line-height: 1.65; color: var(--txt);
}
.pro-banner .pb-list li::before {
  content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 800;
}
.pro-banner .pb-buy { flex: 0 0 336px; max-width: 336px; display: flex; flex-direction: column; }
.pro-banner .pb-buy .pro-pay { margin-top: 0; }
.pro-banner .pb-cta {
  margin-top: 10px; width: 100%;
  background: var(--warn); color: #1a1102; border: none;
  padding: 13px 14px; font: 800 15px inherit; border-radius: 8px;
}
.pro-banner .pb-cta:hover { filter: brightness(1.08); }
.pro-banner .pb-code {
  margin-top: 8px; background: none; border: none; cursor: pointer;
  color: var(--dim); font: 12px inherit; text-decoration: underline; align-self: center;
}
.pro-banner .pb-code:hover { color: var(--accent); }
@media (max-width: 900px) {
  .pro-banner { flex-direction: column; gap: 14px; }
  .pro-banner .pb-buy { flex-basis: auto; max-width: none; }
  .pro-banner .pb-list { grid-template-columns: 1fr; }
}

.intro-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-color: #7a5c1e !important;
}
.intro-banner .ib-title { font-size: 15px; font-weight: 800; }
.intro-banner .ib-sub { font-size: 12.5px; color: var(--dim); line-height: 1.6; margin-top: 4px; }

.guide-sec { border-top: 1px solid var(--line); }
.guide-h {
  padding: 10px 4px; cursor: pointer; font-weight: 700; font-size: 13.5px;
  color: var(--accent); user-select: none;
}
.guide-h:hover { color: #7fd0ff; }
.guide-steps { margin: 0 0 12px 22px; padding: 0 8px; }
.guide-steps li { line-height: 1.75; font-size: 13px; margin-bottom: 7px; }
.guide-steps.hidden { display: none; }

/* ---------- module home screen ---------- */
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.module-card {
  background: #0a0f16; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .15s;
}
.module-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.module-card.sel { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.module-card .mc-icon { font-size: 34px; }
.module-card .mc-title { font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.module-card .mc-desc { font-size: 12px; color: var(--dim); line-height: 1.65; flex: 1; }
.module-card .btn { align-self: flex-start; }
/* the combined-plant card sits above its sub-groups, spanning the full row */
.module-card.hero { grid-column: 1 / -1; background: #0b131d; border-color: #294263; flex-direction: row; align-items: center; flex-wrap: wrap; }
.module-card.hero .mc-icon { font-size: 42px; }
.module-card.hero .mc-title { font-size: 17px; }
.module-card.hero .mc-desc { min-width: 220px; }
/* machinery sub-group heading inside a domain */
.mc-group { margin-top: 16px; }
.mc-group-h {
  color: #7c93b2; font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; margin: 0 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
#nav-home { color: var(--accent); font-weight: 700; border-bottom: 1px solid var(--line); }

/* ---------- learning mode ---------- */
.mytext { font-family: 'Segoe UI', 'Myanmar Text', 'Padauk', system-ui, sans-serif; }
.lesson-card {
  background: #0a0f16; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px;
}
.lesson-card .lc-title { font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.lesson-card .lc-sub { font-size: 11px; color: var(--dim); }
.lesson-card .btn { align-self: flex-start; }
.lesson-card.locked { background: #0a0d12; border-color: #262e3a; }
.lesson-card.locked .lc-title { color: var(--dim); }
.lesson-card .btn.locked {
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim); cursor: pointer;
}
.lesson-card .btn.locked:hover { border-color: var(--warn); color: var(--warn); }
/* (the old inline .lc-upsell/.lc-getpro box is gone — a tapped locked lesson
   now opens the shared Pro card as a modal; see .pro-modal below.) */

/* ---------- redesigned lesson picker: machinery sections + badges ---------- */
.learn-filter { margin: 2px 0 10px; }
.learn-filter input {
  width: 100%; box-sizing: border-box; font-size: 13.5px;
  background: var(--panel2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px; outline: none;
}
.learn-filter input:focus { border-color: var(--accent); }
#learn-nomatch { color: var(--dim); padding: 14px 4px; font-size: 13px; }
.learn-sec {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 10px; overflow: hidden;
}
.ls-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: linear-gradient(180deg, #16202e, #101823);
  border: none; border-left: 3px solid var(--accent); color: var(--txt);
  padding: 12px 14px; cursor: pointer; text-align: left; font-family: inherit;
}
.ls-head:hover { background: linear-gradient(180deg, #1a2636, #131c29); }
.ls-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px;
  background: rgba(56,182,255,.1); border: 1px solid rgba(56,182,255,.25);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.ls-names { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ls-name { font-size: 14.5px; font-weight: 800; letter-spacing: .4px; }
.ls-name2 { font-size: 11px; color: var(--dim); }
.ls-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--dim);
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.ls-chev { flex: 0 0 auto; color: var(--dim); font-size: 13px; transition: transform .18s; }
.learn-sec.open .ls-chev, .learn-sec.filter-open .ls-chev { transform: rotate(90deg); }
.learn-sec .ls-body { display: none; padding: 10px 12px 4px; }
.learn-sec.open .ls-body, .learn-sec.filter-open .ls-body { display: block; }
/* badges: the card's type is readable before its title */
.lc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .6px; line-height: 1;
  border-radius: 4px; padding: 4px 7px; border: 1px solid;
}
.lc-badge.lb-lec { color: #6fc3ff; border-color: rgba(111,195,255,.35); background: rgba(56,182,255,.08); }
.lc-badge.lb-drill { color: #ffb04d; border-color: rgba(255,176,77,.35); background: rgba(255,176,77,.08); }
.lc-badge.lb-3d { color: #b48cff; border-color: rgba(180,140,255,.35); background: rgba(180,140,255,.09); }
.lc-badge.lb-free { color: #34d17b; border-color: rgba(52,209,123,.4); background: rgba(52,209,123,.09); }
.lc-badge.lb-lock { color: var(--dim); border-color: var(--line); background: var(--panel2); }
.lesson-card .lc-title { font-size: 15.5px; }
.lesson-card.hidden { display: none; }

/* ---------- equipment status rail (every machinery screen) ---------- */
#equip-rail {
  position: fixed; right: 8px; top: 86px; bottom: 28px; width: 178px;
  display: flex; flex-direction: column; z-index: 60;
  background: linear-gradient(180deg, #101823, #0c1420);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#equip-rail.hidden { display: none; }
body.rail-on #screens { padding-right: 196px; }
#equip-rail .er-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
#equip-rail .er-title {
  flex: 1 1 auto; font-size: 10.5px; font-weight: 800; letter-spacing: 1px;
  color: #7c93b2; white-space: nowrap; overflow: hidden;
}
#equip-rail .er-min {
  background: none; border: 1px solid var(--line); border-radius: 5px;
  color: var(--dim); cursor: pointer; font-size: 11px; padding: 2px 7px;
}
#equip-rail .er-min:hover { color: var(--accent); border-color: var(--accent); }
#equip-rail .er-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; }
#equip-rail.min { bottom: auto; width: 44px; }
#equip-rail.min .er-list, #equip-rail.min .er-title { display: none; }
#equip-rail.min .er-head { border-bottom: none; padding: 8px 6px; justify-content: center; }
.er-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; cursor: pointer; border-left: 2px solid transparent;
}
.er-row:hover { background: rgba(56,182,255,.08); border-left-color: var(--accent); }
.er-row.flt { background: rgba(255,90,90,.07); }
.er-lamp {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: #37404e; box-shadow: none;
}
.er-lamp.run { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.er-lamp.fault { background: #ff5a5a; box-shadow: 0 0 7px #ff5a5a; animation: erblink 1s steps(2) infinite; }
.er-lamp.na { background: #4a638a; }
@keyframes erblink { 50% { opacity: .35; } }
.er-name {
  flex: 1 1 auto; min-width: 0; font-size: 10px; font-weight: 600;
  line-height: 1.25; color: var(--txt); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.er-val {
  flex: 0 0 auto; font-family: var(--mono); font-size: 9.5px; color: var(--dim);
  white-space: nowrap;
}
.er-row.flt .er-val { color: #ff8a8a; }
/* jump-target flash when a rail row is clicked */
.er-flash { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
  filter: drop-shadow(0 0 6px var(--accent));   /* SVG symbols glow too */
  animation: erflash 1.2s ease-in-out 2; }
@keyframes erflash { 50% { outline-color: transparent; } }
@media (max-width: 900px) {
  #equip-rail { display: none; }
  body.rail-on #screens { padding-right: 14px; }
}

#tutor-panel {
  position: fixed; right: 16px; bottom: 40px; width: 430px; max-width: calc(100vw - 40px);
  background: linear-gradient(180deg, #14202f, #0e1722);
  border: 1px solid #2e5d8a; border-radius: 12px; z-index: 1000;
  box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(56,182,255,.15);
  display: flex; flex-direction: column; overflow: hidden;
}
#tutor-panel .tp-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(56,182,255,.08); border-bottom: 1px solid var(--line);
}
#tutor-panel .tp-prog {
  background: var(--accent); color: #04141f; font-weight: 800; font-size: 11px;
  border-radius: 10px; padding: 2px 9px; white-space: nowrap;
}
#tutor-panel .tp-title { font-weight: 700; font-size: 13px; line-height: 1.45; flex: 1; }
#tutor-panel .tp-lang button {
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 4px; padding: 2px 7px; cursor: pointer; font-size: 11px;
}
#tutor-panel .tp-lang button.sel { background: var(--accent); color: #04141f; font-weight: 700; }
#tutor-panel .tp-body {
  padding: 12px 14px; font-size: 13.5px; line-height: 1.75; color: var(--txt);
  max-height: 300px; overflow-y: auto;
}
#tutor-panel .tp-status {
  padding: 4px 14px; font-family: var(--mono); font-size: 12px; color: var(--warn); min-height: 22px;
}
#tutor-panel .tp-bar { height: 4px; background: #0a0f16; }
#tutor-panel .tp-fill { height: 100%; background: var(--accent); transition: width .4s; }
#tutor-panel .tp-btns { display: flex; gap: 8px; padding: 10px 12px; }
#tutor-panel .tp-btns .btn { flex: 1; padding: 8px 6px; font-size: 12.5px; }

/* ---------- draggable / minimizable explanation panels ---------- */
#tutor-panel .tp-head, #tour-card .tp-head {
  cursor: move; touch-action: none; -webkit-user-select: none; user-select: none;
}
#tutor-panel.dragging, #tour-card.dragging { opacity: .92; cursor: grabbing; }
.tp-min {
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 12px; line-height: 1.5;
}
.tp-min:hover { color: var(--txt); border-color: var(--accent); }
#tutor-panel.minimized .tp-body,
#tutor-panel.minimized .tp-status,
#tutor-panel.minimized .tp-bar,
#tutor-panel.minimized .tp-btns,
#tour-card.minimized .tp-body,
#tour-card.minimized .tp-btns { display: none; }
#tutor-panel.minimized, #tour-card.minimized { width: auto; min-width: 260px; max-width: calc(100vw - 24px); }
#tutor-panel.minimized .tp-title, #tour-card.minimized .tp-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}

.tutor-hl {
  outline: 3px solid var(--warn) !important; outline-offset: 3px; border-radius: 6px;
  animation: hlpulse 1.1s ease-in-out infinite;
  position: relative; z-index: 5;
}
@keyframes hlpulse {
  0%, 100% { outline-color: var(--warn); box-shadow: 0 0 0 0 rgba(255,198,62,.55); }
  50% { outline-color: #fff0c0; box-shadow: 0 0 26px 7px rgba(255,198,62,.38); }
}
/* the sidenav tab of the screen the tutor is currently lecturing on */
#sidenav .nav.tutor-hl-nav {
  color: #1a1102; background: var(--warn);
  border-left: 4px solid #fff0c0;
  animation: hlnavpulse 1.1s ease-in-out infinite;
}
@keyframes hlnavpulse {
  0%, 100% { background: var(--warn); box-shadow: inset 0 0 0 0 rgba(255,240,192,0); }
  50% { background: #ffd977; box-shadow: inset 0 0 14px 2px rgba(255,240,192,.55); }
}

/* status bar */
#statusbar {
  flex: 0 0 auto; display: flex; justify-content: space-between; padding: 4px 12px;
  background: #0d141f; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 11px;
}
#sb-slowdown { color: var(--sld); font-weight: 700; }

/* cyl bars */
.cylbars { display: flex; gap: 10px; align-items: flex-end; height: 240px; padding: 10px; }
.cylbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.cylbar .bar { width: 70%; background: linear-gradient(180deg, #38b6ff, #1d6fa3); border-radius: 3px 3px 0 0; min-height: 2px; }
.cylbar.hot .bar { background: linear-gradient(180deg, #ff4d5e, #a3202e); }
.cylbar .bv { font-family: var(--mono); font-size: 11px; }
.cylbar .bn { font-size: 10px; color: var(--dim); }

/* operation screen start button */
.bigstart { font-size: 15px; padding: 14px 26px; }
.blockings { font-family: var(--mono); font-size: 12px; color: var(--alarm); }
.blockings div::before { content: '⛔ '; }
.okline { color: var(--ok); font-family: var(--mono); font-size: 12px; }

/* ---------- Pro unlock panel (web build) ---------- */
.lic-backdrop {
  position: fixed; inset: 0; background: rgba(4,8,12,.72); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lic-panel {
  position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #14202f, #0e1722); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lic-panel h2 { font-size: 17px; margin-bottom: 14px; padding-right: 24px; }
.lic-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer;
}
.lic-close:hover { color: var(--txt); }
.lic-status {
  display: flex; gap: 12px; align-items: center; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px;
}
.lic-status.pro { background: rgba(52,209,123,.12); border-color: rgba(52,209,123,.4); }
.lic-status-icon { font-size: 28px; }
.lic-status b { font-size: 14px; }
.lic-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.lic-price {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 12px;
  background: rgba(255,198,62,.08); border: 1px solid rgba(255,198,62,.34);
  border-radius: 8px; padding: 10px 14px;
}
.lic-price b { font: 800 21px var(--mono); color: var(--warn); white-space: nowrap; }
.lic-price span { font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.lic-step { font-size: 13px; line-height: 1.6; margin: 10px 0 6px; }
.lic-pay {
  font-size: 13px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 6px;
}
.lic-device {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; margin: 6px 0 12px;
}
.lic-device b { font-size: 11px; color: var(--dim); display: block; font-weight: 600; }
.lic-device span {
  font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: 1.5px;
}
.lic-telegram {
  display: block; text-align: center; background: var(--accent); color: #06131f;
  font-weight: 700; text-decoration: none; border-radius: 7px; padding: 11px; font-size: 13.5px;
}
.lic-telegram:hover { filter: brightness(1.08); }
.lic-input {
  width: 100%; margin-top: 8px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; color: var(--txt); font-family: var(--mono); font-size: 13px;
  padding: 10px; resize: vertical;
}
.lic-error { color: var(--alarm); font-size: 12.5px; margin-top: 8px; }
.lic-error.hidden { display: none; }
.lic-activate {
  width: 100%; margin-top: 10px; background: var(--ok); color: #06210f; border: none;
  border-radius: 7px; padding: 12px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.lic-activate:hover { filter: brightness(1.08); }
.lic-activate:disabled { opacity: .7; cursor: default; }


/* ---------- ACONIS-DS alarm display (HiView manual 1.2 / 1.4) ---------- */
.aconis-tab { padding: 3px 12px; font-size: 12px; }
.aconis-tab.active { background: var(--accent); color: #06131f; border-color: var(--accent); }
.eas-filter {
  display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--dim);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; margin-bottom: 8px;
}
.eas-filter label { display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
table.aconis { font-size: 11.5px; }
table.aconis th { font-size: 10.5px; letter-spacing: .4px; }
table.aconis td { padding: 3px 7px; }
.aconis-hint { font-size: 10.5px; color: var(--dim); margin-top: 6px; }
/* row states — unacked flashes, acked+active steady red, returned normal */
tr.ac-flash { color: #ff9aa4; animation: acblink .75s step-end infinite; }
tr.ac-flash.ac-normal { color: #7ce8ae; }
tr.ac-red { color: #ff5a6a; }
tr.ac-hist-normal { color: var(--txt); opacity: .75; }
/* LESSON-MUTED background alarm (safety.setFocus): still fully listed here —
   time, tag, value, limit, EAS group — but stood down. No flash: it is not
   calling anyone while the lecture runs. */
tr.ac-bg, tr.ac-bg.ac-flash, tr.ac-bg.ac-red { animation: none; opacity: .6; color: #93a8c2; }
@keyframes acblink { 50% { opacity: .25; } }
td.st-HIHI, td.st-LOLO { color: #ff5a6a; font-weight: 700; }
td.st-HIGH, td.st-LOW { font-weight: 700; }
/* latest-alarm ticker in the topbar */
#latest-alarms {
  flex: 1 1 260px; min-width: 0; max-width: 460px; overflow: hidden;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  border-left: 1px solid var(--line); padding-left: 10px; align-self: center;
}
#latest-alarms .la-row { display: flex; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#latest-alarms .la-row.ac-flash { animation: acblink .75s step-end infinite; color: #ff9aa4; }
#latest-alarms .la-row.ac-red { color: #ff5a6a; }
#latest-alarms .la-t { color: var(--dim); }
#latest-alarms .la-tag { color: var(--accent); }
#latest-alarms .la-d { overflow: hidden; text-overflow: ellipsis; }
#latest-alarms .la-st { font-weight: 700; }
#latest-alarms .la-none { color: var(--dim); }
/* 🔕 background-alarm chip — how many alarms the running lesson is holding
   quiet. Deliberately calm: no red, no flash, no animation. It is a count of
   things that exist, not a call for action; clicking it opens the alarm list. */
.muted-chip {
  align-self: center; flex: 0 0 auto; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; white-space: nowrap;
  color: #9db4d0; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; margin-left: 10px;
}
.muted-chip:hover { color: var(--accent); border-color: var(--accent); }


/* ---------- term highlighting — "point while you speak" ---------- */
/* Text inside the movable tutor window stays visually PLAIN (user request):
   the pointing happens on the actual screen controls via .term-hl below.
   Term spans remain clickable, so tapping a word still flashes its control. */
.tp-body .term { color: inherit; cursor: pointer; }
.tp-body .term.term-live { background: none; color: inherit; font-weight: inherit; }
/* the matching control on screen pulses cyan (distinct from the amber step anchor) */
.term-hl {
  outline: 3px dashed #45e0e0 !important; outline-offset: 3px; border-radius: 6px;
  animation: termpulse .9s ease-in-out infinite;
  position: relative; z-index: 6;
}
@keyframes termpulse {
  0%, 100% { outline-color: #45e0e0; box-shadow: 0 0 0 0 rgba(69,224,224,.5); }
  50% { outline-color: #c8fbfb; box-shadow: 0 0 22px 6px rgba(69,224,224,.35); }
}

/* ===== ENGINE 3D sensor locator ===== */
/* position:relative so the 3D Pro gate (tier.js) can lay its lock inside the
   screen's own 3D area and never over another screen */
.e3d-wrap { position: relative; display: flex; gap: 10px; height: calc(100vh - 130px); min-height: 480px; }
.e3d-list { width: 300px; flex: none; overflow-y: auto; background: #0e1a2c; border: 1px solid #22344e; border-radius: 8px; padding: 8px; }
.e3d-hint { font-size: 11px; color: #7b93b4; line-height: 1.5; padding: 6px 6px 10px; border-bottom: 1px solid #22344e; margin-bottom: 6px; }
.e3d-grp { font-size: 10px; letter-spacing: 1.5px; color: #45e0e0; margin: 10px 4px 4px; font-weight: 700; }
.e3d-sen { display: block; width: 100%; text-align: left; background: #13233a; color: #cfe0f4; border: 1px solid #22344e; border-radius: 6px; padding: 6px 8px; margin: 3px 0; font: 12px/1.35 'Segoe UI', sans-serif; cursor: pointer; }
.e3d-sen:hover { border-color: #45e0e0; }
.e3d-sen.sel { background: #1c3450; border-color: #ffc63e; }
.e3d-tag { display: inline-block; background: #0a1626; color: #ffc63e; font: 700 10px Consolas, monospace; border-radius: 4px; padding: 1px 5px; margin-right: 6px; }
.e3d-stage { position: relative; flex: 1; min-width: 0; background: #0b1626; border: 1px solid #22344e; border-radius: 8px; overflow: hidden; }
.e3d-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.e3d-views { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.e3d-view { background: rgba(14,26,44,.85); color: #7b93b4; border: 1px solid #22344e; border-radius: 5px; font: 700 10px Consolas, monospace; padding: 4px 7px; cursor: pointer; }
.e3d-view:hover { color: #45e0e0; border-color: #45e0e0; }
/* pressed state — the LABELS pill is a toggle, not a camera preset, so it has
   to READ as on/off. Amber, matching the callout ring it controls. */
.e3d-view.on { color: #1a1102; background: #ffc63e; border-color: #ffc63e; }
.e3d-view.on:hover { color: #1a1102; background: #ffd977; border-color: #ffd977; }
.e3d-lbl { position: absolute; pointer-events: none; background: #ffc63e; color: #1a1102; font: 700 11px Consolas, monospace; padding: 2px 7px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.e3d-info { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(10,20,36,.93); border: 1px solid #2e4463; border-left: 4px solid #ffc63e; border-radius: 8px; padding: 9px 12px; font-size: 12px; color: #cfe0f4; line-height: 1.5; }
.e3d-it { font-weight: 700; margin-bottom: 3px; }
.e3d-loc { color: #9fb4d0; }
.e3d-note { color: #45e0e0; font: 700 11px Consolas, monospace; margin-top: 4px; }
.e3d-my { color: #8fd0a8; font-weight: 400; }

/* ---------- HV breaker 3D (hv3d.js) ---------- */
.hv3d-wrap { position: relative; display: flex; gap: 10px; height: calc(100vh - 130px); min-height: 480px; }
.hv3d-list { width: 320px; flex: none; display: flex; flex-direction: column; overflow: hidden; background: #0e1a2c; border: 1px solid #22344e; border-radius: 8px; padding: 8px; }
.hv3d-hint { font-size: 11px; color: #7b93b4; line-height: 1.5; padding: 4px 4px 8px; border-bottom: 1px solid #22344e; }
.hv3d-ctl { padding: 8px 2px; border-bottom: 1px solid #22344e; }
.hv3d-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.hv3d-lab { font: 700 10px Consolas, monospace; letter-spacing: 1px; color: #7b93b4; width: 60px; flex: none; }
.hv3d-sel { flex: 1; background: #13233a; color: #cfe0f4; border: 1px solid #2e4463; border-radius: 5px; padding: 4px 6px; font: 12px 'Segoe UI', sans-serif; }
.hv3d-btns { display: flex; gap: 5px; margin: 6px 0; }
.hv3d-act { flex: 1; background: #16283f; color: #cfe0f4; border: 1px solid #2e4463; border-radius: 6px; padding: 7px 4px; font: 700 12px Consolas, monospace; cursor: pointer; }
.hv3d-act:hover { border-color: #45e0e0; }
.hv3d-act.close { background: #16351f; border-color: #2f7d52; color: #a8e6bf; }
.hv3d-act.trip { background: #3a1c1c; border-color: #7d3a3a; color: #eab0b0; }
.hv3d-act.wide { width: 100%; margin: 2px 0 6px; background: #2a2540; border-color: #4a3f6a; color: #cbb8ec; }
.hv3d-spd { background: #13233a; color: #7b93b4; border: 1px solid #2e4463; border-radius: 4px; font: 700 10px Consolas, monospace; padding: 3px 7px; margin-right: 3px; cursor: pointer; }
.hv3d-spd.on { background: #1c3450; color: #ffc63e; border-color: #ffc63e; }
.hv3d-stage-cap { font: 11px Consolas, monospace; color: #45e0e0; padding: 6px 4px 2px; line-height: 1.4; min-height: 30px; }
.hv3d-refuse { font-size: 11px; color: #eab0b0; background: rgba(60,20,20,.5); border: 1px solid #7d3a3a; border-radius: 5px; padding: 5px 7px; margin: 4px 2px; line-height: 1.4; }
.hv3d-parts { flex: 1; overflow-y: auto; margin-top: 6px; }
.hv3d-grp { font-size: 10px; letter-spacing: 1.5px; color: #45e0e0; margin: 9px 4px 4px; font-weight: 700; }
.hv3d-part { display: block; width: 100%; text-align: left; background: #13233a; color: #cfe0f4; border: 1px solid #22344e; border-radius: 6px; padding: 6px 8px; margin: 3px 0; font: 12px/1.35 'Segoe UI', sans-serif; cursor: pointer; }
.hv3d-part:hover { border-color: #45e0e0; }
.hv3d-part.sel { background: #1c3450; border-color: #ffc63e; }
.hv3d-tag { display: inline-block; background: #0a1626; color: #ffc63e; font: 700 10px Consolas, monospace; border-radius: 4px; padding: 1px 5px; margin-right: 6px; }
.hv3d-stage { position: relative; flex: 1; min-width: 0; background: #0b1626; border: 1px solid #22344e; border-radius: 8px; overflow: hidden; }
.hv3d-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.hv3d-views { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.hv3d-view { background: rgba(14,26,44,.85); color: #7b93b4; border: 1px solid #22344e; border-radius: 5px; font: 700 10px Consolas, monospace; padding: 4px 7px; cursor: pointer; }
.hv3d-view:hover { color: #45e0e0; border-color: #45e0e0; }
.hv3d-statebadge { position: absolute; top: 8px; left: 8px; background: rgba(10,20,36,.9); border: 1px solid #2e4463; border-radius: 6px; font: 12px Consolas, monospace; color: #cfe0f4; padding: 5px 10px; }
.hv3d-statebadge .sb-c { color: #b23b3b; font-weight: 700; }
.hv3d-statebadge .sb-o { color: #33d17a; font-weight: 700; }
.hv3d-flylbl { position: absolute; pointer-events: none; background: #ffc63e; color: #1a1102; font: 700 11px Consolas, monospace; padding: 2px 7px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hv3d-info { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(10,20,36,.94); border: 1px solid #2e4463; border-left: 4px solid #ffc63e; border-radius: 8px; padding: 9px 12px; font-size: 12px; color: #cfe0f4; line-height: 1.5; max-height: 46%; overflow-y: auto; }
.hv3d-it { font-weight: 700; margin-bottom: 4px; }
.hv3d-desc { color: #9fb4d0; margin: 2px 0; }
.hv3d-note { color: #45e0e0; font: 700 11px Consolas, monospace; margin-top: 5px; }
.hv3d-my { color: #8fd0a8; font-weight: 400; }

/* ---------- emergency generator local panel (ui-eg.js) ---------- */
.eg-modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eg-modelbl { font-size: 10px; letter-spacing: 1px; color: var(--dim); margin-right: 4px; }
.eg-mode { min-width: 92px; }
.eg-lampbank { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eg-lamp { display: flex; align-items: center; gap: 9px; background: #0a0f16; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.eg-lamp .dot { width: 13px; height: 13px; border-radius: 50%; background: #2b3542; box-shadow: 0 0 4px #000 inset; flex: 0 0 auto; }
.eg-lamp.on { color: var(--txt); }
.eg-lamp.on[data-kind="alarm"] { border-color: var(--alarm); }
.eg-lamp.on[data-kind="alarm"] .dot { background: var(--alarm); box-shadow: 0 0 9px var(--alarm); animation: flash .8s steps(2) infinite; }
.eg-lamp.on[data-kind="warn"] { border-color: var(--warn); }
.eg-lamp.on[data-kind="warn"] .dot { background: var(--warn); box-shadow: 0 0 9px var(--warn); }
.eg-lamp.on[data-kind="ok"] { border-color: var(--ok); }
.eg-lamp.on[data-kind="ok"] .dot { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
.eg-barwrap { margin-top: 10px; }
.eg-barlbl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-bottom: 4px; }
.eg-bar { height: 14px; background: #0a0f16; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.eg-bar.tall { height: 22px; }
.eg-fill { height: 100%; width: 0; background: var(--ok); transition: width .3s ease, background .3s ease; }
/* (the old .eg-xlink cross-link buttons between the two screens are gone — the
   screen-tab bar below replaces them) */

/* ---------- grouped/collapsible instructor fault sections (ui.js buildInstructor) ---------- */
.fault-sections { display: flex; flex-direction: column; gap: 8px; }
.fault-section { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #0c121b; }
.fault-sec-hd { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; user-select: none; color: var(--dim); background: #10192600; }
.fault-sec-hd:hover { color: var(--txt); background: #121c2a; }
.fault-sec-hd .chev { color: var(--dim); font-size: 11px; transition: transform .15s ease; }
.fault-section.open > .fault-sec-hd { color: var(--txt); border-bottom: 1px solid var(--line); }
.fault-section.open > .fault-sec-hd .chev { transform: rotate(90deg); color: var(--accent); }
.fault-sec-hd .fsh-lbl { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.fault-sec-hd .fsh-count { margin-left: auto; background: var(--panel2); border: 1px solid var(--line); color: var(--dim); border-radius: 9px; font-size: 10px; padding: 1px 8px; font-family: var(--mono); }
.fault-section.open > .fault-sec-hd .fsh-count { color: var(--accent); border-color: var(--accent); }
.fault-section:not(.open) > .fault-sec-body { display: none; }
.fault-sec-body { padding: 10px; }

/* ---------- FO 3D pilot (Ship Training 2.0 · Phase 0) ---------- */
.fo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* SUPPLEMENTARY branding — the 3D view is a study aid, never the control of record */
.s3d-supp { order: 5; flex-basis: 100%; text-align: right; font: 700 10px var(--mono); color: #7f9bc0; letter-spacing: .02em; }
.s3d-supp b { color: #9ecbff; font-weight: 800; }
.s3d-supp i { display: inline-block; margin-left: 8px; font-style: normal; font-weight: 600; color: #8fd0a8; }
.fo-viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; flex: none; }
.fo-vbtn { background: #0e1a2c; color: var(--dim); border: none; font: 700 12px var(--mono); padding: 5px 14px; cursor: pointer; }
.fo-vbtn + .fo-vbtn { border-left: 1px solid var(--line); }
.fo-vbtn.active { background: #1c3450; color: var(--warn); }
.fo-vbtn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- SCREEN TABS: two sibling screens shown as one tabbed pair ----------
   Deliberately the SAME toggle the whole app uses for 2D/3D, so the trainee
   meets a control he already knows — only taller, because each tab carries its
   Burmese sublabel. Used by the EMERGENCY GEN | EMERGENCY SWBD pair, which is
   ONE sidebar row (index.html) and two full-width screens (js/ui-eg.js). */
.screentab-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.screentab-row .st-hint { font: 600 10.5px var(--mono); color: #56708f; letter-spacing: .03em; }
.screentab-row .st-hint i { display: inline-block; margin-left: 8px; font-style: normal; font-weight: 600; color: #8fd0a8; font-family: 'Segoe UI', 'Myanmar Text', 'Padauk', system-ui, sans-serif; }
.fo-vbtn.screentab { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 18px; line-height: 1.25; }
.fo-vbtn.screentab b { font: 800 12px var(--mono); letter-spacing: .04em; }
.fo-vbtn.screentab i { font-style: normal; font-weight: 600; font-size: 10px; color: #7f9bc0; font-family: 'Segoe UI', 'Myanmar Text', 'Padauk', system-ui, sans-serif; }
.fo-vbtn.screentab.active i { color: #8fd0a8; }
/* BIG 3D: the stage fills most of the viewport (client request — the old
   min(62vh,640px) read as a small window next to the full-screen ENGINE 3D) */
.fo-3d-stage { position: relative; margin-top: 8px; border: 1px solid #22344e; border-radius: 8px; overflow: hidden; background: #0b1018; height: min(84vh, 1100px); }
.fo-3d-host { position: absolute; inset: 0; }
.fo-3d-host canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.fo3d-card { position: absolute; left: 10px; bottom: 10px; right: 10px; max-width: 460px; background: rgba(10,20,36,.94); border: 1px solid #2e4463; border-left: 4px solid var(--warn); border-radius: 8px; padding: 9px 12px; font-size: 12px; color: var(--txt); line-height: 1.5; }
.fo3d-ct { font-weight: 700; margin-bottom: 3px; }
.fo3d-tag { display: inline-block; background: #0a1626; color: var(--warn); font: 700 10px var(--mono); border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
.fo3d-my { color: #8fd0a8; }
.fo3d-hint { position: absolute; top: 30px; left: 10px; right: 10px; pointer-events: none; font: 11px var(--mono); color: #6f86a6; }
/* 3D STUDY VIEW header — top-left of every 3D stage */
.s3d-studyhdr { position: absolute; top: 6px; left: 10px; z-index: 6; font: 800 10px var(--mono); letter-spacing: .03em; color: #9ecbff; background: rgba(10,20,36,.82); border: 1px solid #2e4463; border-radius: 5px; padding: 2px 8px; pointer-events: none; }
.s3d-studyhdr span { color: #8fd0a8; font-weight: 600; margin-left: 7px; }

/* ---------- 3D Pro gate: free-tier preview badge + lock (js/tier.js) ----------
   Both live INSIDE the screen's own 3D stage (position:relative), never on
   document.body, so a lock can never leak over another screen. The lock is
   deliberately translucent: the free user must keep seeing the 3D behind it. */
.s3d-gate-badge {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: baseline; gap: 7px; pointer-events: none;
  background: rgba(255,198,62,.14); border: 1px solid rgba(255,198,62,.55);
  border-radius: 999px; padding: 3px 12px; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.s3d-gate-badge b { font: 800 11px var(--mono); letter-spacing: .04em; color: var(--warn); }
.s3d-gate-badge i { font-style: normal; font-size: 10.5px; font-weight: 600; color: #d8b66a; }
.s3d-gate-clock { font: 800 12.5px var(--mono); color: #fff2cf; }

.s3d-gate-lock {
  position: absolute; inset: 0; z-index: 40;
  display: flex; padding: 16px; overflow: auto;
  background: rgba(6,11,19,.7);
  -webkit-backdrop-filter: blur(2px) saturate(.75); backdrop-filter: blur(2px) saturate(.75);
}
.s3d-gate-card {
  position: relative;
  /* margin:auto (not align-items:center) so a card taller than a short 3D
     stage scrolls with its top reachable instead of being clipped. */
  margin: auto; width: 100%; max-width: 430px; text-align: center;
  background: linear-gradient(180deg, rgba(20,32,47,.97), rgba(14,23,34,.97));
  border: 1px solid #2e4463; border-radius: 12px; padding: 20px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.s3d-gate-ttl { font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--txt); }
.s3d-gate-ttl2 { font-size: 12px; font-weight: 600; line-height: 1.5; color: #8fd0a8; margin-top: 2px; }
.s3d-gate-msg { font-size: 12.5px; line-height: 1.65; color: var(--dim); margin-top: 10px; }
.s3d-gate-msg2 { font-size: 11.5px; line-height: 1.6; color: #6f86a6; margin-top: 4px; }
.s3d-gate-btn {
  display: block; width: 100%; margin-top: 15px; cursor: pointer;
  background: var(--warn); color: #1a1102; border: none; border-radius: 8px;
  padding: 12px 14px; font: 800 14px inherit; font-family: inherit;
}
.s3d-gate-btn:hover { filter: brightness(1.08); }
.s3d-gate-back {
  margin-top: 12px; background: none; border: none; cursor: pointer;
  color: var(--dim); font-size: 12px; font-family: inherit; text-decoration: underline;
}
.s3d-gate-back:hover { color: var(--accent); }
.s3d-gate-x {
  position: absolute; top: 6px; right: 8px; z-index: 2;
  background: none; border: none; cursor: pointer; line-height: 1;
  color: var(--dim); font-size: 22px; font-family: inherit; padding: 2px 6px;
}
.s3d-gate-x:hover { color: var(--txt); }
/* A short 3D stage (or a phone) can be shorter than the card — cap the card
   to the host and let it scroll from its own top, so the 🔒 heading is never
   the part that gets cut off. */
.s3d-gate-lock .s3d-gate-card, .pro-modal .s3d-gate-card { max-height: 100%; overflow: auto; }

/* ---- the payment block inside the Pro card (tier.js payBlockHtml) ----
   Price, the four wallets, the account name + phone the buyer sends money to,
   and the "then DM the screenshot" step. Kept tight on purpose: on a phone
   this sits over the 3D scene it is advertising and must not swallow it. */
.pro-pay {
  margin-top: 11px; text-align: left; border-radius: 8px; padding: 9px 11px;
  background: rgba(255,198,62,.07); border: 1px solid rgba(255,198,62,.3);
}
.pro-pay-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pro-pay-price b { font: 800 18px var(--mono); color: var(--warn); letter-spacing: .01em; }
.pro-pay-price span { font-size: 10.5px; line-height: 1.45; color: #9db4d0; }
.pro-pay-wallets { margin-top: 6px; font: 11.5px var(--mono); line-height: 1.5; color: #cfe0f5; }
.pro-pay-acct {
  margin-top: 3px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pro-pay-acct b { font-size: 11.5px; font-weight: 700; color: var(--txt); }
.pro-pay-acct span { font: 800 14px var(--mono); color: #fff2cf; letter-spacing: .04em; }
.pro-pay-step {
  margin-top: 7px; padding-top: 6px; font-size: 11.5px; line-height: 1.6; color: #a8c0dc;
  border-top: 1px dashed rgba(255,198,62,.28);
}
.pro-pay-step2 { margin-top: 3px; font-size: 10.5px; line-height: 1.55; color: #7f9bc0; }
.pro-pay-step b, .pro-pay-step2 b { color: var(--accent); font-weight: 700; }

/* ---- INSTRUCTOR SCREEN, FREE TIER (ui.js buildInstructor + tier.js) --------
   The whole console stays visible — that is the advertisement — with one
   showcase injection live. This banner says so, in both languages, and the one
   working check-box is picked out so it cannot be missed. */
.instr-demo {
  display: flex; align-items: center; gap: 14px;
  border-color: #7a5c1e !important;
}
.instr-demo .id-badge {
  flex: 0 0 auto; align-self: flex-start;
  font: 800 11px var(--mono); letter-spacing: .12em; color: #1a1102;
  background: var(--warn); border-radius: 5px; padding: 4px 9px;
}
.instr-demo .id-ttl { font-size: 14px; font-weight: 800; }
.instr-demo .id-ttl2 { font-size: 12px; font-weight: 600; color: #8fd0a8; margin-top: 2px; }
.instr-demo .id-sub { font-size: 12px; line-height: 1.6; color: var(--dim); margin-top: 6px; }
.instr-demo .id-sub2 { font-size: 11.5px; line-height: 1.6; color: #6f86a6; margin-top: 3px; }
.instr-demo .id-sub b, .instr-demo .id-sub2 b { color: var(--warn); }
.instr-demo .btn { flex: 0 0 auto; }
/* the one injection a free user may actually fire */
label.fault.fault-demo {
  border-color: rgba(255,198,62,.55);
  background: rgba(255,198,62,.08);
}
label.fault.fault-demo > span:first-of-type::after {
  content: ' · FREE DEMO'; color: var(--warn); font-weight: 700; font-size: 10px;
}

/* ---- the same card as a modal over the learning screen (learn.js) ---- */
.pro-modal {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; padding: 16px; overflow: auto;
  background: rgba(6,11,19,.78);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

@media (max-width: 620px) {
  .s3d-gate-lock { padding: 8px; }
  .s3d-gate-card { padding: 13px 12px; }
  .s3d-gate-ttl { font-size: 13.5px; }
  .s3d-gate-ttl2 { font-size: 11px; }
  .s3d-gate-msg { font-size: 11.5px; margin-top: 7px; }
  /* The card is laid over the 3D it is advertising, so on a phone it drops
     the second-language copies of the long paragraphs — the heading, the
     button and the price block stay bilingual. */
  .s3d-gate-msg2, .pro-pay-step2 { display: none; }
  .s3d-gate-btn { margin-top: 11px; padding: 10px 12px; font-size: 13px; }
  .s3d-gate-back { margin-top: 9px; }
  .pro-pay { margin-top: 9px; padding: 7px 9px; }
  .pro-pay-price b { font-size: 16px; }
  .pro-pay-wallets { font-size: 10.5px; }
  .pro-pay-acct span { font-size: 13px; }
  .pro-pay-step { font-size: 11px; margin-top: 6px; padding-top: 5px; }
}
/* collapsible PART LIST — fly-to focus per part */
.s3d-parts { position: absolute; top: 50px; left: 10px; z-index: 7; width: 210px; max-width: 46%; background: rgba(10,20,36,.93); border: 1px solid #2e4463; border-radius: 7px; overflow: hidden; }
.s3d-parts-tab { display: block; width: 100%; text-align: left; background: #12233c; color: #9ecbff; border: none; font: 700 11px var(--mono); padding: 5px 9px; cursor: pointer; }
.s3d-parts.collapsed .s3d-parts-body { display: none; }
.s3d-parts.collapsed .s3d-parts-tab::after { content: ' \25B8'; float: right; }
.s3d-parts:not(.collapsed) .s3d-parts-tab::after { content: ' \25BE'; float: right; }
.s3d-parts-body { max-height: min(46vh, 360px); overflow-y: auto; padding: 4px; border-top: 1px solid #2e4463; }
.s3d-pg { font: 700 9px var(--mono); letter-spacing: .04em; color: #7f9bc0; text-transform: uppercase; padding: 6px 6px 2px; }
.s3d-pi { display: block; width: 100%; text-align: left; background: #0d1a2c; color: #c8d8ee; border: 1px solid #1e3350; border-radius: 5px; padding: 4px 7px; margin: 2px 0; cursor: pointer; font-size: 11px; line-height: 1.25; }
.s3d-pi:hover { background: #14314e; border-color: #3a5a86; }
.s3d-pi b { color: #ffd98a; font: 700 10px var(--mono); margin-right: 5px; }
.s3d-pi span { color: #8fb0d4; }
@media (max-width: 620px){ .s3d-parts { width: 168px; } .s3d-pi span { display: none; } }
/* LIVE PLANT LINK chrome — top-right of every 3D stage (2D untouched) */
.s3d-chrome { position: absolute; top: 6px; right: 8px; left: auto; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: min(70%, 460px); pointer-events: none; }
.s3d-row { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; }
.s3d-link { background: #10233c; color: var(--dim); border: 1px solid var(--line); border-radius: 6px; font: 700 11px var(--mono); padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.s3d-link.on { background: #123526; color: #46d17f; border-color: #1f6b45; }
.s3d-reset { background: #241326; color: #d79ad0; border: 1px solid #4a2e46; border-radius: 6px; font: 700 11px var(--mono); padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.s3d-badge { font: 700 10px var(--mono); letter-spacing: .06em; color: #8fb7e0; background: #0a1626; border: 1px solid #2e4463; border-radius: 4px; padding: 2px 7px; }
.s3d-badge.live { color: #46d17f; border-color: #1f6b45; background: #0a1c14; }
.s3d-explain { text-align: right; background: rgba(10,20,36,.86); border: 1px solid #22344e; border-radius: 6px; padding: 4px 8px; pointer-events: none; }
.s3d-explain .s3d-en { font: 11px var(--sans, sans-serif); color: #b9cbe4; line-height: 1.35; }
.s3d-explain .s3d-my { font: 11px var(--sans, sans-serif); color: #8fd0a8; line-height: 1.4; }
@media (max-width: 620px){ .s3d-chrome { max-width: 84%; } .s3d-explain .s3d-en, .s3d-explain .s3d-my { font-size: 10px; } }

/* ---- IMMERSIVE 3D — the stage takes the whole screen (phone-first) -------- */
/* While any stage is immersive, nothing behind it may scroll or peek out. */
html.s3d-imm-on, html.s3d-imm-on body { overflow: hidden; }
.s3d-imm {
  position: fixed !important; inset: 0 !important; z-index: 600;
  width: auto !important; height: auto !important;
  min-height: 0 !important; max-height: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: #05080e;
}
/* the two floating pills — big tap targets, out of the picture's way */
.s3d-immbtn, .s3d-fold {
  /* z above the Pro-gate lock (z 40): EXIT must stay reachable even when the
     preview expires mid-immersive, or the trainee is trapped in full screen */
  position: absolute; z-index: 45; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10, 22, 38, .92); color: #cfe0f5;
  border: 1px solid #33507a; border-radius: 999px;
  font: 700 11px var(--mono); padding: 6px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.s3d-immbtn { right: 8px; bottom: 8px; }
.s3d-fold { left: 8px; bottom: 8px; display: none; }        /* fold: immersive only */
.s3d-imm .s3d-fold { display: inline-flex; }
.s3d-imm .s3d-immbtn { top: 8px; right: 8px; bottom: auto; background: rgba(38, 14, 20, .92); color: #ffb3bd; border-color: #6b2a35; }
/* FOLDED: hide every overlay so only the machine remains */
.s3d-collapsed :is(.s3d-studyhdr, .s3d-chrome, .s3d-parts, .fo3d-hint, .s3d-bar-wrap, .fo3d-card, .e3d-views) { display: none !important; }
/* unfolded immersive: keep the study bar and parts clear of the pills */
.s3d-imm .s3d-bar-wrap { padding-right: 200px; box-sizing: border-box; }
.s3d-imm .s3d-parts { top: 128px; }
/* immersive on a scaled-down phone layout: bigger chrome, easy thumbs */
@media (pointer: coarse) {
  .s3d-imm .s3d-immbtn, .s3d-imm .s3d-fold { font-size: 15px; padding: 10px 16px; }
  .s3d-imm .s3d-link, .s3d-imm .s3d-reset { font-size: 14px; padding: 8px 14px; }
  .s3d-imm .s3d-badge { font-size: 13px; }
  .s3d-imm .s3d-explain .s3d-en, .s3d-imm .s3d-explain .s3d-my { font-size: 13px; }
  .s3d-imm .s3d-studyhdr { font-size: 13px; }
  .s3d-imm .s3d-parts-tab, .s3d-imm .s3d-pi { font-size: 13px; }
  .s3d-imm .fo3d-hint { font-size: 13px; top: auto; bottom: 52px; }
}

/* ===========================================================================
   iOS / TOUCH TAP HYGIENE
   ---------------------------------------------------------------------------
   Mobile Safari waits ~300 ms after a tap to see whether a second tap turns it
   into a double-tap-zoom, and only then synthesises mousedown/mouseup/click.
   `touch-action: manipulation` tells it there is no double-tap gesture here, so
   the click fires immediately — the machinery responds the instant the finger
   lifts instead of a third of a second later (or, on a panel that rebuilds
   itself, not at all).
   =========================================================================== */
button, .btn, .nav, .tw, .dev, .devbtn, .ack-btn, .back-btn, .fo-vbtn,
.e3d-sen, .e3d-view, .hv3d-act, .hv3d-spd, .hv3d-part, .s3d-link, .s3d-reset,
.s3d-parts-tab, .s3d-pi, .lic-activate, .fault, .fault-sec-hd, .eas-filter label,
select, summary, label, [role="button"],
input[type="checkbox"], input[type="radio"], input[type="button"] {
  touch-action: manipulation;   /* NB: range sliders excluded — they need the drag gesture */
}

/* Clickable mimic symbols (valves, pumps, breakers, 3-way cocks). They are
   plain <g>/<rect> nodes reached through a click handler, and iOS Safari is
   reluctant to route a synthesised click to an element that does not look
   interactive — so state the intent in CSS as well as in the SVG attribute,
   which also covers symbols rebuilt at runtime.
   NB: deliberately NOT [data-dev] — the engine-overview mimic sets those to
   `cursor: default` on purpose because they are read-only there. */
svg [data-vgroup], svg [data-vlv], svg [data-lov], svg [data-lo3w], svg [data-lvacb],
svg [data-olbr], svg [data-stgpump], svg [data-stgiso] {
  cursor: pointer;
  touch-action: manipulation;
}

/* No grey iOS flash box over a mimic symbol or a dark ECR button. */
button, .btn, .nav, .tw, .dev, .devbtn, .fo-vbtn,
svg [data-vgroup], svg [data-vlv], svg [data-lov], svg [data-lo3w], svg [data-lvacb],
svg [data-olbr], svg [data-stgpump], svg [data-stgiso], svg [data-dev] {
  -webkit-tap-highlight-color: transparent;
}

/* ===========================================================================
   PROCEDURE CARDS — the collapsible "📋 PROCEDURE" tag on machinery screens
   (js/procedures.js). Sits IN FLOW at the top of the screen so an open card
   pushes the mimic down instead of covering it; the body scrolls on its own.
   =========================================================================== */
.proc-wrap { margin: 0 0 8px; }
.proc-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel2); color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; touch-action: manipulation;
}
.proc-pill:hover { border-color: var(--accent); color: var(--txt); }
.proc-pill[aria-expanded="true"] { background: #16324a; border-color: var(--accent); color: var(--accent); }
.proc-pill-i { font-size: 13px; }
.proc-pill-c { font-size: 9px; opacity: .8; }
.proc-card {
  margin-top: 6px; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 8px;
}
.proc-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.proc-title { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--txt); }
.proc-x {
  background: none; border: 1px solid var(--line); color: var(--dim);
  border-radius: 6px; width: 26px; height: 24px; line-height: 1; font-size: 15px;
  cursor: pointer; touch-action: manipulation;
}
.proc-x:hover { border-color: var(--alarm); color: var(--alarm); }
.proc-body { max-height: 46vh; overflow-y: auto; padding: 8px 12px 10px; }
.proc-block + .proc-block { margin-top: 10px; }
.proc-h { margin: 0 0 4px; font-size: 11px; letter-spacing: .05em; font-weight: 700; }
.proc-h-start { color: var(--ok); }
.proc-h-stop { color: var(--warn); }
.proc-body ol { margin: 0; padding-left: 20px; }
.proc-body li { margin: 0 0 6px; }
.proc-l1 { display: block; font-size: 12.5px; line-height: 1.45; color: var(--txt); }
.proc-l2 { display: block; font-size: 11.5px; line-height: 1.5; color: var(--dim); margin-top: 1px; }
.proc-note {
  margin-top: 10px; padding: 7px 9px; font-size: 11.5px; line-height: 1.5;
  color: var(--warn); background: #2a2210; border: 1px solid #5b4a18; border-radius: 6px;
}
.proc-hint { margin-top: 8px; font-size: 10.5px; color: var(--dim); font-style: italic; }

/* ==========================================================================
   EXAM MODE  (js/exam.js)
   The assessment half of the learning screen: a picker shelf that reuses the
   lesson-card language, a non-blocking HUD that lives over every screen while
   an exam runs, the briefing / abort dialogs, the debrief, and the shareable
   certificate. Deliberately built from the same tokens as the tutor chrome so
   an exam never looks like a different app.
   ========================================================================== */

/* ---- picker ---- */
.exam-intro h3 { margin-bottom: 6px; }
.lc-badge.lb-exam { color: #ff9f6b; border-color: rgba(255,159,107,.4); background: rgba(255,159,107,.10); font-weight: 800; }
.lc-badge.xb-best { color: #cfe0f4; border-color: var(--line); background: #0e1622; font-family: var(--mono); }
.lc-badge.xb-best.g-dist { color: var(--accent); border-color: rgba(56,182,255,.45); }
.lc-badge.xb-best.g-meri { color: var(--ok); border-color: rgba(52,209,123,.45); }
.lc-badge.xb-best.g-pass { color: var(--warn); border-color: rgba(255,198,62,.45); }
.exam-sec { border-color: #5a3a1e; }
.exam-sec .ls-icon { background: rgba(255,159,107,.12); }
.exam-card { border-color: #3a2a1c; }
.exam-card:not(.locked) { background: #0c1119; }

/* ---- HUD: small, fixed, present on every screen while an exam runs ---- */
#exam-hud {
  position: fixed; left: 50%; transform: translateX(-50%); top: 8px;
  width: 620px; max-width: calc(100vw - 24px);
  background: linear-gradient(180deg, #16202e, #0d1520);
  border: 1px solid #7a5c1e; border-radius: 10px; z-index: 2400;
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,198,62,.12);
  overflow: hidden; pointer-events: auto;
}
#exam-hud .xh-head { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
#exam-hud .xh-tag {
  background: var(--warn); color: #2a1f00; font-weight: 800; font-size: 10.5px;
  border-radius: 9px; padding: 2px 8px; white-space: nowrap;
}
#exam-hud .xh-ttl { font-weight: 700; font-size: 12.5px; flex: 1; line-height: 1.35; }
#exam-hud .xh-clock {
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ok);
  background: #0a0f16; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
}
#exam-hud .xh-clock.over { color: var(--warn); border-color: rgba(255,198,62,.4); }
#exam-hud .xh-clock.urgent { color: var(--alarm); border-color: rgba(255,77,94,.5); }
#exam-hud .xh-abort {
  background: #3a1418; border: 1px solid #6b2630; color: #ff9aa5;
  border-radius: 5px; padding: 3px 10px; cursor: pointer; font-size: 11px; font-weight: 700;
}
#exam-hud .xh-abort:hover { background: #52191f; color: #ffc2c9; }
#exam-hud .xh-bar { height: 3px; background: #0a0f16; }
#exam-hud .xh-fill { height: 100%; width: 0; background: var(--ok); transition: width .25s linear; }
#exam-hud .xh-fill.over { background: var(--warn); }
#exam-hud .xh-objs { list-style: none; margin: 0; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 3px; }
#exam-hud .xh-obj { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--dim); line-height: 1.45; }
#exam-hud .xh-tick { width: 14px; flex: 0 0 14px; text-align: center; color: var(--dim); }
#exam-hud .xh-txt { flex: 1; }
#exam-hud .xh-at { font-family: var(--mono); font-size: 10.5px; color: var(--ok); }
#exam-hud .xh-obj.done { color: var(--ok); }
#exam-hud .xh-obj.done .xh-tick { color: var(--ok); }
/* ---- HUD: draggable by its head, collapsible to a slim pill ---- */
#exam-hud .xh-head {
  cursor: move; touch-action: none; -webkit-user-select: none; user-select: none;
}
#exam-hud.dragging { opacity: .94; cursor: grabbing; }
#exam-hud .xh-min { padding: 1px 8px; font-size: 12px; line-height: 1.4; }
#exam-hud.minimized {
  width: auto; min-width: 210px; max-width: calc(100vw - 24px);
}
#exam-hud.minimized .xh-bar,
#exam-hud.minimized .xh-objs,
#exam-hud.minimized .xh-pen,
#exam-hud.minimized .xh-abort { display: none; }
#exam-hud.minimized .xh-ttl {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
#exam-hud .xh-pen { display: none; }
#exam-hud .xh-pen.on {
  display: block; padding: 5px 10px 7px; font-size: 11px; font-weight: 700;
  color: var(--alarm); border-top: 1px solid var(--line); background: rgba(255,77,94,.06);
}

/* ---- briefing / abort dialog ---- */
.exam-modal {
  position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto; background: rgba(6,11,19,.8);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.exam-brief {
  width: 720px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16202e, #0c141f);
  border: 1px solid #7a5c1e; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
}
.exam-brief.xb-small { width: 460px; }
.xb-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255,198,62,.06); }
.xb-tag { background: var(--warn); color: #2a1f00; font-weight: 800; font-size: 11px; border-radius: 10px; padding: 3px 10px; white-space: nowrap; }
.xb-tag.alarm { background: var(--alarm); color: #2a0006; }
.xb-ttl { font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.xb-body { padding: 14px 18px; overflow-y: auto; font-size: 13.5px; line-height: 1.75; }
.xb-body h4 { font-size: 11px; letter-spacing: 1.2px; color: var(--warn); margin: 14px 0 6px; font-weight: 800; }
.xb-body h4:first-child { margin-top: 0; }
.xb-body p { color: var(--txt); }
.xb-objs, .xb-rules { margin: 0; padding-left: 20px; color: var(--txt); }
.xb-objs li, .xb-rules li { margin-bottom: 5px; }
.xb-rules li { color: var(--dim); }
.xb-times { display: flex; gap: 20px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
.xb-times b { color: var(--txt); }
.xb-btns { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.xb-btns .btn { flex: 1; padding: 10px 8px; font-size: 13px; }

/* ---- debrief ---- */
.exam-debrief-wrap {
  position: fixed; inset: 0; z-index: 3300; display: flex; align-items: flex-start; justify-content: center;
  padding: 16px; overflow: auto; background: rgba(6,11,19,.85);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.exam-debrief {
  width: 760px; max-width: 100%;
  background: linear-gradient(180deg, #16202e, #0b1119);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
}
.xd-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.xd-banner { padding: 8px 16px; background: rgba(255,77,94,.12); color: #ff9aa5; font-weight: 700; font-size: 12.5px; border-bottom: 1px solid rgba(255,77,94,.25); }
.xd-banner.marpol { background: rgba(255,77,94,.18); line-height: 1.6; font-weight: 600; }
.xd-grade { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.xd-gname { font-size: 34px; font-weight: 800; letter-spacing: 3px; line-height: 1.1; }
.xd-gname i { display: block; font-size: 13px; letter-spacing: 0; font-style: normal; color: var(--dim); font-weight: 600; margin-top: 3px; }
.xd-gscore { font-family: var(--mono); text-align: right; }
.xd-gscore b { font-size: 40px; font-weight: 800; }
.xd-gscore span { color: var(--dim); font-size: 14px; margin-left: 5px; }
.xd-grade.g-dist { background: rgba(56,182,255,.07); }
.xd-grade.g-dist .xd-gname, .xd-grade.g-dist .xd-gscore b { color: var(--accent); }
.xd-grade.g-merit { background: rgba(52,209,123,.07); }
.xd-grade.g-merit .xd-gname, .xd-grade.g-merit .xd-gscore b { color: var(--ok); }
.xd-grade.g-pass { background: rgba(255,198,62,.07); }
.xd-grade.g-pass .xd-gname, .xd-grade.g-pass .xd-gscore b { color: var(--warn); }
.xd-grade.g-fail { background: rgba(255,77,94,.07); }
.xd-grade.g-fail .xd-gname, .xd-grade.g-fail .xd-gscore b { color: var(--alarm); }
.xd-sect { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.xd-sect h4 { font-size: 11px; letter-spacing: 1.2px; color: var(--dim); margin-bottom: 8px; font-weight: 800; }
.xd-line { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 12.5px; line-height: 1.6; }
.xd-ic { width: 16px; flex: 0 0 16px; text-align: center; color: var(--dim); }
.xd-tx { flex: 1; }
.xd-when { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.xd-pt { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.xd-line.ok .xd-ic, .xd-line.ok .xd-pt { color: var(--ok); }
.xd-line.miss .xd-ic, .xd-line.miss .xd-pt { color: var(--alarm); }
.xd-line.miss .xd-tx { color: var(--dim); }
.xd-line.bad .xd-ic, .xd-line.bad .xd-pt { color: var(--alarm); }
.xd-none { color: var(--ok); font-size: 12.5px; }
.xd-btns { display: flex; gap: 10px; padding: 12px 16px; }
.xd-btns .btn { flex: 1; padding: 10px 8px; font-size: 13px; }

/* ---- certificate (a real canvas, shown full-screen and downloadable) ---- */
.exam-cert-wrap {
  position: fixed; inset: 0; z-index: 3400; display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto; background: rgba(4,8,14,.92);
}
.exam-cert { display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.xc-canvas { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 70px rgba(0,0,0,.8); }
.xc-canvas canvas { display: block; width: 100%; height: auto; max-width: 1200px; }
.xc-btns { display: flex; align-items: center; gap: 10px; }
.xc-hint { flex: 1; color: var(--dim); font-size: 11.5px; }

@media (max-width: 900px) {
  #exam-hud { width: calc(100vw - 16px); }
  #exam-hud .xh-ttl { display: none; }
  .xd-gname { font-size: 26px; }
  .xd-gscore b { font-size: 32px; }
}

/* ---- 5 kV insulation test (ui-hv.js): the leakage current crawling through
   the insulation. The dash march is driven by an inline animation-duration —
   the worse the insulation, the faster and angrier it runs. ---- */
@keyframes meg-crawl { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -22; } }
.meg-leak { pointer-events: none; }

/* ============================================================================
   CoC EXAM PREP — the ETO question bank (js/coc.js).

   Two pieces: the card that sits in the LEARNING screen (it borrows
   .learn-sec / .lesson-card wholesale, so only the progress bar is new), and
   the full-screen overlay that card opens. The overlay is a fixed header with
   the ✕ over a single scrolling column — the phone is the primary device, so
   the column is capped, every tap target is finger-sized, and nothing relies
   on hover. It sits BELOW .pro-modal (3000) on purpose: a locked question
   raises the shared Pro card on top of it.
   ========================================================================= */
.lc-badge.lb-coc { color: #7ee0c0; border-color: rgba(126,224,192,.4); background: rgba(126,224,192,.10); font-weight: 800; }
.coc-prog { display: flex; flex-direction: column; gap: 5px; }
.coc-prog-tx { font-size: 11.5px; color: var(--dim); font-family: var(--mono); }
.coc-bar { height: 6px; background: #0a1220; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.coc-bar i { display: block; height: 100%; background: var(--ok); border-radius: 3px; transition: width .25s; }

/* ---- the overlay ---- */
.coc-ov {
  position: fixed; inset: 0; z-index: 2900; display: flex; flex-direction: column;
  background: var(--bg);
}
.coc-hd {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #16202e, #101827);
}
.coc-hd-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.coc-hd-ttl { font-size: 14.5px; font-weight: 800; letter-spacing: .4px; }
.coc-hd-sub { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.coc-back, .coc-x {
  flex: 0 0 auto; min-width: 40px; min-height: 40px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 8px; font-size: 17px; line-height: 1;
}
.coc-back:hover, .coc-x:hover { border-color: var(--accent); }
.coc-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.coc-wrap { width: 720px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* ---- the two tickets (ETO / ENGINEER), at the very top of the areas view.
   Two tabs side by side on a phone and nothing narrower than that: each is a
   whole card — icon + name on one line, the STCW reference under it, then the
   track's own done/total and its bar — so the choice reads as two products,
   not as a filter chip. ---- */
.coc-tracks { display: flex; gap: 8px; }
.coc-track {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  text-align: left; background: #0a0f16; border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px; cursor: pointer; color: var(--dim);
  font-family: inherit;
}
.coc-track:hover { border-color: var(--accent); }
.coc-track.on {
  color: var(--txt); border-color: var(--accent); background: rgba(56,182,255,.09);
  box-shadow: inset 0 0 0 1px rgba(56,182,255,.25);
}
.coc-tk-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.coc-tk-ic { flex: 0 0 auto; font-size: 19px; line-height: 1; }
.coc-tk-name {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 800; letter-spacing: .4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coc-tk-sub { font-size: 10.5px; color: var(--dim); line-height: 1.4; }
.coc-tk-prog { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.coc-track .coc-bar { width: 100%; }

/* ---- area list ---- */
.coc-sect-ttl { font-size: 11px; letter-spacing: 2px; color: var(--dim); font-weight: 800; }
.coc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.coc-chip {
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  border-radius: 20px; padding: 8px 13px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; min-height: 36px;
}
.coc-chip.on { background: var(--accent); border-color: var(--accent); color: #04141f; }
.coc-areas { display: flex; flex-direction: column; gap: 8px; }
.coc-area {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #0a0f16; border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 12px; cursor: pointer; color: var(--txt); font-family: inherit;
}
.coc-area:hover { border-color: var(--accent); }
.coc-area.on { border-color: var(--accent); background: rgba(56,182,255,.07); }
.coc-area.locked { background: #0a0d12; border-color: #262e3a; }
.coc-a-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; font-size: 19px;
  background: rgba(56,182,255,.1); border: 1px solid rgba(56,182,255,.25);
  display: flex; align-items: center; justify-content: center;
}
.coc-a-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.coc-a-name { font-size: 14px; font-weight: 800; line-height: 1.4; }
.coc-a-name2 { font-size: 11px; color: var(--dim); line-height: 1.4; }
.coc-a-sub { font-size: 11px; color: var(--dim); font-family: var(--mono); }
.coc-area .coc-bar { width: 100%; }
.coc-start { width: 100%; padding: 13px 10px; font-size: 14px; }
.coc-empty { color: var(--dim); font-size: 13px; padding: 10px 2px; }

/* ---- question rows (the drill-down list of one area) ---- */
.coc-rows { display: flex; flex-direction: column; gap: 6px; }
.coc-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 11px; cursor: pointer; color: var(--txt); font-family: inherit;
  min-height: 44px;
}
.coc-row:hover { border-color: var(--accent); }
.coc-row.locked { background: #0a0d12; border-color: #262e3a; color: var(--dim); }
.coc-r-n { flex: 0 0 auto; width: 30px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.coc-r-tx { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.coc-r-st { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--dim); white-space: nowrap; }
.coc-row.right .coc-r-st { color: var(--ok); }
.coc-row.wrong .coc-r-st { color: var(--alarm); }

/* ---- the question player ---- */
.coc-q { display: flex; flex-direction: column; gap: 12px; }
.coc-q-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.coc-q-pos { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 700; }
.coc-q-area { font-size: 12px; color: var(--dim); }
.coc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.coc-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .6px; line-height: 1;
  border-radius: 4px; padding: 4px 7px; border: 1px solid var(--line); color: var(--dim);
}
.coc-badge.b-mcq { color: #6fc3ff; border-color: rgba(111,195,255,.35); background: rgba(56,182,255,.08); }
.coc-badge.b-oral { color: #ff9f6b; border-color: rgba(255,159,107,.4); background: rgba(255,159,107,.10); }
.coc-badge.b-oow { color: var(--dim); background: var(--panel2); }
.coc-badge.b-mgmt { color: #ffd97a; border-color: #7a5c1e; background: #4a3a10; }
.coc-badge.b-tag { color: #b48cff; border-color: rgba(180,140,255,.35); background: rgba(180,140,255,.09); }
.coc-badge.b-right { color: var(--ok); border-color: rgba(52,209,123,.4); background: rgba(52,209,123,.09); }
.coc-badge.b-wrong { color: var(--alarm); border-color: rgba(255,77,94,.4); background: rgba(255,77,94,.09); }
.coc-q-tx { font-size: 15.5px; font-weight: 700; line-height: 1.75; }

/* MCQ options — A-D, finger-sized, frozen once answered */
.coc-opts { display: flex; flex-direction: column; gap: 8px; }
.coc-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; cursor: pointer; color: var(--txt); font-family: inherit; min-height: 48px;
}
.coc-opt:hover { border-color: var(--accent); }
.coc-opt:disabled { cursor: default; opacity: 1; }
.coc-opt-k {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 5px; font-size: 12px; font-weight: 800;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  display: flex; align-items: center; justify-content: center;
}
.coc-opt-tx { flex: 1 1 auto; font-size: 13.5px; line-height: 1.65; }
.coc-opt.right { border-color: var(--ok); background: rgba(52,209,123,.10); }
.coc-opt.right .coc-opt-k { background: var(--ok); border-color: var(--ok); color: #06280f; }
.coc-opt.wrong { border-color: var(--alarm); background: rgba(255,77,94,.10); }
.coc-opt.wrong .coc-opt-k { background: var(--alarm); border-color: var(--alarm); color: #fff; }
.coc-opt.dim { opacity: .55; }

/* the explanation, and the model answer an examiner is listening for */
.coc-why, .coc-model {
  background: #0a0f16; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 12px;
}
.coc-why.right { border-left-color: var(--ok); }
.coc-why.wrong { border-left-color: var(--alarm); }
.coc-why-h, .coc-model-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; color: var(--dim); margin-bottom: 8px;
}
.coc-model-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.coc-model-h .btn { padding: 7px 12px; font-size: 12px; }
.coc-why-tx, .coc-model-tx { font-size: 13.5px; line-height: 1.8; }
.coc-mark { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coc-mark-q { font-size: 12px; color: var(--dim); flex: 1 1 100%; }
.coc-mark .btn { flex: 1 1 40%; padding: 12px 8px; }
.coc-show { width: 100%; padding: 12px 10px; }
.coc-src { font-size: 11px; color: var(--dim); font-family: var(--mono); line-height: 1.6; }
.coc-nav { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.coc-nav .btn { flex: 1 1 0; padding: 12px 8px; }
.coc-nav-pos { flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* the jump target on a machinery screen, flashed by the SHOW ME IN THE APP button */
.coc-flash {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px;
  animation: cocflash 1.25s ease-in-out 2; position: relative; z-index: 5;
}
@keyframes cocflash {
  0%, 100% { outline-color: var(--accent); box-shadow: 0 0 0 0 rgba(56,182,255,.55); }
  50% { outline-color: #d6efff; box-shadow: 0 0 24px 6px rgba(56,182,255,.35); }
}

@media (max-width: 620px) {
  .coc-body { padding: 10px; }
  .coc-hd-ttl { font-size: 13px; }
  .coc-q-tx { font-size: 15px; }
  .coc-a-ic { width: 34px; height: 34px; font-size: 17px; }
  .coc-tracks { gap: 6px; }
  .coc-track { padding: 10px; }
  .coc-tk-name { font-size: 13px; }
  .coc-tk-sub { font-size: 10px; }
}

/* ============================================================================
   LEARNING SCREEN TABS — LECTURES · CHALLENGE · EXAMS · CoC PREP.
   One learning mode on screen at a time (the screen used to stack all four).
   ========================================================================= */
.learn-tabs {
  display: flex; gap: 6px; margin: 2px 0 12px; flex-wrap: wrap;
}
.lt-tab {
  flex: 1 1 0; min-width: 120px; padding: 10px 8px;
  background: var(--panel, #16202b); color: var(--dim, #8aa0b4);
  border: 1px solid var(--line, #2b3a4a); border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .3px;
  cursor: pointer; text-align: center; white-space: nowrap;
}
.lt-tab.on {
  color: var(--fg, #dce8f2);
  border-color: var(--accent, #38bdf8);
  box-shadow: inset 0 -2px 0 var(--accent, #38bdf8);
  background: color-mix(in srgb, var(--accent, #38bdf8) 10%, var(--panel, #16202b));
}
.learn-pane.hidden { display: none; }
@media (max-width: 640px) {
  .lt-tab { min-width: 46%; font-size: 12px; padding: 9px 4px; }
}

/* ALARM ROWS NAVIGATE — a tap takes you to the fault's own screen. No help
   text anywhere by design: the cursor and the hover are the whole affordance. */
#al-body tr, #al-hbody tr { cursor: pointer; }
#al-body tr:hover td, #al-hbody tr:hover td { filter: brightness(1.25); }

/* the blink that answers "where do I look?" — works on HTML and SVG alike:
   opacity carries the pulse everywhere, the outline sharpens it where the
   target is an HTML box */
.alarm-locate { animation: alarmloc .55s ease-in-out 7; outline: 2px solid var(--alarm, #ff4d5e); outline-offset: 2px; }
@keyframes alarmloc { 50% { opacity: .12 } }

/* --- ECS floating info card: what you clicked, without scrolling --------- */
.ecs-pop {
  position: absolute; top: 96px; right: 18px; z-index: 40;
  width: min(400px, 46%);
  max-height: 46vh; overflow-y: auto;
  background: rgba(11, 22, 38, .96);
  border: 1px solid #2e4463; border-radius: 10px;
  padding: 10px 12px 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  font-size: 12px; line-height: 1.55;
}
.ecs-pop .e3d-loc { margin-top: 6px; }
.ecs-pop-x {
  float: right; margin: -2px -4px 4px 8px;
  background: none; border: 1px solid #2e4463; border-radius: 6px;
  color: var(--dim, #7b93b4); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 4px 7px;
}
.ecs-pop-x:hover { color: #fff; border-color: #45e0e0; }
@media (max-width: 700px) {
  .ecs-pop { width: calc(100% - 28px); right: 14px; top: 120px; max-height: 38vh; }
}

/* --- HVSB one-line: board zones, busbar weight, live chips ---------------- */
.hv2-zone { fill: rgba(56, 118, 171, .055); stroke: #24405c; stroke-width: 1; }
.hv2-zonelbl { font-size: 10px; fill: #557799; letter-spacing: .12em; }
.hv2-buslbl { font-size: 12px; fill: #8fb8d8; font-weight: 600; letter-spacing: .05em; }
.hv2-buscore { stroke: rgba(230, 240, 255, .28); stroke-width: 1.1; fill: none; pointer-events: none; }
.pipe.hv2-bus { stroke-width: 7; }
.hv2-chip rect { fill: rgba(11, 22, 38, .92); stroke: #2e4463; }
.hv2-chiptxt { font-family: var(--mono, Consolas, monospace); font-size: 10.5px; fill: #9fdcff; }
.hv2-sm { font-size: 8.5px; fill: #6d87a8; }
.pipe.hv2-bus { stroke-dasharray: none !important; }