*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f5f7f9;color:#17202a}a{text-decoration:none}.app{min-height:100vh}.sidebar{width:250px;min-height:100vh;background:#10151b;color:#fff;position:fixed;padding:20px 15px}.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:bold;padding:10px;margin-bottom:25px}.logo-icon{width:40px;height:40px;background:#35b85a;border-radius:12px;display:grid;place-items:center}.connect-btn,.btn-primary{background:#35b85a;color:#fff;border:0;border-radius:10px;padding:12px 16px;font-weight:bold;cursor:pointer}.connect-btn{width:100%;margin-bottom:20px}.nav{display:flex;flex-direction:column;gap:6px}.nav a{color:#aeb7c2;padding:13px;border-radius:10px;font-weight:600}.nav a:hover,.nav a.active{background:#202a33;color:#fff}.content{margin-left:250px;padding:25px 30px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.header h1{margin:0;font-size:27px}.header p{color:#7b858f;margin-top:5px}.icon-btn{width:42px;height:42px;border:1px solid #e5e9ed;background:#fff;border-radius:10px;cursor:pointer}.card{background:#fff;border:1px solid #e5e9ed;border-radius:18px;padding:20px;box-shadow:0 8px 25px rgba(0,0,0,.07)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.dashboard{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.device-card{background:linear-gradient(135deg,#111920,#1d2c22);color:#fff;border-radius:18px;padding:25px}.device-card h2{margin:8px 0}.connected{color:#b8eac4;font-size:13px}.watch{height:220px;display:flex;justify-content:center;align-items:center}.watch img{max-height:190px;max-width:80%;object-fit:contain}.btn{border:0;padding:11px 17px;border-radius:10px;cursor:pointer;font-weight:bold}.btn-light{background:#fff}.btn-danger{background:#e5484d;color:#fff}.stat-title{color:#7b858f;font-size:13px}.stat-value{font-size:28px;font-weight:bold;margin-top:12px}.stat-unit{color:#7b858f;font-size:12px;margin-top:5px}.section{margin-top:25px}.section-title{display:flex;justify-content:space-between;margin-bottom:12px}.progress{height:8px;background:#e9edf0;border-radius:20px;overflow:hidden;margin-top:15px}.progress span{display:block;height:100%;background:#35b85a}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:14px;text-align:left;border-bottom:1px solid #e5e9ed}.table th{color:#7b858f;font-size:13px}.form{display:grid;gap:14px}.form label{display:block;color:#7b858f;font-size:12px;font-weight:bold;margin-bottom:6px}.form input,.form select{width:100%;padding:11px;border:1px solid #e5e9ed;border-radius:10px}.form-actions{display:flex;justify-content:flex-end}.device-list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.device-item{text-align:center}.device-item img{height:170px;max-width:100%;object-fit:contain}.badge{padding:5px 9px;border-radius:20px;background:#e9f8ed;color:#258c43;font-size:11px;font-weight:bold}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #e5e9ed}.setting-row:last-child{border:0}.setting-row p{margin:0;font-weight:bold}.setting-row small{display:block;color:#7b858f;margin-top:4px}.switch{position:relative;width:45px;height:25px}.switch input{display:none}.slider{position:absolute;inset:0;background:#ccd2d7;border-radius:30px}.slider:before{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+.slider{background:#35b85a}.switch input:checked+.slider:before{transform:translateX(20px)}.mobile-nav{display:none}@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.dashboard{grid-template-columns:1fr}.device-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.sidebar{display:none}.content{margin:0;padding:15px 12px 85px}.header h1{font-size:22px}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.dashboard{display:block}.device-card{margin-bottom:15px}.watch{height:180px}.watch img{max-height:150px}.device-list{grid-template-columns:1fr 1fr}.mobile-nav{position:fixed;display:flex;bottom:0;left:0;right:0;height:65px;background:#fff;border-top:1px solid #e5e9ed;z-index:100;justify-content:space-around}.mobile-nav a{color:#7b858f;font-size:11px;text-align:center;padding:8px;font-weight:bold}.mobile-nav a.active{color:#35b85a}}@media(max-width:430px){.device-list{grid-template-columns:1fr}.card{padding:15px}.stat-value{font-size:22px}}