body,html{background-color:#547698;height:100%;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}#app{color:#fff;flex-direction:row;height:100vh;display:flex}#sidebar{color:#fff;z-index:10;background-color:#6490b8;flex-direction:column;gap:8px;width:200px;padding:20px;display:flex;box-shadow:2px 0 10px #00000080}.tool-btn{color:#fff;text-align:left;cursor:pointer;background-color:#34495e;border:1px solid #2c3e50;border-radius:4px;padding:10px;transition:background .2s,opacity .2s}.tool-btn:hover:not(:disabled){background-color:#4b6584}.tool-btn.active{background-color:#3498db;border-color:#2980b9;font-weight:700}#main-content{background-color:#4e7aa7;flex-direction:column;flex-grow:1;height:100vh;display:flex}#canvas-container{box-sizing:border-box;border:4px solid #34495e;flex-grow:1;flex-shrink:1;min-height:0;margin:10px;position:relative;overflow:auto;box-shadow:0 10px 20px #00000080}#sps-canvas{background-color:#fff;position:sticky;left:0}#status-panel{box-sizing:border-box;background-color:#1a252f;flex-direction:row;flex:0 0 18%;gap:15px;padding:10px;display:flex;box-shadow:0 -5px 10px #0000004d}.status-section{box-sizing:border-box;background:#2c3e50;border:1px solid #34495e;border-radius:6px;flex-direction:column;flex:1;padding:5px;display:flex}.status-section h3{text-align:center;color:#ecf0f1;background-color:#34495e;border-radius:4px;margin:0 0 5px;padding:4px;font-size:13px}.status-grid{background-color:#fff;border-radius:5px;flex-grow:1;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(25,1fr);gap:2px;padding:6px;display:grid}.status-indicator{color:#74787a;-webkit-user-select:none;user-select:none;background-color:#ecf0f1;border:1px solid #bdc3c7;border-radius:2px;justify-content:center;align-items:center;font-family:monospace;font-size:10px;font-weight:700;transition:all .1s;display:flex}.status-indicator.used-taster,.status-indicator.used-schuetz,.status-indicator.used-leuchte{color:#fff;background-color:#7f8c8d;border-color:#34495e}.status-indicator.used-taster{cursor:pointer}.status-indicator.used-taster:hover{filter:brightness(1.2)}.status-indicator.active-taster{box-shadow:inset 0 0 4px #0000004d;color:#fff!important;background-color:#2ecc71!important;border-color:#27ae60!important}.status-indicator.active-schuetz{box-shadow:inset 0 0 4px #0000004d;color:#fff!important;background-color:#e74c3c!important;border-color:#c0392b!important}.status-indicator.active-leuchte{box-shadow:inset 0 0 4px #0000004d;color:#000!important;background-color:#f1c40f!important;border-color:#f39c12!important}