*{margin:0;padding:0;box-sizing:border-box}
body{font:16px Arial;line-height:1.6;color:#333;background:#f4f4f4;padding:20px;max-width:1200px;margin:0 auto}
.container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0001}
.menu-btn{display:none;position:fixed;top:20px;right:20px;z-index:1000;background:#2c3e50;color:#fff;border:0;padding:12px;font-size:20px;border-radius:5px;cursor:pointer;width:50px;height:50px;opacity:.7}
.menu{background:#fff;padding:15px;border-radius:8px;margin-bottom:20px;box-shadow:0 2px 4px #0001;display:flex;flex-wrap:wrap;gap:10px}
.menu a{text-decoration:none;color:#2c3e50;padding:8px 16px;border-radius:4px;background:#f8f9fa;transition:.3s}
.menu a:hover{background:#e9ecef;color:#000}
.switch{position:relative;display:inline-block;width:60px;height:34px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:34px}
.slider:before{content:'';position:absolute;height:26px;width:26px;left:4px;bottom:4px;background:#fff;transition:.4s;border-radius:50%}
input:checked+.slider{background:#2196F3}
input:checked+.slider:before{transform:translateX(26px)}
.gpio-status{font-weight:700;padding:8px 16px;border-radius:4px;background:#f8f9fa}
button,.gpio-button{background:#2c3e50;color:#fff;padding:12px 20px;border:0;border-radius:4px;cursor:pointer;transition:.3s}
button:hover,.gpio-button:hover{background:#34495e}
.gpio-button:active{transform:scale(.98)}
h1{color:#2c3e50;margin-bottom:20px;font-size:24px}
table{width:100%;border-collapse:collapse;box-shadow:0 2px 5px #0001}
td,th{border:1px solid #ddd;padding:8px;text-align:left}
tr:nth-child(even){background:#f2f2f2}
tr:hover{background:#ddd}
input[type=text],input[type=password],select,textarea{width:100%;padding:12px;margin:8px 0;border:1px solid #ddd;border-radius:4px;font-size:16px}
textarea{height:200px}
@media (max-width:768px){
.menu-btn{display:block}
.menu{display:none;position:fixed;inset:0 0 auto;background:#fff;flex-direction:column;padding:60px 20px 20px;z-index:999}
.menu.active{display:flex}
.menu a{text-align:center}
.switch{width:50px;height:28px}
.slider:before{height:20px;width:20px}
input:checked+.slider:before{transform:translateX(22px)}
}