*{box-sizing:border-box}:root{--g:#d6b158;--ok:#62a774;--warn:#d4a64c;--bad:#c95a52}
body{margin:0;background:radial-gradient(circle at 50% 0,#2b2113,#080a0d 38%);color:#eee9df;font-family:Arial,sans-serif}.hidden{display:none!important}button{font:inherit;cursor:pointer}
.topbar{height:62px;display:flex;justify-content:space-between;align-items:center;padding:0 max(14px,calc((100% - 1350px)/2));background:#090b0df4;border-bottom:1px solid #2d3135;position:sticky;top:0;z-index:20}.brand{display:flex;gap:10px;align-items:center}.brand a{color:var(--g);text-decoration:none;border:1px solid #55472e;padding:6px 8px;border-radius:6px;font-size:9px}.brand b{color:var(--g);letter-spacing:2px}.brand span,.stats{font-size:9px;color:#888}.stats b{color:#e4c77b}
main{max-width:1350px;margin:auto;padding:18px}.panel{background:linear-gradient(145deg,#16191d,#0e1013);border:1px solid #30343a;border-radius:12px;box-shadow:0 12px 35px #0005}
.intro{max-width:900px;margin:5vh auto;padding:42px;text-align:center}.intro small,.mission small,.targets small{color:var(--g);letter-spacing:1.5px;font-size:8px}.intro h1{font:46px Georgia;margin:8px}.intro p{color:#969b9f;line-height:1.6}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:20px 0}.level-card{background:#0b0e11;color:#ddd;border:1px solid #31363b;border-radius:8px;padding:12px;text-align:left}.level-card b,.level-card span{display:block}.level-card b{font:15px Georgia;color:#e0c27a}.level-card span{font-size:8px;color:#858b90;margin-top:5px}.level-card.active{border-color:var(--g);background:#19150f}.gold{background:linear-gradient(135deg,#ae8235,#efd18a)!important;color:#171109!important;border:0!important;font-weight:bold}.big{padding:12px 18px;border-radius:7px}
.mission{padding:14px 17px;display:flex;justify-content:space-between;align-items:center}.mission h2{font:24px Georgia;margin:4px 0}.mission p{margin:3px 0;color:#92979b}.mission-actions{display:flex;gap:7px}.mission-actions button,.bottom-actions button,.aux-buttons button,.unit button{background:#171b20;color:#bbb;border:1px solid #3c4248;padding:8px 10px;border-radius:6px}
.targets,.live{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px;padding:10px}.targets>div,.live>div{background:#090c0f;border:1px solid #2d3237;border-radius:8px;padding:9px}.targets b,.live b{display:block;color:#e2c57a;margin-top:4px}.live span{display:block;color:#73797e;font-size:7px;margin-top:4px}
.plant-panel{margin-top:10px;padding:12px}.alarm{text-align:center;padding:7px;border:1px solid #344a38;background:#0d140f;color:#7ca282;border-radius:6px;font-size:8px;letter-spacing:1.5px}.alarm.warn{background:#2b2413;border-color:#705a28;color:#e0b95c}.alarm.bad{background:#341312;border-color:#87332e;color:#ff8b82}
.plant{height:650px;position:relative;background:linear-gradient(#14181baa,#0c0f12dd),repeating-linear-gradient(0deg,transparent 0 39px,#242a2f 40px),repeating-linear-gradient(90deg,transparent 0 39px,#242a2f 40px);border:1px solid #343a40;border-radius:8px;overflow:hidden}.pipes{position:absolute;inset:0;width:100%;height:100%;z-index:1}.pipe{fill:none;stroke:#596168;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.pipeflow{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:16 18;opacity:0}.waterflow{stroke:#75c4e8}.steamflow{stroke:#eee7d8}.pipeflow.on{opacity:1;animation:flow 1s linear infinite}@keyframes flow{to{stroke-dashoffset:-68}}
.unit{position:absolute;z-index:3;text-align:center}.unit h3{font-size:8px;letter-spacing:1px;color:#9ca1a5;margin:0 0 6px}.feedtank{left:35px;top:355px;width:115px}.tank{height:180px;border:8px solid #59626a;border-top-width:12px;border-radius:8px 8px 18px 18px;background:#0e1418;position:relative;overflow:hidden}.water,.boiler-water{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#62a9cb,#275f7f);transition:.2s}.water{height:75%}.scale{position:absolute;right:4px;top:8px;bottom:8px;display:flex;flex-direction:column;justify-content:space-between;font-size:7px;color:#899097}
.feedpump{left:195px;top:385px;width:120px}.pump{width:80px;height:80px;border:8px solid #5b646c;border-radius:50%;margin:auto;background:#181d21;display:grid;place-items:center}.pump span{font-size:36px;color:#888}.pump.on span{animation:spin .8s linear infinite;color:#dab65d}@keyframes spin{to{transform:rotate(360deg)}}
.boilerunit{left:390px;top:185px;width:180px}.boiler{height:280px;border:10px solid #5a6269;border-radius:22px;background:#171b20;position:relative;overflow:hidden}.boiler-water{height:18%}.flame{position:absolute;left:0;right:0;bottom:18px;color:#ff7f32;font-size:20px;text-shadow:0 0 12px #ff5b00;animation:flicker .25s infinite alternate}@keyframes flicker{to{transform:scaleY(.8)}}.steam-cloud{position:absolute;left:25px;right:25px;top:10px;height:120px;opacity:0}.steam-cloud.on{opacity:1}.steam-cloud i{position:absolute;bottom:0;width:14px;height:14px;border-radius:50%;background:#eee7d866;animation:rise 2s infinite}.steam-cloud i:nth-child(2){left:25%;animation-delay:.4s}.steam-cloud i:nth-child(3){left:50%;animation-delay:.8s}.steam-cloud i:nth-child(4){left:75%;animation-delay:1.2s}.steam-cloud i:nth-child(5){left:90%;animation-delay:1.6s}@keyframes rise{to{transform:translateY(-95px) scale(1.7);opacity:0}}.readout{display:flex;justify-content:space-between;font-size:8px;color:#777;margin-top:5px}.readout b{color:#dfc174}
.turbineunit{left:690px;top:325px;width:160px}.turbine{height:105px;border:8px solid #586169;border-radius:60px;background:#161a1e;display:grid;place-items:center;position:relative}.fan{font-size:62px;color:#888}.turbine.on .fan{animation:spin .45s linear infinite;color:#d7b35b}.shaft{position:absolute;right:-55px;width:55px;height:16px;background:#656d74}
.condenserunit{right:125px;top:385px;width:145px}.condenser{height:110px;border:7px solid #566069;border-radius:10px;background:repeating-linear-gradient(90deg,#182026 0 8px,#2b343b 8px 12px);position:relative}.drops{position:absolute;inset:0;opacity:0}.condenser.on .drops{opacity:1}.drops i{position:absolute;top:8px;width:6px;height:12px;border-radius:50%;background:#79c5e7;animation:drop 1.5s infinite}.drops i:nth-child(2){left:45%;animation-delay:.5s}.drops i:nth-child(3){left:75%;animation-delay:1s}@keyframes drop{to{transform:translateY(80px);opacity:0}}
.generatorunit{right:25px;top:180px;width:130px}.generator{height:90px;border:7px solid #586169;border-radius:12px;background:#161a1e;display:grid;place-items:center;font-size:45px;color:#555}.generator.on{color:#f0cf5e;text-shadow:0 0 14px #f0cf5e}
.valve{position:absolute;z-index:5;width:60px;height:60px;background:transparent;border:0}.valve i,.valve i:before{content:"";position:absolute;background:#8a3430;border:2px solid #bd5d55}.valve i{width:48px;height:8px;left:6px;top:25px}.valve i:before{width:8px;height:48px;left:18px;top:-22px}.valve.open i{transform:rotate(45deg);background:#4b8258;border-color:#70aa7a}.valve.open i:before{background:#4b8258;border-color:#70aa7a}.valve span{position:absolute;top:54px;left:-8px;right:-8px;color:#aaa;font-size:7px}.vfill{left:325px;top:430px}.vsteam{left:610px;top:275px}.vbypass{left:610px;top:455px}.vrelief{left:500px;top:95px}
.gauge{position:absolute;z-index:4;text-align:center}.gauge>span{font-size:7px;color:#888}.dial{width:100px;height:100px;border:8px solid #596169;border-radius:50%;background:radial-gradient(circle,#ece7d8 0 58%,#aaa69b 59% 62%,#1c2024 63%);position:relative;color:#15181b}.needle{position:absolute;left:50px;top:48px;width:38px;height:3px;background:#b62d25;transform-origin:0 50%;transform:rotate(-135deg);transition:.2s}.dial b{position:absolute;left:0;right:0;bottom:20px;font-size:14px}.dial small{position:absolute;left:0;right:0;bottom:9px;font-size:7px}.gpressure{left:610px;top:65px}.gtemp{left:390px;top:55px}.goil{left:805px;top:70px}
.controls{margin-top:10px;padding:12px}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ctrl{background:#090c0f;border:1px solid #30353a;border-radius:8px;padding:9px}.ctrl label{display:flex;justify-content:space-between;font-size:9px}.ctrl b{color:#e2c57a}.ctrl input{width:100%;margin-top:8px;accent-color:#c9a552}.aux-buttons{display:flex;gap:7px;margin-top:9px}.guide{margin-top:10px;padding:12px}.guide h3{font:18px Georgia;margin:0 0 9px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.guide-grid article{background:#090c0f;border:1px solid #30353a;border-radius:8px;padding:9px}.guide-grid b{font-size:9px;color:#e1c379}.guide-grid p{font-size:8px;color:#858b90;line-height:1.45;margin:5px 0 0}.bottom-actions{margin-top:10px;padding:12px;display:flex;justify-content:flex-end;gap:8px}
.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:50}.modal>div{width:min(720px,94vw);max-height:80vh;overflow:auto;background:#15181c;border:1px solid #705b34;border-radius:12px;padding:24px}.modal h2{font:25px Georgia;color:#e4c57b}.modal .x{float:right;background:none;border:0;color:#aaa;font-size:22px}.modal-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modal-list button{background:#0b0e11;border:1px solid #30353a;color:#ddd;border-radius:8px;padding:10px;text-align:left}.modal-list b,.modal-list span{display:block}.modal-list b{color:#e2c57a}.modal-list span{font-size:8px;color:#888;margin-top:4px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#211c13;border:1px solid #806938;border-radius:7px;padding:10px 15px;opacity:0;transition:.2s;z-index:60}#toast.show{opacity:1}
@media(max-width:1000px){.level-grid{grid-template-columns:1fr 1fr}.plant-panel{overflow:auto}.plant{width:1200px}.targets,.live{grid-template-columns:1fr 1fr}.control-grid{grid-template-columns:1fr 1fr}.guide-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){main{padding:7px}.intro{padding:25px 15px}.level-grid,.targets,.live,.control-grid,.guide-grid,.modal-list{grid-template-columns:1fr}.mission{display:block}.mission-actions{margin-top:8px}.brand b{display:none}}

.vcool{left:575px;top:525px}
.ctrl small{display:block;color:#73797e;font-size:7px;margin-top:4px}

.ctrl strong{display:block;margin-top:7px;padding:6px;border-radius:5px;background:#15191d;color:#8e969c;font-size:7px;font-weight:normal}
.ctrl strong.active{background:#102116;color:#79bf87;border:1px solid #315d3b}
.ctrl strong.blocked{background:#281615;color:#dc7770;border:1px solid #67322f}
.ctrl.critical{border-color:#6c5932}
.quick-help{margin-top:10px;padding:12px}.quick-help h3{font:18px Georgia;margin:0 0 9px}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quick-grid>div{background:#090c0f;border:1px solid #30353a;border-radius:8px;padding:9px}.quick-grid b{display:block;color:#e1c379;font-size:9px;margin-bottom:5px}.quick-grid span{font-size:8px;line-height:1.45;color:#91979c}@media(max-width:800px){.quick-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.quick-grid{grid-template-columns:1fr}}

.vdrain{left:400px;top:535px}
.drainflow{stroke:#5aa8c9}

/* v3.0 - siker, megosztás, oklevél */
.success-box{width:min(780px,95vw)!important;text-align:center!important}
.seal{width:54px;height:54px;border-radius:50%;border:2px solid #d6b158;display:grid;place-items:center;margin:0 auto 10px;color:#d6b158;font-weight:bold;letter-spacing:2px}
.success-box h2{font:30px Georgia;margin:8px 0;color:#e6c983}
.success-box>p{color:#9a9fa4}
.success-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.success-stats>div{background:#090c0f;border:1px solid #30353a;border-radius:8px;padding:9px}
.success-stats small{display:block;color:#777;font-size:7px;letter-spacing:1px}
.success-stats b{display:block;color:#e2c57a;margin-top:5px}
.certificate-preview{margin:14px auto;background:#f5f0e5;color:#1b1a17;border:8px double #b48e45;border-radius:4px;padding:25px 18px;max-width:650px;box-shadow:0 8px 20px #0005}
.certificate-preview small{letter-spacing:2px;color:#8b6a31}
.certificate-preview h3{font:29px Georgia;margin:8px 0 16px}
.certificate-preview p{margin:7px 0;color:#5d574e}
.certificate-preview>b{font:24px Georgia;color:#2d281f}
.certificate-preview strong{display:block;font:20px Georgia;color:#8d6b30;margin:7px 0 15px}
.cert-meta{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;border-top:1px solid #c9b995;padding-top:10px;font-size:11px}
.name-row{max-width:650px;margin:10px auto;text-align:left}
.name-row label{display:block;font-size:8px;color:#888;margin-bottom:4px}
.name-row input{width:100%;background:#090c0f;border:1px solid #343a40;color:#eee;padding:10px;border-radius:6px}
.success-actions,.share-panel{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.success-actions button,.share-panel button{background:#181b20;color:#bbb;border:1px solid #3b4046;padding:9px 11px;border-radius:6px}
.share-panel{padding:10px;background:#0a0d10;border:1px solid #30353a;border-radius:8px}
@media(max-width:650px){.success-stats{grid-template-columns:1fr 1fr}.cert-meta{display:grid;gap:5px}}