:root{--safe-navy:#0b263e;--safe-panel:#173247;--safe-panel-2:#102535;--safe-line:#35566d;--safe-text:#edf7fb;--safe-muted:#b4cad6;--safe-blue:#1684c5;--safe-cyan:#65d8e7;--safe-green:#25a86d;--safe-amber:#f1a52b;--safe-red:#d85a4f;--safe-shadow:0 16px 38px rgba(0,0,0,.26)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif}body{background:#0d171e;color:var(--safe-text)}button,select,input{font:inherit}.app-header{position:sticky;top:0;z-index:10000;min-height:68px;display:flex;align-items:center;gap:24px;padding:0 28px;border-bottom:4px solid #ef7d00;background:var(--safe-navy)}.brand{color:#fff;text-decoration:none;font-size:14px;font-weight:900;letter-spacing:.05em}.brand span{color:#70d5df}.course-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:800}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.user-chip{padding:7px 12px;border:1px solid #356079;border-radius:999px;background:#183d59;font-size:13px;white-space:nowrap}.user-chip.teacher{border-color:#d09a2f;background:#6a4b12}
.safety-shell{min-width:1180px;min-height:calc(100vh - 68px)}.safety-sidebar{position:fixed;top:80px;bottom:12px;left:12px;width:250px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid #415c6e;border-radius:17px;background:#2d3b46;box-shadow:var(--safe-shadow);z-index:100}.safety-return{padding:11px;border:2px solid #19e357;border-radius:11px;background:#064524;color:#21ff62;text-align:center;text-decoration:none;font-size:13px;font-weight:900;box-shadow:0 0 9px rgba(20,255,80,.45)}.safety-course-note{padding:10px;border:1px solid #587184;border-radius:10px;background:#202d37;color:#cbd9e2;text-align:center;font-size:12px}.sidebar-title{display:grid;padding-top:4px}.sidebar-title span{color:#9fb4c2;font-size:12px}.safety-sidebar nav{display:grid;gap:5px}.safety-nav-button{display:grid;grid-template-columns:28px 1fr 18px;align-items:center;gap:8px;width:100%;padding:8px;border:0;border-radius:8px;background:transparent;color:#d9e8f0;text-align:left;cursor:pointer}.safety-nav-button:hover,.safety-nav-button.active{background:#dceefa;color:#0b4168}.safety-nav-button .nav-num{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#708b9d;color:#fff;font-size:12px;font-weight:900}.safety-nav-button.done .nav-num{background:#16865f}.safety-nav-button .nav-check{color:#16865f;font-weight:900}.safety-overall{padding:10px;border-top:1px solid #5c707e}.safety-overall>div:first-child{display:flex;justify-content:space-between;color:#bed0da;font-size:12px}.safety-progress{height:7px;margin-top:8px;overflow:hidden;border-radius:99px;background:#18242c}.safety-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#1684c5,#35d0a0);transition:width .25s}.teacher-toggle,.reset-button{min-height:40px;border:1px solid #6d8495;border-radius:9px;color:#fff;font-weight:800;cursor:pointer}.teacher-toggle{background:#6a4b12;border-color:#d39a29}.reset-button{background:#713b3b}.topic-return{color:#92d7ff;text-align:center;text-decoration:none;font-size:12px}
.safety-main{margin-left:280px;padding:20px 26px 34px}.safety-hero{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:16px;padding:22px;border:1px solid var(--safe-line);border-radius:16px;background:linear-gradient(135deg,#18384f,#132b3d);box-shadow:var(--safe-shadow)}.safety-eyebrow{margin:0;color:var(--safe-cyan)!important;font-size:12px!important;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.safety-hero h1{margin:4px 0 6px;font-size:clamp(27px,3vw,42px);line-height:1.08}.safety-hero p{max-width:900px;margin:0;color:var(--safe-muted);line-height:1.55}.safety-result{flex:0 0 170px;display:grid;padding:14px;border:1px solid #4b7087;border-radius:13px;background:#0c1c27;text-align:center}.safety-result span,.safety-result small{color:#a9c1ce}.safety-result strong{color:#cbff25;font:900 30px Consolas,monospace}
.safety-teacher{margin-bottom:16px;padding:18px;border:2px solid #e89b22;border-radius:14px;background:#fff5d9;color:#173247}.safety-teacher[hidden]{display:none}.teacher-kicker{margin-bottom:10px;color:#8c5a06;font-weight:900}.teacher-grid{display:grid;grid-template-columns:.8fr 1.35fr 1fr;gap:18px}.teacher-grid h3{margin:0 0 5px;color:#744c08;font-size:14px}.teacher-grid p,.teacher-grid li{margin-top:0;font-size:14px;line-height:1.45}.teacher-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.teacher-outcomes>div{display:grid;gap:3px;padding:10px;border-left:4px solid #28a17a;border-radius:7px;background:#e8f7ef;font-size:14px}.teacher-outcomes .teacher-warning{border-color:#df7b24;background:#fff0e7}.teacher-outcomes strong{color:#744c08}
.safety-workspace{overflow:hidden;border:1px solid var(--safe-line);border-radius:17px;background:var(--safe-panel);box-shadow:var(--safe-shadow)}.block-head{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:15px;padding:20px;border-bottom:1px solid var(--safe-line);background:#1b3b51}.block-number{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#1684c5,#0d5c8d);font-size:25px;font-weight:900}.block-head p{margin:0;color:#6fdbea;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.block-head h2{margin:2px 0;font-size:25px}.block-head span{color:#bad0dc}.block-status{padding:7px 11px;border-radius:999px;background:#273f50;color:#bbced8;font-size:12px;font-weight:800}.block-status.done{background:#123e2f;color:#6fe7af}
#blockVisual{padding:18px 20px 0}.visual-card{min-height:150px;display:grid;place-items:center;padding:20px;border:1px solid #436477;border-radius:13px;background:#0e202c}.visual-title{color:#73dcec;font-weight:850;text-align:center}.hazard-scene{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}.hazard{min-height:105px;display:grid;place-items:center;padding:10px;border:1px solid #4b6879;border-radius:12px;background:#162c3b;text-align:center}.hazard b{display:block;font-size:30px}.fire-triangle{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:min(700px,100%)}.fire-node{padding:18px;border:3px solid;border-radius:50px;text-align:center;font-weight:900}.fire-node.fuel{border-color:#ef9f2e}.fire-node.oxygen{border-color:#4da9df}.fire-node.ignition{border-color:#e8584d}.pressure-scheme{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}.scheme-item{min-width:120px;padding:16px;border:2px solid #55788c;border-radius:11px;background:#172e3d;text-align:center;font-weight:850}.scheme-line{width:55px;height:5px;background:#e1842d}.pressure-value{color:#ffbe49;font:900 26px Consolas,monospace}.emergency-banner{width:min(850px,100%);padding:20px;border-left:7px solid #e65f50;border-radius:11px;background:#3d2524}.emergency-banner strong{display:block;margin-bottom:5px;color:#ffc4b7;font-size:20px}
#blockTask{padding:20px}.task-box{padding:18px;border:1px solid #3d6277;border-radius:13px;background:var(--safe-panel-2)}.task-box h3{margin:0 0 12px}.task-box>p{color:var(--safe-muted)}.option-list{display:grid;gap:9px}.option-card{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #49697b;border-radius:10px;background:#183246;color:#eef7fb;cursor:pointer}.option-card:hover{border-color:#62bddf}.option-card input{margin-top:4px;accent-color:#1fa6d4}.sequence-pool,.sequence-result{display:flex;flex-wrap:wrap;gap:8px;min-height:60px;padding:10px;border:1px dashed #5f8194;border-radius:10px;background:#0c1d27}.sequence-result{margin:10px 0;border-style:solid;background:#17364a}.sequence-item{padding:9px 11px;border:1px solid #6892a8;border-radius:8px;background:#24485e;color:#fff;cursor:pointer}.sequence-item small{display:inline-grid;width:20px;height:20px;margin-right:5px;place-items:center;border-radius:50%;background:#0d2534}.task-controls{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.task-controls button,.safety-footer button{min-height:42px;padding:9px 15px;border:1px solid #66879a;border-radius:9px;background:#29495c;color:#fff;font-weight:850;cursor:pointer}.task-controls .primary,.safety-footer .primary{border-color:#1187c7;background:#0879b8}.task-controls .secondary{background:#3d5564}.process-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.scenario-grid label{display:grid;gap:6px;color:#bcd0db;font-weight:750}.scenario-grid select{width:100%;padding:10px;border:1px solid #658397;border-radius:8px;background:#0c1c26;color:#fff}.quiz-list{display:grid;gap:14px}.quiz-question{padding:13px;border:1px solid #3e6175;border-radius:10px;background:#142a38}.quiz-question h4{margin:0 0 8px}.quiz-question label{display:block;padding:4px;color:#c8d9e2}.safety-feedback{margin:0 20px 20px;padding:15px;border-radius:11px;line-height:1.55}.safety-feedback.ok{border:1px solid #268c68;background:#123d2f;color:#91f0c2}.safety-feedback.bad{border:1px solid #a8584f;background:#422522;color:#ffc2b8}.safety-feedback strong{display:block;margin-bottom:4px}
.safety-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 3px}.safety-footer span{color:#aec3ce;font-weight:800}.safety-disclaimer{padding:13px;border-left:4px solid var(--safe-amber);border-radius:8px;background:#28251c;color:#d8d0bd;line-height:1.5}
.quiz-review{display:grid;gap:8px;margin-top:14px}.quiz-review h4{margin:0 0 2px}.quiz-review-item{display:grid;gap:3px;padding:10px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(0,0,0,.16)}.quiz-review-item span{color:#dce8ed}.quiz-review-item em{font-style:normal;font-weight:800}.quiz-review-item.correct em{color:#83f0bb}.quiz-review-item.incorrect em{color:#ffd085}
@media(max-width:980px){.safety-shell{min-width:0}.safety-sidebar{position:static;width:auto;margin:12px;max-height:none}.safety-sidebar nav{grid-template-columns:repeat(2,1fr)}.safety-main{margin:0;padding:12px}.safety-hero,.teacher-grid,.teacher-outcomes{grid-template-columns:1fr;display:grid}.safety-result{width:auto}.hazard-scene,.fire-triangle{grid-template-columns:1fr 1fr}.process-checks,.scenario-grid{grid-template-columns:1fr}.app-header{padding:0 14px}.course-title{display:none}.block-head{grid-template-columns:50px 1fr}.block-status{grid-column:1/-1}.header-actions{gap:5px}.user-chip{display:none}}
@media(max-width:560px){.safety-sidebar nav,.hazard-scene,.fire-triangle{grid-template-columns:1fr}.block-head h2{font-size:21px}.safety-main{padding:8px}.safety-workspace{border-radius:12px}}
@media print{.app-header,.safety-sidebar,.safety-footer,.task-controls{display:none!important}.safety-main{margin:0}.safety-shell{min-width:0}.safety-workspace{box-shadow:none}}