:root{
    --navy:#173b5f;--blue:#1769aa;--blue2:#0d7bb8;--ink:#243b53;--muted:#627d98;
    --bg:#eef4f8;--card:#fff;--line:#d7e3eb;--soft:#f5f9fc;--good:#0f8a5f;
    --good-bg:#eaf8f2;--warn:#a66a00;--warn-bg:#fff7df;--bad:#b42318;--bad-bg:#fff0ee;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,select{font:inherit}.app-header{position:sticky;top:0;z-index:40;min-height:70px;display:flex;align-items:center;gap:20px;padding:10px 22px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 3px 16px rgba(26,52,72,.07)}
.brand{color:var(--navy);font-size:21px;font-weight:900;text-decoration:none;white-space:nowrap}.brand span{color:var(--blue)}
.course-title{flex:1;text-align:center;color:#48667d;font-size:14px;font-weight:800}.header-actions{display:flex;align-items:center;gap:10px}.user-chip{padding:8px 12px;border-radius:999px;background:#edf5fb;color:#37637f;font-size:12px;font-weight:800;white-space:nowrap}.user-chip.teacher{background:#fff4d8;color:#8a5a00}
.hazards-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:calc(100vh - 70px)}
.hazards-sidebar{position:sticky;top:70px;height:calc(100vh - 70px);overflow:auto;padding:20px 16px;background:#173b5f;color:#fff;border-right:1px solid #102f4e}.side-return,.topic-return{display:block;color:#d8eaff;text-decoration:none;font-size:13px;font-weight:750;line-height:1.45}.side-return:hover,.topic-return:hover{color:#fff}.side-course{margin:18px 0;padding:15px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.07)}.side-course span{display:block;margin-bottom:6px;color:#9ed5f7;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.side-course strong{font-size:15px;line-height:1.4}.side-title{margin:20px 2px 14px}.side-title strong{display:block;margin-bottom:5px;font-size:14px}.side-title span{display:block;color:#c8d8e5;font-size:12px;line-height:1.5}.side-stats{display:grid;grid-template-columns:1fr;gap:8px}.side-stats>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 11px;border-radius:9px;background:rgba(255,255,255,.07)}.side-stats span{color:#cbdbe7;font-size:11px}.side-stats strong{font-size:15px}.overall-progress{height:9px;margin:12px 0 18px;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden}.overall-progress i{display:block;width:0;height:100%;border-radius:999px;background:#61d7b1;transition:width .25s ease}.teacher-toggle,.hint-toggle,.reset-button{width:100%;margin:0 0 9px;padding:10px 12px;border:1px solid rgba(255,255,255,.20);border-radius:9px;background:rgba(255,255,255,.08);color:#fff;font-weight:800;cursor:pointer}.teacher-toggle:hover,.hint-toggle:hover{background:rgba(255,255,255,.14)}.teacher-toggle[aria-pressed="true"],.hint-toggle[aria-pressed="true"]{background:#e6f4ff;color:#174b6b}.reset-button{margin-top:3px;background:rgba(180,35,24,.23);border-color:rgba(255,170,160,.26)}.topic-return{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.hazards-main{min-width:0;padding:24px 28px 36px}.hazards-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px;padding:23px 25px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 26px rgba(24,54,75,.05)}.eyebrow{margin:0 0 7px;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.hazards-hero h1{margin:0 0 8px;color:var(--navy);font-size:clamp(26px,3vw,38px);line-height:1.12}.hazards-hero p:not(.eyebrow){max-width:850px;margin:0;color:var(--muted);font-size:15px;line-height:1.6}.result-box{min-width:175px;padding:13px 15px;border-radius:12px;background:#eff6fb;text-align:center}.result-box span,.result-box small{display:block;color:#60788c;font-size:11px}.result-box strong{display:block;margin:5px 0;color:#214f6d;font-size:17px}.result-box.is-good{background:var(--good-bg)}.result-box.is-good strong{color:var(--good)}.result-box.is-bad{background:var(--bad-bg)}.result-box.is-bad strong{color:var(--bad)}
.teacher-panel{margin-bottom:18px;padding:20px 22px;border:1px solid #edc967;border-radius:14px;background:#fff9e8}.teacher-kicker{margin-bottom:14px;color:#986400;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.teacher-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.teacher-grid>div{padding:14px;border-radius:10px;background:#fff}.teacher-grid h3{margin:0 0 8px;color:#654a11;font-size:14px}.teacher-grid p,.teacher-grid li{color:#665c46;font-size:13px;line-height:1.5}.teacher-grid ol,.teacher-grid ul{margin:0;padding-left:20px}.teacher-warning{margin-top:14px;padding:12px 14px;border-left:4px solid #d98c00;background:#fff3cf;color:#745007;font-size:13px;line-height:1.5}
.work-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}.scene-card,.answer-card,.summary-card{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 7px 24px rgba(24,54,75,.05)}.scene-card{min-width:0;overflow:hidden}.scene-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;border-bottom:1px solid var(--line)}.scene-head strong,.scene-head span{display:block}.scene-head strong{color:var(--navy);font-size:15px}.scene-head>div>span{margin-top:3px;color:var(--muted);font-size:12px}.legend{display:flex;align-items:center;gap:12px;color:#6d8191;font-size:11px}.legend span{display:flex;align-items:center;gap:5px}.legend i{width:15px;height:15px;border-radius:50%}.legend-found{background:rgba(15,138,95,.18);border:2px solid var(--good)}.legend-hint{background:rgba(216,154,20,.12);border:2px dashed #d89a14}.hazard-scene{display:block;width:100%;height:auto;min-height:480px;background:#e8f0f5}.svg-title{fill:#fff;font-size:18px;font-weight:900;letter-spacing:.06em}.svg-module{fill:#fff;font-size:18px;font-weight:900}.svg-small{fill:#eaf2f6;font-size:13px;font-weight:800}.svg-small-dark{fill:#415c6c;font-size:12px;font-weight:800}.svg-instrument{fill:#294b60;font-size:25px;font-weight:900}.svg-label{fill:#496577;font-size:14px;font-weight:800}.scene-zone{fill:transparent;stroke:transparent;stroke-width:5;cursor:pointer;outline:none;transition:.16s}.scene-zone:hover,.scene-zone:focus{fill:rgba(23,105,170,.08);stroke:#48a5dc}.scene-zone.is-hint{fill:rgba(217,154,20,.07);stroke:#d89a14;stroke-dasharray:10 8}.scene-zone.is-found{fill:rgba(15,138,95,.11);stroke:#0f8a5f}.scene-zone.is-wrong{fill:rgba(180,35,24,.09);stroke:#c7473d}.scene-zone.safe-zone.is-hint{stroke:#6c8798}
.answer-card{position:sticky;top:92px;min-height:420px;padding:20px}.answer-empty{padding:45px 8px;text-align:center}.answer-icon{display:inline-flex;width:58px;height:58px;align-items:center;justify-content:center;border-radius:50%;background:#eaf4fb;color:var(--blue);font-size:32px;font-weight:900}.answer-empty h2{margin:16px 0 8px;color:var(--navy);font-size:20px}.answer-empty p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.zone-kicker{color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.answer-card h2{margin:6px 0 7px;color:var(--navy);font-size:21px;line-height:1.25}.zone-prompt{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.5}.answer-group{margin-bottom:14px}.answer-group label{display:block;margin-bottom:6px;color:#38576d;font-size:12px;font-weight:850}.answer-group select{width:100%;padding:11px 12px;border:1px solid #cfdde6;border-radius:9px;background:#fff;color:#29485d}.answer-group select:focus{outline:3px solid rgba(23,105,170,.12);border-color:#4e9bcb}.check-button{width:100%;padding:11px 14px;border:0;border-radius:9px;background:var(--blue);color:#fff;font-weight:900;cursor:pointer}.check-button:hover{background:#125c96}.check-button:disabled{background:#9aabb7;cursor:default}.answer-feedback{margin-top:14px;padding:12px 13px;border-radius:10px;font-size:13px;line-height:1.5}.answer-feedback.good{border:1px solid #a8dec9;background:var(--good-bg);color:#176c51}.answer-feedback.warn{border:1px solid #f0cf78;background:var(--warn-bg);color:#77530c}.answer-feedback.bad{border:1px solid #efb6b0;background:var(--bad-bg);color:#8b2f27}.answer-feedback strong{display:block;margin-bottom:4px}
.summary-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;padding:20px 22px}.summary-card h2{margin:0 0 7px;color:var(--navy)}.summary-card p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.55}.summary-metrics{display:grid;grid-template-columns:repeat(3,minmax(100px,1fr));gap:9px}.summary-metrics>div{padding:11px;border-radius:10px;background:#f2f7fa;text-align:center}.summary-metrics span{display:block;color:#6c8293;font-size:10px}.summary-metrics strong{display:block;margin-top:4px;color:#244e68;font-size:17px}.safety-disclaimer{margin:17px 3px 0;color:#718595;font-size:12px;line-height:1.55}
body.teacher-mode .scene-zone{stroke-width:6}
@media(max-width:1180px){.hazards-shell{grid-template-columns:235px minmax(0,1fr)}.work-grid{grid-template-columns:1fr}.answer-card{position:static;min-height:0}.teacher-grid{grid-template-columns:1fr}.summary-card{align-items:flex-start;flex-direction:column}}
@media(max-width:820px){.app-header{position:static;flex-wrap:wrap}.course-title{order:3;flex-basis:100%;text-align:left}.hazards-shell{display:block}.hazards-sidebar{position:static;height:auto}.hazards-main{padding:15px}.hazards-hero{flex-direction:column}.result-box{width:100%;text-align:left}.scene-head{align-items:flex-start;flex-direction:column}.summary-metrics{width:100%;grid-template-columns:1fr}.hazard-scene{min-height:360px}.user-chip{display:none}}

/* ============================================================
   OP.02 · 6-й разряд · тема 1.4 «Средства защиты»
   ============================================================ */
.mode-switch{display:grid;gap:7px;margin:0 0 18px}
.mode-switch a{display:block;padding:9px 10px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(255,255,255,.05);color:#cfe3f2;text-decoration:none;font-size:12px;font-weight:800;line-height:1.35}
.mode-switch a:hover{background:rgba(255,255,255,.11);color:#fff}
.mode-switch a.is-active{border-color:#87c7ee;background:#e8f5ff;color:#174e73}
.ppe-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 7px 24px rgba(24,54,75,.05)}
.ppe-intro-note{margin:16px 16px 0;padding:13px 15px;border-left:4px solid #d89a14;border-radius:9px;background:#fff7df;color:#76520b;font-size:13px;line-height:1.55}
.ppe-scenarios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:17px}
.ppe-scenario{min-height:118px;display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #d8e5ed;border-radius:13px;background:#f8fbfd;color:#26485e;text-align:left;cursor:pointer;transition:.16s}
.ppe-scenario:hover,.ppe-scenario:focus{border-color:#6eadd1;background:#eef7fd;outline:none;transform:translateY(-1px)}
.ppe-scenario.is-found{border-color:#8ed0b6;background:#edf9f4}
.ppe-scenario.is-hint:not(.is-found){border-color:#d89a14;box-shadow:inset 0 0 0 1px #d89a14;background:#fff9e8}
.ppe-icon{flex:0 0 52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#e6f2f9;color:#1769aa;font-size:19px;font-weight:950;letter-spacing:-.03em}
.ppe-scenario strong,.ppe-scenario small{display:block}
.ppe-scenario strong{margin-bottom:5px;color:#173b5f;font-size:15px;line-height:1.3}
.ppe-scenario small{color:#6b8294;font-size:12px;line-height:1.45}
.ppe-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 17px 17px}
.ppe-principles>div{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:10px;background:#f2f7fa;color:#557185;font-size:12px;line-height:1.45}
.ppe-principles strong{flex:0 0 27px;height:27px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#1769aa;color:#fff}
body[data-op02-mode="ppe"] .answer-icon{font-size:27px}
@media(max-width:900px){.ppe-scenarios{grid-template-columns:1fr}.ppe-principles{grid-template-columns:1fr}}