/* Backfill Sim — Factorio-leaning technical diorama. Dark blues/greys, safety accents. */
:root {
  --bg: #0b131b;
  --panel: #131f2a;
  --panel2: #182632;
  --line: #294153;
  --text: #d8e4ee;
  --muted: #8aa0b3;
  --accent: #ffb020;    /* safety amber */
  --green: #39d98a;
  --amber: #ffb020;
  --red: #ff5a5a;
  --blue: #4aa8ff;
  --paste: #b5822f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
}
#app {
  display: grid;
  grid-template-rows: 52px 1fr;
  grid-template-columns: 1fr 400px;
  grid-template-areas: "top top" "stage panel";
  height: 100vh;
}

/* top bar */
#topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 18px;
  padding: 0 16px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; letter-spacing: 1px; }
.brand span { color: var(--accent); }
.brand em { color: var(--muted); font-weight: 400; font-style: normal; font-size: 12px; }
.clock { display: flex; flex-direction: column; line-height: 1.1; }
.clock .muted { font-size: 11px; }
.speeds, .modeToggle, .screenToggle { display: flex; gap: 4px; }
.modeToggle { margin-left: auto; }
.screenToggle { margin-left: 6px; }

.btn {
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.btn:hover { border-color: var(--accent); }
.btn.on { background: var(--accent); color: #10202b; border-color: var(--accent); font-weight: 700; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn.primary { background: var(--green); color: #082018; border-color: var(--green); font-weight: 700; }
.btn.big { width: 100%; padding: 12px; margin-top: 12px; font-size: 15px; }
.btn.warn { background: #3a2a12; border-color: var(--amber); color: var(--amber); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); margin-top: 6px; }
.btn.danger { background: var(--red); border-color: var(--red); color: #2a0808; }

/* stage / section */
#stage { grid-area: stage; position: relative; padding: 16px; }
#section { width: 100%; height: 100%; }
.section-svg { width: 100%; height: 100%; }
.stageTitle {
  position: absolute; top: 20px; right: 28px;
  font-size: 18px; font-weight: 800; letter-spacing: 2px;
  color: var(--accent); text-shadow: 0 2px 8px #000;
  background: rgba(11,19,27,.7); padding: 4px 10px; border-radius: 6px;
}
.svg-label { font: 700 10px "Segoe UI", sans-serif; fill: var(--text); }
.svg-label.dim { fill: var(--muted); font-weight: 400; }
.svg-label.center { text-anchor: middle; }

/* paste flow animation */
.paste-flow { stroke: var(--paste); stroke-dasharray: 10 8; animation: flow 0.6s linear infinite; }
.paste-flow.slack { stroke-dasharray: 4 12; opacity: .6; }
.paste-idle { stroke: #3a4e5e; }
@keyframes flow { to { stroke-dashoffset: -18; } }

/* panel */
#panel {
  grid-area: panel; background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 16px; overflow-y: auto;
}
.card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.card h2 { margin: 6px 0; font-size: 18px; }
.card h3 { margin: 0 0 12px; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; }
.hint { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* briefing */
.briefing { text-align: left; }
.portrait { font-size: 40px; }
.portrait.small { font-size: 24px; }
.briefing .from { color: var(--accent); font-weight: 600; margin: 2px 0 10px; }
.briefing .body { color: var(--text); }
.targets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.targets div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.targets b { display: block; font-size: 18px; color: var(--accent); }
.targets span { font-size: 11px; color: var(--muted); }

/* sliders / fields */
.slider, .field { display: block; margin: 14px 0; }
.slider span, .field span { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.slider b { color: var(--accent); }
.slider small { color: var(--muted); font-size: 11px; }
input[type=range] { width: 100%; accent-color: var(--accent); }
select, input[type=number] {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px;
}
.row { display: flex; gap: 8px; margin-top: 10px; }
.row .btn { flex: 1; }

/* gauges */
.gauges { margin-top: 12px; }
.gaugeWrap { margin: 10px 0; }
.gaugeLabel { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.gaugeLabel b.good { color: var(--green); }
.gaugeLabel b.bad { color: var(--red); }
.gaugeTrack { position: relative; height: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.gaugeFill { height: 100%; transition: width .15s; }
.gaugeFill.good, .gaugeFill.green { background: var(--green); }
.gaugeFill.bad, .gaugeFill.red { background: var(--red); }
.gaugeFill.amber { background: var(--amber); }
.gaugeFill.blue { background: var(--blue); }
.gaugeTarget { position: absolute; top: -2px; width: 2px; height: 16px; background: #fff; }

.lightRow { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.lightRow b { margin-left: auto; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.dot.red { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* engineer table */
.engtable { width: 100%; border-collapse: collapse; margin-top: 8px; }
.engtable td { padding: 4px 6px; border-bottom: 1px solid var(--line); font-size: 12px; }
.engtable td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.engtable td.num.bad { color: var(--red); }
.engtable .unit { color: var(--muted); font-weight: 400; font-size: 10px; }

.warnbox { margin-top: 12px; background: #2a1a10; border: 1px solid var(--amber); border-radius: 8px; padding: 10px; font-size: 12px; color: #ffd79a; }
.warnbox.ok { background: #10241a; border-color: var(--green); color: #a9e9c8; }
.warnbox div { margin: 3px 0; }

/* checklist */
.checklist { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; }
.check.done { border-color: var(--green); }
.check input { margin-top: 2px; accent-color: var(--green); }

.pourNote { background: var(--panel); border: 1px dashed var(--line); border-radius: 8px; padding: 12px; margin: 14px 0; }
.pnHead { font-weight: 800; letter-spacing: 1px; color: var(--accent); margin-bottom: 8px; }
.pnRow { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.pnActions { display: flex; gap: 8px; margin-top: 10px; }
.pnActions .btn { flex: 1; }

/* pour hud */
.pourhud .subphase { font-size: 16px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.alarms { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.alarm { background: #2a1414; border-left: 3px solid var(--red); padding: 6px 8px; font-size: 11px; color: #ffb3b3; }

/* ucs rows */
.ucsRow { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; margin: 6px 0; background: var(--panel); border: 1px solid var(--line); }
.ucsRow b { font-size: 16px; }
.ucsRow.pass { border-color: var(--green); }
.ucsRow.fail { border-color: var(--red); }
.badge { margin-left: auto; font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.ucsRow.pass .badge { background: var(--green); color: #082018; }
.ucsRow.fail .badge { background: var(--red); color: #2a0808; }

/* scorecard */
.scorecard { display: flex; gap: 16px; align-items: center; }
.grade { font-size: 52px; font-weight: 900; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.grade-S { color: #ffd700; border: 3px solid #ffd700; }
.grade-A { color: var(--green); border: 3px solid var(--green); }
.grade-B { color: var(--blue); border: 3px solid var(--blue); }
.grade-C { color: var(--amber); border: 3px solid var(--amber); }
.grade-D { color: var(--red); border: 3px solid var(--red); }
.kpis { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.kpi span { display: block; font-size: 10px; color: var(--muted); }
.kpi b { font-size: 14px; }
.verdict { display: flex; gap: 12px; margin: 16px 0; background: var(--panel); border-radius: 8px; padding: 12px; }

.speeds.big { gap: 6px; margin: 12px 0; }
.speeds.big .btn { flex: 1; }

/* handbook tooltip */
.term { border-bottom: 1px dotted var(--accent); cursor: help; color: inherit; }
.tooltip { position: absolute; max-width: 280px; background: #05233a; color: #dff0ff; border: 1px solid var(--blue); border-radius: 8px; padding: 10px 12px; font-size: 12px; z-index: 100; pointer-events: none; box-shadow: 0 6px 24px #000a; }
.tooltip.hidden { display: none; }

/* ---- campaign: topbar mini meters ---- */
.mini { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.miniLabel { color: var(--muted); }
.miniTrack { width: 70px; height: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.miniFill { height: 100%; }
.miniFill.green { background: var(--green); } .miniFill.amber { background: var(--amber); } .miniFill.red { background: var(--red); }

/* ---- board ---- */
#panel { display: flex; flex-direction: column; gap: 12px; }
.boardCard { flex: 0 0 auto; }
.logCard { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.board { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.stopeRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-left-width: 3px; border-radius: 6px; }
.stopeRow.status-available { border-left-color: var(--accent); }
.stopeRow.status-curing { border-left-color: var(--paste); }
.stopeRow.status-handed-back { border-left-color: var(--green); }
.stopeRow.status-failed { border-left-color: var(--red); }
.stopeRow.status-filling { border-left-color: var(--blue); }
.stopeRow.status-scheduled { opacity: .65; }
.srMain b { font-size: 14px; }
.srMeta { display: block; font-size: 11px; color: var(--muted); }
.srRight { display: flex; align-items: center; gap: 8px; }
.btn.sm { padding: 5px 9px; font-size: 12px; }
.due { font-size: 11px; color: var(--muted); }
.due.soon { color: var(--amber); } .due.late, .due.fail { color: var(--red); font-weight: 700; } .due.pass { color: var(--green); font-weight: 700; }

.log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.logline { padding: 4px 8px; border-radius: 4px; border-left: 2px solid var(--line); background: var(--panel); }
.logline.mine { color: var(--muted); border-left-color: #3a5266; }
.logline.ops { color: var(--text); border-left-color: var(--blue); }
.logline.warn { color: #ffd79a; border-left-color: var(--amber); background: #241a10; }
.logline.event { color: #ffb3b3; border-left-color: var(--red); background: #241414; font-weight: 600; }
.logline.good { color: #a9e9c8; border-left-color: var(--green); background: #10241a; }

/* ---- modals ---- */
.modal-wrap { position: fixed; inset: 0; background: rgba(4,10,16,.72); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal-wrap.hidden { display: none; }
.modal { width: 560px; max-width: 92vw; background: var(--panel2); border: 1px solid var(--accent); border-radius: 12px; padding: 22px; box-shadow: 0 20px 60px #000b; }
.modal.event { border-color: var(--red); }
.modalHead { font-size: 16px; font-weight: 800; letter-spacing: 1px; color: var(--accent); margin-bottom: 10px; }
.modal.event .modalHead { color: var(--red); }
.modalBody { color: var(--text); margin: 0 0 16px; }
.options { display: flex; flex-direction: column; gap: 8px; }
.optBtn { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; cursor: pointer; color: var(--text); }
.optBtn:hover { border-color: var(--accent); }
.optBtn b { display: block; font-size: 14px; }
.optBtn span { font-size: 12px; color: var(--muted); }
.modal.review { width: 620px; }

/* ---- passcode gate ---- */
#app.locked { display: none; }
#gate { position: fixed; inset: 0; background: radial-gradient(ellipse at center, #12202c 0%, #070d13 100%); display: flex; align-items: center; justify-content: center; z-index: 500; }
.gateBox { width: 320px; max-width: 88vw; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 28px; text-align: center; box-shadow: 0 24px 70px #000b; }
.gateTitle { font-size: 24px; font-weight: 800; letter-spacing: 2px; }
.gateTitle span { color: var(--accent); }
.gateSub { color: var(--muted); font-size: 12px; margin: 4px 0 20px; }
#gateInput { width: 100%; text-align: center; letter-spacing: 2px; padding: 11px; margin-bottom: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
#gateInput:focus { outline: none; border-color: var(--accent); }
#gateBtn { width: 100%; padding: 11px; background: var(--green); color: #082018; border: none; border-radius: 8px; font-weight: 700; font-size: 15px; cursor: pointer; }
#gateBtn:hover { filter: brightness(1.08); }
.gateErr { color: var(--red); font-size: 12px; min-height: 16px; margin-top: 10px; }

/* ---- UDS editor ---- */
.lineCost { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin: 8px 0 2px; }
.lineCost b { color: var(--accent); font-size: 14px; }
.paste-flow.slow { animation-duration: 1.3s; opacity: .8; }
.hgl-line { filter: drop-shadow(0 0 2px rgba(180,220,255,.35)); }
#btnProceed[disabled] { background: var(--panel2); color: var(--muted); border-color: var(--line); }

/* ---- surface-plant builder screen ---- */
#plantScreen { grid-column: 1 / -1; grid-row: 2; display: none; }
#app.showPlant #stage, #app.showPlant #panel { display: none; }
#app.showPlant #plantScreen { display: grid; grid-template-columns: 1fr 360px; min-height: 0; }

.plantStage { position: relative; padding: 16px; min-width: 0; display: flex; }
.plantSvg { width: 100%; height: 100%; background: radial-gradient(ellipse at center, #10202c, #0a1119); border: 1px solid var(--line); border-radius: 10px; }
.plantPanel { background: var(--panel); border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

/* machines */
.machine .mBody { stroke: #2c3e4d; stroke-width: 2; transition: stroke .15s; cursor: pointer; }
.machine.st-running .mBody { stroke: var(--green); }
.machine.st-throttled .mBody { stroke: var(--amber); }
.machine.st-starved .mBody { stroke: var(--red); }
.machine.st-idle .mBody, .machine.st-off .mBody { stroke: #47606f; }
.machine.sel .mBody { stroke: #fff; stroke-width: 3; }
.mIcon { font-size: 22px; fill: #f2f7fb; pointer-events: none; }
.mLabel { font: 700 10px "Segoe UI", sans-serif; fill: #e6eef5; pointer-events: none; }
.mRate { font: 600 9px "Segoe UI", sans-serif; fill: #bfe9d3; pointer-events: none; }

/* ports */
.port { stroke: #0b131b; stroke-width: 2; cursor: pointer; }
.port:hover { stroke: #fff; }
.port.wired { stroke: #d8e4ee; }
.port.active { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 5px #fff); }
.port.target { stroke: var(--green); stroke-width: 3; filter: drop-shadow(0 0 6px var(--green)); }

/* pipes */
.pipe { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.pipe.flowing { opacity: 1; stroke-dasharray: 12 8; animation: flow .6s linear infinite; }
.pipe.sel { filter: drop-shadow(0 0 5px #fff); opacity: 1; }
.pipehit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }

/* overlay ghost + rubber-band */
.ghost { fill: rgba(255,255,255,.06); stroke-dasharray: 6 5; stroke-width: 2; }
.ghost.ok { stroke: var(--green); }
.ghost.bad { stroke: var(--red); }
.rubber { stroke: #fff; stroke-width: 2; stroke-dasharray: 5 5; opacity: .8; pointer-events: none; }

/* plant HUD + palette */
.plantHud { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.phBig { display: flex; justify-content: space-between; align-items: baseline; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.phBig.good { border-color: var(--green); }
.phBig span { font-size: 11px; color: var(--muted); }
.phBig b { font-size: 26px; font-weight: 800; color: var(--text); }
.phBig.good b { color: var(--green); }
.phBig em { font-size: 12px; font-style: normal; color: var(--muted); font-weight: 400; }
.phRow { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 2px; }
.palette { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.palItem { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--text); }
.palItem:hover { border-color: var(--accent); }
.palItem.on { border-color: var(--accent); background: #2a2413; }
.palItem[disabled] { opacity: .4; cursor: not-allowed; }
.palIcon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 7px; font-size: 18px; color: #f2f7fb; flex: 0 0 auto; }
.palText { display: flex; flex-direction: column; line-height: 1.2; }
.palText small { color: var(--muted); font-size: 11px; }

/* plant capacity link in the campaign */
.slider span b.cap, .field span b.cap { color: var(--muted); font-weight: 600; font-size: 11px; }
.plantStrip { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; padding: 10px 14px; }
.psInfo { display: flex; flex-direction: column; line-height: 1.2; }
.psInfo span { font-size: 11px; color: var(--muted); }
.psInfo b { font-size: 15px; color: var(--accent); }

/* ---- 3D surface world ---- */
#app.world-mode { display: block; position: fixed; inset: 0; grid-template: none; }
#renderCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.worldHud { position: absolute; inset: 0; pointer-events: none; z-index: 10; font: 14px/1.4 "Segoe UI", system-ui, sans-serif; color: var(--text); }
.whBrand { position: absolute; top: 16px; left: 18px; font-weight: 800; letter-spacing: 1px; font-size: 18px; text-shadow: 0 2px 8px #0008; }
.whBrand span { color: var(--accent); }
.whBrand em { color: #e8eef4; font-weight: 400; font-style: normal; font-size: 12px; opacity: .85; }
.whEcon { position: absolute; top: 14px; right: 18px; display: flex; gap: 10px; }
.whStat { background: rgba(11,19,27,.72); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; text-align: right; backdrop-filter: blur(3px); }
.whStat span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.whStat b { font-size: 16px; color: var(--accent); }
.whStat b.bad { color: var(--red); }
.whStatus { position: absolute; left: 50%; bottom: 138px; transform: translateX(-50%); background: rgba(11,19,27,.8); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; max-width: 480px; text-align: center; backdrop-filter: blur(3px); pointer-events: none; }
.whPalette { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; max-width: 92vw; gap: 8px; pointer-events: auto; padding: 8px; background: rgba(11,19,27,.62); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(4px); }
.palBtn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 8px 4px; cursor: pointer; }
.palBtn:hover { border-color: var(--accent); }
.palBtn.on { background: var(--accent); color: #10202b; border-color: var(--accent); }
.palBtn.poor { opacity: .45; }
.palI { font-size: 20px; line-height: 1; }
.palN { font-size: 11px; font-weight: 600; text-align: center; }
.palC { font-size: 10px; color: var(--muted); }
.palBtn.on .palC { color: #10202b; }
.whHint { position: absolute; right: 18px; bottom: 92px; font-size: 12px; color: #dfeaf3; background: rgba(11,19,27,.6); padding: 5px 10px; border-radius: 7px; backdrop-filter: blur(3px); }
.hidden { display: none !important; }

/* descend/ascend toggle */
.whMode { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); pointer-events: auto; background: var(--panel2); color: var(--text); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px #0007; }
.whMode:hover { background: var(--accent); color: #10202b; }

/* underground stope panel */
.whPanel { position: absolute; right: 18px; top: 70px; width: 300px; background: rgba(11,19,27,.86); border: 1px solid var(--line); border-radius: 12px; padding: 14px; pointer-events: auto; backdrop-filter: blur(4px); }
.panelHint { color: var(--muted); font-size: 13px; text-align: center; padding: 8px; }
.pHead { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 800; color: var(--accent); }
.pClose { cursor: pointer; color: var(--muted); font-size: 14px; }
.pClose:hover { color: var(--red); }
.pMeta { font-size: 12px; color: var(--muted); margin: 6px 0 12px; line-height: 1.5; }
.pMeta b { color: var(--text); }
.pRow { font-size: 13px; margin: 6px 0; }
.pRow.good { color: var(--green); font-weight: 700; }
.pBtn { display: block; width: 100%; text-align: left; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin: 6px 0; cursor: pointer; }
.pBtn:hover:not([disabled]) { border-color: var(--accent); }
.pBtn[disabled] { opacity: .45; cursor: not-allowed; }
.pBtn.primary { background: var(--green); color: #082018; border-color: var(--green); }
.pBtn b { display: block; font-size: 13px; }
.pBtn span { font-size: 11px; color: var(--muted); }
.pBtn.primary span { color: #0a3322; }
.pNote { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.4; }
.pRow.muted { color: var(--muted); }
.pLate { color: var(--red); font-weight: 700; }
.pBar { height: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; margin: 6px 0; }
.pBarFill { height: 100%; background: var(--accent); transition: width .1s; }
.pBarFill.cure, .pBarFill.green { background: var(--green); }
.pBarFill.amber { background: var(--amber); }
.pBarFill.red { background: var(--red); }
.pFlow { display: inline-flex; gap: 4px; }
.pMini { width: 26px; height: 24px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 5px; font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1; }
.pMini:hover { border-color: var(--accent); }
.pBtn.sm { display: inline-block; width: auto; padding: 4px 10px; margin: 0 0 0 auto; }
.plugDot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.plugDot.green { background: var(--green); } .plugDot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); } .plugDot.red { background: var(--red); box-shadow: 0 0 8px var(--red); }
.pSplit { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0; font-size: 13px; }

/* reticulation leg designer */
.segList { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.segRow { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.segRow.built { border-color: #2f5a45; }
.segMain { flex: 1; min-width: 0; line-height: 1.2; }
.segMain b { font-size: 12px; }
.segMain span { display: block; font-size: 10px; color: var(--muted); }
.segMini { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.segMini.cls { min-width: 58px; }
.segMini:hover:not([disabled]) { border-color: var(--accent); }
.segMini.on { background: var(--accent); color: #10202b; border-color: var(--accent); }
.segMini[disabled] { opacity: .55; cursor: default; }
.segChk { width: 14px; text-align: center; font-weight: 700; }
.segChk.ok { color: var(--green); } .segChk.bad { color: var(--red); }
/* HGL chart */
.hgl { width: 100%; height: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; display: block; }
.hglAxis { stroke: var(--line); stroke-width: 1; }
.hglRating { fill: none; stroke: #ff7a3a; stroke-width: 1.5; stroke-dasharray: 4 3; }
.hglLine { fill: none; stroke: var(--blue); stroke-width: 2; }
.hglLbl { fill: var(--muted); font: 8px "Segoe UI", sans-serif; }
/* fill-type picker + stope badges */
.badgePri { background: var(--accent); color: #10202b; font-weight: 800; font-size: 10px; padding: 1px 6px; border-radius: 4px; }
.badgeSec { background: var(--panel2); color: var(--muted); font-weight: 700; font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); }
.fillPick { display: flex; gap: 6px; margin: 8px 0 4px; }
.fillBtn { flex: 1; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 7px 4px; font-size: 12px; font-weight: 600; cursor: pointer; }
.fillBtn:hover { border-color: var(--accent); }
.fillBtn.on { background: var(--accent); color: #10202b; border-color: var(--accent); }
/* pre-pour sign-off checklist */
.chkList { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.chkBtn { text-align: left; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
.chkBtn:hover { border-color: var(--accent); }
.chkBtn.on { border-color: var(--green); color: #a9e9c8; }
/* intro / onboarding card */
.introCard { width: 620px; max-width: 92vw; background: var(--panel2); border: 1px solid var(--accent); border-radius: 14px; padding: 26px; box-shadow: 0 24px 70px #000b; }
.introCard .rsHead { color: var(--accent); margin-bottom: 14px; text-align: center; }
.introSteps { margin: 0 0 18px; padding-left: 22px; line-height: 1.7; color: var(--text); }
.introSteps li { margin: 6px 0; }
.introCard .pBtn { width: 220px; margin: 0 auto; text-align: center; }
.introCard .pBtn b { text-align: center; }

/* plant interior overlay */
.plantHud { position: absolute; inset: 0; pointer-events: none; z-index: 11; font: 14px/1.4 "Segoe UI", system-ui, sans-serif; color: var(--text); }
.phTop { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; pointer-events: auto; }
.phTop .whMode { position: static; transform: none; }
.phTitle { background: rgba(11,19,27,.72); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px; font-weight: 700; backdrop-filter: blur(3px); }
.phTitle b { color: var(--accent); } .phTitle b.good { color: var(--green); }
.phStatus { position: absolute; left: 50%; bottom: 138px; transform: translateX(-50%); background: rgba(11,19,27,.8); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; max-width: 480px; text-align: center; backdrop-filter: blur(3px); }
/* plant equipment detail panel */
.phDetail { position: absolute; right: 18px; top: 70px; width: 240px; background: rgba(11,19,27,.9); border: 1px solid var(--line); border-radius: 12px; padding: 14px; pointer-events: auto; backdrop-filter: blur(4px); }
.pdHead { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.pdRow { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; }
.pdRow.muted { color: var(--muted); }
.pdRow b.st-running { color: var(--green); } .pdRow b.st-starved { color: var(--red); } .pdRow b.st-throttled { color: var(--amber); }
.pdBtns { display: flex; gap: 6px; margin-top: 10px; }
.pdBtns .palBtn { flex: 1; flex-direction: row; justify-content: center; padding: 8px; font-size: 12px; }
.pdBtns .palBtn.danger { border-color: var(--red); color: #ffb3b3; }

/* lab panel */
.whLab.on { background: var(--accent); color: #10202b; }
.whLabPanel { position: absolute; left: 18px; top: 130px; width: 288px; background: rgba(11,19,27,.9); border: 1px solid var(--line); border-radius: 12px; padding: 14px; pointer-events: auto; backdrop-filter: blur(4px); }
.labSlider { display: block; margin: 12px 0 4px; }
.labSlider span { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.labSlider b { color: var(--accent); }
.labSlider input[type=range] { width: 100%; accent-color: var(--accent); }
.labRow { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.labRow span { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.labRow span.good { color: var(--green); } .labRow span.bad { color: var(--red); }
.labRow small { color: var(--muted); font-size: 11px; }
.labFor { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.labFor b { color: var(--accent); }
.labLight { margin-top: 10px; padding: 7px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.labLight.green { background: #10241a; color: #a9e9c8; border: 1px solid var(--green); }
.labLight.amber { background: #241a10; color: #ffd79a; border: 1px solid var(--amber); }
.labLight.red { background: #241414; color: #ffb3b3; border: 1px solid var(--red); }

/* live clock + schedule */
.whClock { position: absolute; top: 48px; left: 18px; display: flex; align-items: center; gap: 4px; }
.whDay { background: rgba(11,19,27,.72); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 14px; min-width: 62px; }
.whSpd { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: 12px; cursor: pointer; pointer-events: auto; }
.whSpd:hover { border-color: var(--accent); }
.whSpd.on { background: var(--accent); color: #10202b; border-color: var(--accent); font-weight: 700; }
.whSched { position: absolute; top: 84px; left: 18px; width: 250px; background: rgba(11,19,27,.6); padding: 7px 10px; border-radius: 8px; backdrop-filter: blur(3px); }
.schBar { height: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.schFill { height: 100%; background: var(--accent); }
.schCounts { font-size: 11px; color: #dbe6f0; margin-top: 5px; }
.schCounts span { color: var(--muted); margin-left: 4px; }
.whStat b.bad, .whCash.bad { color: var(--red); }
.binderStat { display: flex; flex-direction: column; align-items: flex-end; position: relative; padding-right: 30px; }
.binderTrack { width: 70px; height: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.binderFill { height: 100%; background: var(--green); transition: width .2s; }
.binderFill.amber { background: var(--amber); } .binderFill.red { background: var(--red); }

/* surface materials economy panel — feed stocks + TSF */
.whRes { position: absolute; top: 92px; right: 18px; width: 214px; display: flex; flex-direction: column; gap: 4px;
  background: rgba(11,19,27,.72); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; backdrop-filter: blur(3px); }
.resRow { display: flex; align-items: center; gap: 7px; }
.resL { flex: 0 0 62px; font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.resTrack { flex: 1; height: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.resFill { height: 100%; background: var(--green); transition: width .25s; }
.resFill.amber { background: var(--amber); } .resFill.red { background: var(--red); }
.resV { flex: 0 0 auto; font-size: 10px; color: var(--fg); min-width: 46px; text-align: right; }

/* build-objective banner — guides the player through standing up the operation */
.whObjective { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%);
  background: rgba(18,30,22,.86); border: 1px solid #2f6b45; border-left: 4px solid #39d98a; border-radius: 8px;
  padding: 8px 16px; max-width: 560px; text-align: center; backdrop-filter: blur(3px); pointer-events: none;
  font-size: 13px; color: #dff3e6; box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.whObjective b { color: #7be0a6; }
.whObjective .objStep { font-size: 10px; color: #8fb89e; text-transform: uppercase; letter-spacing: .6px; display: block; margin-bottom: 2px; }
.whTopup { position: absolute; right: 6px; top: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; font-size: 13px; cursor: pointer; pointer-events: auto; }
.whTopup:hover { border-color: var(--accent); }

/* board-review result modal */
.whResult { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(4,10,16,.8); pointer-events: auto; backdrop-filter: blur(4px); }
.rsHead { font-size: 16px; font-weight: 800; letter-spacing: 1px; color: var(--accent); }
.rsGrade { font-size: 72px; font-weight: 900; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 16px; }
.rsRows { display: flex; gap: 24px; }
.rsRows div { text-align: center; }
.rsRows span { display: block; font-size: 11px; color: var(--muted); }
.rsRows b { font-size: 20px; }
.whResult .pBtn { width: 200px; text-align: center; }
.whResult .pBtn b { text-align: center; }
/* event modal */
#whEvent { gap: 0; }
#whEvent .rsHead { color: var(--red); margin-bottom: 12px; }
.evBody { max-width: 540px; text-align: center; color: var(--text); margin: 0 0 18px; line-height: 1.5; }
.evOpts { display: flex; flex-direction: column; gap: 8px; width: 540px; max-width: 90vw; }
.optBtn { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; cursor: pointer; color: var(--text); pointer-events: auto; }
.optBtn:hover { border-color: var(--accent); }
.optBtn b { display: block; font-size: 14px; }
.optBtn span { font-size: 12px; color: var(--muted); }