.ssi-options {display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 24px;}
.ssi-options label {display: flex; align-items: center; gap: 8px; font-size: 12px; color: #b7c3d0; min-height: 44px;}
.ssi-options input {accent-color: #edc56c; width: 18px; height: 18px;}
.ssi-intro {background: linear-gradient(110deg,#283344,#1b222c);}
.ssi-intro h2 {font-size: 28px; max-width: 650px; line-height: 1.4; margin-top: 16px;}
.ssi-intro p {max-width: 780px; font-size: 13px;}
.ssi-scenarios {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 24px;}
.ssi-scenarios .panel {display: flex; flex-direction: column; align-items: flex-start;}
.ssi-scenarios h3 {font-size: 17px; margin-top: 12px;}
.ssi-scenarios p {font-size: 12px; line-height: 1.8;}
.ssi-scenarios small {color: #86d6b8; margin: 0 0 15px;}
.ssi-scenarios :is(button,a:where([data-view])) {margin-top: auto; font-size: 12px; min-height: 44px;}
.ssi-session-bar {display: flex; align-items: center; gap: 15px; justify-content: space-between; flex-wrap: wrap; padding: 18px 20px; border: 1px solid #394353; border-radius: 16px; background: #1b222c; margin-bottom: 24px;}
.ssi-session-bar>span:nth-child(2) {font-size: 10px; color: #b7c3d0; white-space: nowrap;}
.ssi-session-bar b {color: #edc56c; font: 700 18px monospace; margin-left: 6px;}
.ssi-session-bar>div {display: flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.ssi-session-bar :is(button,a:where([data-view])),.ssi-session-bar select {font-size: 11px; padding: 9px; min-height: 40px;}
.ssi-session-bar label {font-size: 10px; color: #b7c3d0; display: flex; gap: 8px; align-items: center;}
.ssi-workspace {display: grid; grid-template-columns: minmax(0,1.5fr) minmax(290px,1fr); gap: 22px; align-items: start;}
.ssi-hardware {border: 1px solid #89949e; border-bottom: 7px solid #596471; border-radius: 14px; background: linear-gradient(135deg,#e4e8e8,#b9c2c8); color: #18262e; box-shadow: 0 15px 45px #0004; padding: 22px; min-width: 0;}
.ssi-hardware-top {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #83939d; padding-bottom: 15px; font: bold 19px Manrope,sans-serif; letter-spacing: 2px;}
.ssi-hardware-top small {display: block; font: 600 8px 'DM Sans',sans-serif; letter-spacing: 1px; margin-top: 6px; color: #45565f;}
.ssi-screw {color: #71818c; font-size: 26px;}
.ssi-signals {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 17px 0;}
.ssi-lamp {display: flex; align-items: center; gap: 8px; font: 700 10px 'DM Sans',sans-serif; color: #374951; min-width: 0;}
.ssi-lamp>span {flex: 1;}
.ssi-lamp i {width: 12px; height: 12px; flex: none; border-radius: 50%; background: #697177; box-shadow: inset 0 2px 4px #0007; border: 1px solid #53616a;}
.ssi-lamp small {font-size: 7px; color: #53616a;}
.ssi-lamp.lit.green i {background: #2bbf6e; box-shadow: 0 0 8px #2bce77;}
.ssi-lamp.lit.red i {background: #eb453b; box-shadow: 0 0 8px #eb453b;}
.ssi-lamp.lit.yellow i {background: #f2b928; box-shadow: 0 0 8px #f2b928;}
.ssi-lamp.lit.red>span {color: #9a251e;}
.ssi-lamp.lit.yellow>span {color: #654600;}
.ssi-lcd {border: 7px solid #4b5b66; border-radius: 10px; background: #213d37; box-shadow: inset 0 0 20px #0005; padding: 17px; color: #c7e7c9; font: 13px/1.7 monospace; min-height: 192px;}
.ssi-lcd-top {display: flex; justify-content: space-between; gap: 10px; font-size: 8px; margin-bottom: 14px; letter-spacing: 1px; color: #a1c5b5;}
.ssi-lcd>strong {font-size: 18px; color: #daf0c9;}
.ssi-lcd p {color: #c7e7c9; font: 12px/1.7 monospace; margin: 10px 0;}
.ssi-lcd>small {display: block; font: 10px/1.7 monospace; border-top: 1px solid #547665; padding-top: 9px; color: #c4d4c6; overflow-wrap: anywhere;}
.ssi-zone-select {display: flex; gap: 7px; margin: 15px 0;}
.ssi-zone-select :is(button,a:where([data-view])) {flex: 1; min-width: 0; background: #aab6bd; border: 1px solid #86949d; border-bottom: 3px solid #6f808b; border-radius: 8px; color: #23323b; font-size: 11px; padding: 10px 5px;}
.ssi-zone-select :is(button,a:where([data-view])) small {display: block; font-size: 8px; line-height: 1.5;}
.ssi-zone-select :is(button,a:where([data-view])).active {background: #294958; border-color: #294958; color: #fff;}
.ssi-unit {border-top: 1px solid #84949d; padding-top: 18px; margin-top: 19px;}
.ssi-unit-heading {display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px;}
.ssi-unit h3 {font: 800 14px Manrope,sans-serif; margin: 0; letter-spacing: 1px; color: #24333c;}
.ssi-unit h3 small {display: block; font: 700 7px 'DM Sans',sans-serif; letter-spacing: .7px; margin-top: 5px; color: #435964;}
.ssi-unit-heading>span {font-size: 7px; color: #435964; font-weight: 700; white-space: nowrap;}
.ssi-control-grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px;}
.ssi-control {padding: 13px 10px; min-height: 57px; text-align: left; background: #ebeeef; border: 1px solid #94a2ac; border-bottom: 4px solid #81929f; border-radius: 9px; color: #22333e; box-shadow: 0 2px 2px #0001;}
.ssi-control:hover {background: #fff; border-color: #526775;}
.ssi-control strong {display: block; font-size: 10px; line-height: 1.5;}
.ssi-control small {display: block; font-size: 8px; color: #52646f; line-height: 1.6; margin-top: 5px; font-weight: 400;}
.ssi-control.evac-button {background: #b93936; color: white; border-color: #b93936; border-bottom-color: #832b28;}
.ssi-control.evac-button small {color: #f4d1ce;}
.ssi-control.evac-button:hover {background: #d5433f;}
.ssi-access {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px;}
.ssi-access label {font-size: 10px; color: #344c57; flex: 1;}
.ssi-access label small {display: block; font-size: 8px; margin-top: 4px;}
.ssi-access input {width: 67px; padding: 10px 6px; font: 16px monospace; color: #263d45; background: #f6f8f8; border: 1px solid #85949d; border-radius: 7px; color-scheme: light;}
.ssi-access :is(button,a:where([data-view])) {font-size: 9px; min-height: 40px; padding: 8px; background: #485d69; color: #fff; border-color: #485d69;}
.ssi-countdown {display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #364954; font-size: 10px; background: #aebac26b; padding: 13px; border-radius: 8px; margin-bottom: 12px; line-height: 1.6;}
.ssi-countdown b {font: 800 20px monospace; color: #a52827;}
.ssi-das-state {display: grid; gap: 8px; margin-bottom: 14px; font-size: 10px;}
.ssi-das-state>span {display: flex; justify-content: space-between; gap: 10px; align-items: center; color: #435964;}
.ssi-das-state b {background: #a1b0b9; color: #334952; font-size: 8px; padding: 6px 8px; border-radius: 5px; text-align: center;}
.ssi-das-state b.das-safe {background: #247e56; color: #fff;}
.ssi-das-state b.das-fault {background: #b77919; color: #fff;}
.ssi-mission-column {display: flex; flex-direction: column; gap: 17px; min-width: 0;}
.ssi-mission-column .panel {padding: 20px;}
.ssi-coach {background: #edc56c0c; border-color: #edc56c50;}
.ssi-coach p {color: #e0d6bf; font-size: 13px; line-height: 1.8; margin: 9px 0;}
.ssi-coach small {font-size: 10px; color: #aeb9c8;}
.ssi-site .section-head {margin: 0 0 15px;}
.ssi-site h3 {font-size: 15px; margin: 0;}
.ssi-site p {font-size: 10px; line-height: 1.8; margin: 13px 0 0;}
.ssi-plan {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; background: #111923; border: 1px solid #384c5b; padding: 14px; border-radius: 12px;}
.ssi-plan-label {grid-column: 1/-1; color: #9caabc; font-size: 8px; font-weight: 800;}
.plan-room {background: #253949; border: 2px solid #4b6576; border-radius: 6px; color: #d9e4ef; text-align: left; padding: 12px 9px; font-size: 11px; min-height: 91px;}
.plan-room span {display: block; font-weight: 700; line-height: 1.5;}
.plan-room small {display: block; font-size: 7px; color: #b5c3d1; margin: 6px 0;}
.plan-room b {display: block; font-size: 7px; color: #8fe0be;}
.plan-room.fire {background: #6c3235; border-color: #c76368;}
.plan-room.fire b {color: #ffc5c5;}
.plan-room.fault {border-color: #e9b64d;}
.plan-room.selected {outline: 2px solid #d1e4f6; outline-offset: 2px;}
.ssi-plan-stair {grid-column: 1/-1; text-align: center; color: #9caabc; font-size: 8px; padding: 10px; background: repeating-linear-gradient(90deg,#536679 0px,#536679 2px,#243548 2px,#243548 12px); border-radius: 5px;}
.ssi-plan-exit {font-size: 8px; color: #95d8b8; display: flex; align-items: center; line-height: 1.8; padding-left: 7px;}
.ssi-ops-grid {display: grid; gap: 9px;}
.ssi-operations .ssi-control {background: #293b4b; color: #dfeaf4; border-color: #3c5264; border-bottom-color: #1d2b38;}
.ssi-operations .ssi-control small {color: #aebed0;}
.ssi-operations .ssi-control:hover {background: #364d62;}
.ssi-scenario-controls p {font-size: 10px; line-height: 1.8;}
.ssi-scenario-controls .ssi-control {width: 100%; margin-bottom: 14px;}
.ssi-scenario-controls label {display: block; font-size: 12px;}
.ssi-scenario-controls select {display: block; margin: 10px 0; width: 100%; font-size: 12px;}
.ssi-scenario-controls>:is(button,a:where([data-view])) {width: 100%; margin-top: 10px; font-size: 11px;}
.ssi-journal {margin-top: 25px;}
.ssi-journal .section-head {margin: 0 0 15px;}
.ssi-journal h3 {margin: 0; font-size: 16px;}
.ssi-journal :is(button,a:where([data-view])) {font-size: 11px;}
.ssi-journal ol {list-style: none; padding: 0; margin: 0; max-height: 340px; overflow: auto;}
.ssi-journal li {display: flex; gap: 15px; border-bottom: 1px solid #303743; padding: 12px 0; font-size: 11px; line-height: 1.8; color: #bac7d5;}
.ssi-journal time {font: 11px monospace; color: #90a6b8; min-width: 42px; padding-top: 5px;}
.ssi-journal li.alarm {color: #f2a3a0;}
.ssi-journal li.fault,.ssi-journal li.error {color: #edc56c;}
.ssi-journal li.safety {color: #8ed4b7;}
.ssi-confirm {position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(450px,calc(100vw - 32px)); background: #27313f; border: 2px solid #f08680; padding: 27px; border-radius: 20px; box-shadow: 0 0 0 100vmax #000a;}
.ssi-confirm strong {display: block; font-size: 20px; line-height: 1.5;}
.ssi-confirm p {font-size: 13px;}
.ssi-confirm :is(button,a:where([data-view])) {width: 100%; margin-top: 10px; font-size: 13px;}
.ssi-debrief h2 {margin-top: 17px; font-size: 28px;}
.ssi-debrief p {font-size: 13px;}
.ssi-debrief ul {list-style: none; padding: 0; display: grid; gap: 12px;}
.ssi-debrief li {font-size: 13px;}
.ssi-debrief .achieved {color: #8bd4b6;}
.ssi-debrief .missed {color: #eac56b;}
.ssi-debrief summary {color: #eac56b; cursor: pointer; margin: 22px 0 15px;}
.ssi-debrief :is(button,a:where([data-view])) {margin: 10px 10px 0 0;}
.ssi-reference {margin-top: 25px;}
.ssi-reference summary {cursor: pointer; color: #edc56c; font-size: 13px; line-height: 1.7;}
.ssi-reference p,.ssi-reference li {font-size: 11px; line-height: 1.9;}
.ssi-reference p:first-of-type {margin-top: 20px;}
.ssi-reference li {margin-bottom: 10px;}
.ssi-home-feature {margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: linear-gradient(130deg,#243949,#1b222c);}
.ssi-home-feature h2 {font-size: 24px; margin-top: 20px;}
.ssi-home-feature p {font-size: 13px; margin-bottom: 0;}
.ssi-home-feature :is(button,a:where([data-view])) {flex: none; font-size: 12px;}
@media (max-width:1150px) {.ssi-workspace {grid-template-columns: minmax(0,1fr);}.ssi-mission-column {display: grid; grid-template-columns: repeat(2,minmax(0,1fr));}.ssi-scenarios {grid-template-columns: repeat(2,minmax(0,1fr));}}
@media (max-width:800px) {.ssi-options {gap: 10px 20px;}.ssi-options>.tag {width: 100%; justify-content: center;}.ssi-options label {flex: 1; font-size: 12px;}.ssi-scenarios {grid-template-columns: 1fr;}.ssi-scenarios h3 {font-size: 20px;}.ssi-scenarios p {font-size: 13px;}.ssi-scenarios :is(button,a:where([data-view])) {width: 100%; min-height: 48px;}.ssi-intro h2 {font-size: 24px;}.ssi-session-bar {padding: 16px; gap: 14px;}.ssi-session-bar>div {width: 100%; gap: 8px;}.ssi-session-bar :is(button,a:where([data-view])) {min-height: 44px; font-size: 11px; flex: 1;}.ssi-session-bar label {flex: 1; font-size: 10px;}.ssi-session-bar select {font-size: 16px; min-height: 44px; max-width: 150px;}.ssi-hardware {padding: 18px 14px;}.ssi-hardware-top {font-size: 17px;}.ssi-signals {gap: 12px 8px;}.ssi-lamp {font-size: 10px; line-height: 1.4;}.ssi-lamp small {display: none;}.ssi-lcd {padding: 15px 12px; border-width: 5px;}.ssi-lcd>strong {font-size: 19px;}.ssi-lcd p {font-size: 13px;}.ssi-lcd>small {font-size: 11px;}.ssi-zone-select :is(button,a:where([data-view])) {min-height: 49px; font-size: 13px;}.ssi-zone-select :is(button,a:where([data-view])) small {font-size: 9px;}.ssi-unit h3 {font-size: 16px;}.ssi-unit h3 small {font-size: 8px;}.ssi-control {min-height: 64px; padding: 12px;}.ssi-control strong {font-size: 11px;}.ssi-control small {font-size: 9px;}.ssi-access label {font-size: 12px; flex-basis: 100%;}.ssi-access label small {font-size: 10px;}.ssi-access input {width: 85px; min-height: 44px;}.ssi-access :is(button,a:where([data-view])) {min-height: 44px; font-size: 12px; flex: 1;}.ssi-countdown {font-size: 11px; padding: 13px 10px;}.ssi-countdown b {font-size: 23px;}.ssi-das-state {font-size: 11px; gap: 10px;}.ssi-das-state b {font-size: 9px;}.ssi-mission-column {display: flex;}.ssi-mission-column .panel {padding: 22px 18px;}.ssi-coach p {font-size: 14px;}.ssi-coach small {font-size: 11px;}.ssi-site p {font-size: 11px;}.ssi-site h3 {font-size: 18px;}.plan-room {min-height: 115px; padding: 14px 12px;}.plan-room span {font-size: 13px;}.plan-room small {font-size: 9px;}.plan-room b {font-size: 9px;}.ssi-plan-exit,.ssi-plan-stair,.ssi-plan-label {font-size: 9px;}.ssi-ops-grid .ssi-control strong {font-size: 13px;}.ssi-ops-grid .ssi-control small {font-size: 10px;}.ssi-scenario-controls p {font-size: 12px;}.ssi-scenario-controls .ssi-control strong {font-size: 12px;}.ssi-scenario-controls :is(button,a:where([data-view])) {min-height: 48px; font-size: 13px;}.ssi-scenario-controls select {font-size: 16px; min-height: 48px;}.ssi-journal .section-head {align-items: stretch;}.ssi-journal :is(button,a:where([data-view])) {min-height: 44px;}.ssi-journal li {font-size: 12px; gap: 12px;}.ssi-journal time {font-size: 11px;}.ssi-reference summary {font-size: 13px; min-height: 44px;}.ssi-reference p,.ssi-reference li {font-size: 12px; overflow-wrap: anywhere;}.ssi-debrief h2 {font-size: 24px;}.ssi-debrief :is(button,a:where([data-view])) {width: 100%; margin-right: 0; min-height: 48px;}.ssi-debrief li {font-size: 13px; line-height: 1.7;}.ssi-home-feature {flex-direction: column; align-items: stretch;}.ssi-home-feature h2 {font-size: 24px;}.ssi-home-feature :is(button,a:where([data-view])) {min-height: 48px;}.ssi-confirm :is(button,a:where([data-view])) {min-height: 48px;}}
@media (max-width:360px) {.ssi-hardware {padding: 14px 10px;}.ssi-control {padding: 10px 8px;}.ssi-control strong {font-size: 10px;}.ssi-control-grid {gap: 7px;}.ssi-unit-heading>span {font-size: 6px;}.ssi-lamp {font-size: 9px;}.ssi-session-bar>div {flex-wrap: wrap;}.ssi-session-bar label {min-width: 100%; justify-content: space-between;}.ssi-das-state>span {flex-wrap: wrap;}.ssi-screw {font-size: 20px;}}
.ssi-confirm {margin: 0; max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: 0 25px 80px #0006;}
.ssi-confirm::backdrop {background: #000b; backdrop-filter: blur(3px);}
@media (max-width:800px) {.ssi-workspace {grid-template-columns: minmax(0,1fr);}.ssi-mission-column {display: contents;}.ssi-coach {grid-row: 1;}.ssi-session-bar {margin-bottom: 18px;}.ssi-unit-heading h3 small {line-height: 1.7;}}
.ssi-volume {min-width: 180px;}
.ssi-options .ssi-volume input {width: 110px; height: 20px; accent-color: #edc56c;}
.ssi-audio-status {display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #18212b; border: 1px solid #324457; border-radius: 12px; padding: 12px 16px; margin: -10px 0 22px; font-size: 11px; color: #b7c7d8; min-height: 43px;}
.ssi-audio-status :is(button,a:where([data-view])) {font-size: 11px; min-height: 40px; color: #edc56c; flex: none;}
.ssi-control[data-ssi-action="test"] {touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}
.ssi-test-active .ssi-control[data-ssi-action="test"] {background: #294958; color: white; border-bottom-width: 1px; transform: translateY(3px);}
.ssi-test-active .ssi-control[data-ssi-action="test"] small {color: #d6e5ed;}
.ssi-test-active .ssi-lamp.green i {background: #2bbf6e; box-shadow: 0 0 8px #2bce77;}
.ssi-test-active .ssi-lamp.red i {background: #eb453b; box-shadow: 0 0 8px #eb453b;}
.ssi-test-active .ssi-lamp.yellow i {background: #f2b928; box-shadow: 0 0 8px #f2b928;}
.ssi-test-active .ssi-lamp.red>span {color: #9a251e;}
.ssi-test-active .ssi-lamp.yellow>span {color: #654600;}
@media (max-width:800px) {.ssi-options .ssi-volume {flex-basis: 100%; justify-content: space-between;}.ssi-options .ssi-volume input {width: 65%; min-height: 44px;}.ssi-audio-status {font-size: 12px; line-height: 1.7; padding: 14px; flex-wrap: wrap;}.ssi-audio-status :is(button,a:where([data-view])) {min-height: 44px;}.ssi-control strong {font-size: 11px;}.ssi-control[data-ssi-action="test"] {min-height: 76px;}}
.ssi-radio-live {background: #142331; border: 1px solid #496078; border-radius: 14px; padding: 16px; margin: 15px 0 18px;}
.ssi-radio-heading {display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d6e3f1;}
.ssi-radio-heading>span {color: #678192; font-size: 14px;}
.ssi-radio-heading .transmitting {color: #81d3b7;}
.ssi-radio-live>small {display: block; font-size: 10px; line-height: 1.7; color: #a7bdcf; margin-top: 6px;}
.ssi-radio-live>p {color: #d3deea; font-size: 12px; line-height: 1.9; margin: 12px 0;}
.ssi-radio-live>div:last-child {display: flex; gap: 7px; flex-wrap: wrap;}
.ssi-radio-live :is(button,a:where([data-view])) {font-size: 10px; min-height: 40px; padding: 9px; background: #2a4055; border-color: #4b667e; color: #d5e7f6;}
@media (max-width:800px) {.ssi-radio-live {padding: 18px 15px;}.ssi-radio-live>p {font-size: 13px;}.ssi-radio-live>small {font-size: 11px;}.ssi-radio-live :is(button,a:where([data-view])) {min-height: 44px; font-size: 11px; flex: 1;}}
.ssi-radio-transcript {display: grid; gap: 8px; font-size: 11px; line-height: 1.8; margin-top: 10px; padding: 12px; border-left: 2px solid #6996b5; background: #1b2d3d; border-radius: 0 8px 8px 0; color: #c5d4e2;}
.ssi-radio-transcript b {color: #e0c679;}
@media (max-width:800px) {.ssi-radio-transcript {font-size: 12px;}}