*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;color:#fff}.app{max-width:800px;margin:0 auto;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}.header h1{font-size:24px;font-weight:600}.connection-status{padding:6px 12px;border-radius:20px;font-size:12px;background:#ffffff1a}.connection-status.connected{background:#2ecc7133;color:#2ecc71}.control-panel{background:#ffffff0d;border-radius:16px;padding:30px;margin-bottom:20px}.door-status{display:flex;align-items:center;gap:20px;margin-bottom:30px}.status-icon{width:80px;height:80px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;font-size:40px;transition:all .3s ease}.status-icon.open{background:#e74c3c33}.status-text h2{font-size:20px;margin-bottom:8px}.door-state{font-size:16px;color:#2ecc71}.door-state.open{color:#e74c3c}.person-status{color:#f39c12;font-size:14px;margin-top:5px}.control-buttons{display:flex;flex-direction:column;gap:15px}.btn{padding:15px 30px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.quick-actions{display:flex;gap:10px}.btn-secondary{flex:1;background:#ffffff1a;color:#fff}.btn-secondary:hover:not(:disabled){background:#fff3}.auto-close-toggle{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}.auto-close-toggle label{display:flex;align-items:center;gap:10px;cursor:pointer}.auto-close-toggle input[type=checkbox]{width:20px;height:20px;cursor:pointer}.info-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}@media (max-width: 600px){.info-panel{grid-template-columns:1fr}}.device-info,.statistics{background:#ffffff0d;border-radius:16px;padding:20px}.device-info h3,.statistics h3,.logs-panel h3{font-size:16px;margin-bottom:15px;color:#ffffffb3}.info-grid{display:flex;flex-direction:column;gap:10px}.info-item{display:flex;justify-content:space-between}.info-item .label{color:#ffffff80;font-size:14px}.info-item .value{font-size:14px}.info-item .value.online{color:#2ecc71}.info-item .value.offline{color:#e74c3c}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-item{text-align:center}.stat-value{display:block;font-size:24px;font-weight:600;color:#667eea}.stat-label{font-size:12px;color:#ffffff80}.logs-panel{background:#ffffff0d;border-radius:16px;padding:20px}.logs-list{max-height:200px;overflow-y:auto}.log-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px}.log-action{color:#667eea}.log-source{color:#ffffff80}.log-time{color:#ffffff4d}.no-logs{text-align:center;color:#ffffff4d;padding:20px}.notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%);padding:15px 30px;border-radius:10px;font-size:14px;animation:slideUp .3s ease}.notification.success{background:#2ecc71e6}.notification.error{background:#e74c3ce6}.notification.info{background:#3498dbe6}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}