*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Courier New',Consolas,monospace;background:radial-gradient(ellipse at center,#0a0f1a 0,#000 100%);min-height:100vh;min-width:1280px;display:flex;align-items:center;justify-content:center;padding:20px;position:relative}.container{background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:20px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.5);max-width:500px;width:100%;border:1px solid #3a3a3a;position:relative}.container::before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(145deg,#4a4a4a,#2a2a2a);border-radius:20px;z-index:-1;opacity:.3}h1{text-align:center;margin-bottom:30px;color:#00d9ff;font-size:24px;font-weight:700;letter-spacing:3px;text-shadow:0 0 10px rgba(0,217,255,.5),0 0 20px rgba(0,217,255,.3);text-transform:uppercase;font-family:'Courier New',monospace}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}#buttonGrid{display:contents}.action-button{aspect-ratio:1;border:none;border-radius:15px;cursor:pointer;transition:all .2s ease;position:relative;font-size:12px;font-weight:700;color:#0a0a0a;text-shadow:none;background:linear-gradient(145deg,#fff,#f0f0f0);box-shadow:0 8px 20px rgba(100,180,255,.4),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 5px rgba(0,0,0,.1);border:2px solid #e0e0e0;text-transform:uppercase;letter-spacing:1px;font-family:'Courier New',monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;gap:8px}.button-image{width:60%;height:60%;object-fit:contain;opacity:.8}.button-label{font-size:11px;font-weight:700}.action-button:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(100,180,255,.6),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 5px rgba(0,0,0,.1),0 0 25px rgba(100,180,255,.3)}.action-button:active{transform:translateY(0);box-shadow:0 4px 10px rgba(100,180,255,.4),inset 0 2px 5px rgba(0,0,0,.2)}.action-button.off{background:linear-gradient(145deg,#d0d0d0,#b0b0b0);color:#ddd;text-shadow:none;border-color:#a0a0a0;box-shadow:0 4px 15px rgba(100,180,255,.2),inset 0 2px 5px rgba(0,0,0,.3)}.action-button.off .button-image{opacity:.3;filter:grayscale(100%)}.action-button.off .button-label{color:#ddd}.action-button.on::after{content:'⚡';position:absolute;top:8px;right:8px;font-size:20px;text-shadow:0 0 5px rgba(255,255,0,.8),0 0 10px rgba(255,255,0,.5);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.control-button{border:none;border-radius:15px;transition:all .2s ease;position:relative;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-family:'Courier New',monospace;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;gap:8px;background:linear-gradient(145deg,#1a1a1a,#0a0a0a);border:2px solid #2a2a2a;box-shadow:0 8px 20px rgba(100,180,255,.2),inset 0 1px 0 rgba(255,255,255,.05),inset 0 -2px 5px rgba(0,0,0,.3)}.status-button{color:#888}.toggle-button{color:#888}.control-label{font-size:11px;font-weight:700;color:#f44;letter-spacing:1px;transition:color .3s ease}.control-label.active{color:#0f8;text-shadow:0 0 5px rgba(0,255,136,.3)}.switch{position:relative;display:inline-block;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#333;transition:.4s;border-radius:20px;border:1px solid #444}.slider:before{position:absolute;content:"";height:14px;width:14px;left:2px;bottom:2px;background-color:#888;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#031;border-color:#052}input:checked+.slider:before{transform:translateX(20px);background-color:#0f8;box-shadow:0 0 8px rgba(0,255,136,.6)}input:focus+.slider{box-shadow:0 0 1px #0f8}.status-button.connected{color:#0f8;text-shadow:0 0 5px rgba(0,255,136,.3)}.status-button.connected #statusIcon{font-size:0}.status-button.error{color:#f44;text-shadow:0 0 5px rgba(255,68,68,.3)}.status-button.error #statusIcon::before{content:'❌ ⚠️ ';font-size:16px}.log-sidebar{background:linear-gradient(90deg,#000,#080008);border-radius:20px;border:1px solid #3a3a3a;box-shadow:0 20px 60px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1);width:500px;max-width:calc(100vw - 40px);display:flex;flex-direction:column;transition:transform .3s ease;position:fixed;right:20px;top:20px;bottom:20px;transform:none;height:auto}.log-sidebar.collapsed{transform:translateX(calc(100% - 40px));border:none;box-shadow:none}.log-sidebar.collapsed .log-clear,.log-sidebar.collapsed .log-content,.log-sidebar.collapsed .log-title{display:none}.log-sidebar.collapsed .log-header{border-radius:20px 0 0 20px}.log-header{padding:20px;border-bottom:1px solid #3a3a3a;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(145deg,#1a1a1a,#0a0a0a);border-radius:20px 20px 0 0;min-height:60px;cursor:pointer;user-select:none;gap:10px}.log-sidebar.collapsed .log-header{border-radius:20px;border-bottom:none}.log-header:hover{background:linear-gradient(145deg,#252525,#151515)}.log-title{color:#00d9ff;font-size:16px;font-weight:700;letter-spacing:2px;position:absolute;left:50%;transform:translateX(-50%);text-shadow:0 0 10px rgba(0,217,255,.8),0 0 20px rgba(0,217,255,.5),0 0 30px rgba(0,217,255,.3)}.log-clear{background:linear-gradient(145deg,#ff6b8a,#d4477a);border:none;color:#fff;font-size:14px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(255,107,138,.4);pointer-events:auto;position:relative;z-index:10}.log-clear:hover{background:linear-gradient(145deg,#ff8aa0,#e85c8a);box-shadow:0 6px 15px rgba(255,107,138,.6);transform:translateY(-2px)}.log-clear:active{transform:translateY(0);box-shadow:0 2px 5px rgba(255,107,138,.4)}.log-clear svg{filter:drop-shadow(0 0 2px rgba(0, 0, 0, .3))}.log-toggle{background:0 0;border:none;color:#00d9ff;font-size:16px;cursor:pointer;padding:5px;pointer-events:auto;position:relative;z-index:10}.log-sidebar.collapsed .log-toggle::before{content:'◀';color:#0f8}.log-toggle::before{content:'▶'}.log-content{flex:1;overflow-y:auto;padding:15px;font-size:11px;line-height:1.6;min-height:200px}.log-content::-webkit-scrollbar{width:8px}.log-content::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:4px}.log-content::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#70b8e0,#4a9fc7);border-radius:4px}.log-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#90d0f0,#60b0d7)}.log-entry{margin-bottom:10px;padding:8px;border-radius:5px;border-left:3px solid;background:rgba(0,0,0,.3)}.log-entry.log-success{border-color:#0f8;color:#0f8;background:rgba(0,255,136,.05)}.log-entry.log-error{border-color:#f44;color:#f44;background:rgba(255,68,68,.05)}.log-entry.log-info{border-color:#00d9ff;color:#fff;background:rgba(0,217,255,.05)}.log-entry.log-connection{border-color:#ffd93d;color:#ffd93d;background:rgba(255,217,61,.05);font-weight:600}.log-time{color:#666;font-size:10px;margin-right:5px}.sensor-sonar{color:#b4f;font-weight:600}.sensor-radar{color:#f4a;font-weight:600}.sensor-thermal{color:#f84;font-weight:600}.sensor-pressure{color:#a64;font-weight:600}.state-on{color:#0f0;font-weight:700;text-shadow:0 0 5px rgba(0,255,0,.5)}.state-off{color:red;font-weight:700;text-shadow:0 0 5px rgba(255,0,0,.5)}@media (max-width:1200px){.log-sidebar{width:350px}}@media (max-width:900px){.log-sidebar{width:300px}}@media (max-width:768px){.log-sidebar{position:fixed;bottom:20px;top:auto;right:20px;transform:none;width:calc(100vw - 40px);max-height:40vh}.log-sidebar.collapsed{transform:translateY(calc(100% - 60px))}.log-header{border-radius:20px 20px 0 0}.log-sidebar.collapsed .log-header{border-radius:20px}}@media (max-width:500px){.container{padding:20px}h1{font-size:18px;letter-spacing:2px}.button-grid{gap:15px}.action-button{font-size:12px}}