:root {
 --bg:#171918;
 --card:#222522;
 --text:#eee9dc;
 --muted:#999b92;
 --gold:#c6a66b;
 --green:#72d49a;
 --red:#e17d79;
 --radius:14px;
}

* {
 box-sizing:border-box;
}

body {
 margin:0;
 padding:18px;
 background:var(--bg);
 color:var(--text);
 font-family:Arial,sans-serif;
 font-size:13px;
}

.container {
 max-width:600px;
 margin:auto;
}

.header {
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin:12px 0 24px;
}

.logo {
 color:var(--gold);
 font-size:22px;
 font-weight:700;
 letter-spacing:1px;
}

.subtitle {
 color:var(--muted);
 font-size:10px;
 letter-spacing:2px;
 margin-top:5px;
}

.status {
 background:#293d30;
 color:var(--green);
 border-radius:20px;
 padding:7px 11px;
 font-size:10px;
}

.overview {
 background:var(--card);
 border:1px solid #343831;
 padding:18px;
 border-radius:var(--radius);
 margin-bottom:25px;
}

.section {
 color:var(--muted);
 font-size:10px;
 letter-spacing:1.5px;
 margin-bottom:12px;
}

.count {
 font-size:26px;
 font-weight:700;
 margin-bottom:15px;
}

.network {
 display:flex;
 justify-content:space-between;
 padding-top:10px;
 border-top:1px solid #393c36;
 margin-top:9px;
 color:var(--muted);
 font-size:11px;
}

.online { color:var(--green); }
.offline { color:var(--red); }

.grid {
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:12px;
}

.device {
 background:var(--card);
 border:1px solid #343831;
 border-radius:var(--radius);
 padding:16px;
}

.device-top {
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:22px;
}

.device-icon {
 font-size:23px;
 color:var(--gold);
}

.device-name {
 font-weight:600;
 font-size:13px;
}

.device-state {
 font-size:10px;
 color:var(--muted);
 margin-top:6px;
}

.switch {
 width:42px;
 height:23px;
 border-radius:20px;
 background:#444941;
 position:relative;
 cursor:pointer;
 border:0;
}

.switch::after {
 content:"";
 position:absolute;
 width:17px;
 height:17px;
 border-radius:50%;
 background:#eee;
 top:3px;
 left:3px;
 transition:.2s;
}

.switch.on {
 background:var(--gold);
}

.switch.on::after {
 left:22px;
 background:#171918;
}

.actions {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 margin-top:20px;
}

.btn {
 padding:13px;
 border:0;
 border-radius:9px;
 font-weight:600;
 font-size:12px;
 cursor:pointer;
}

.btn-on {
 background:var(--gold);
 color:#171918;
}

.btn-off {
 background:#343a35;
 color:var(--text);
}

.footer {
 text-align:center;
 color:var(--muted);
 font-size:10px;
 margin:28px 0 10px;
}

button:disabled {
 opacity:.5;
 cursor:wait;
}

.cloud-panel label { display:block; color:var(--muted); font-size:11px; margin:12px 0 6px; }
.cloud-panel input { width:100%; padding:12px; border-radius:8px; border:1px solid #41463f; background:#171918; color:var(--text); outline:none; }
.cloud-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }
.hint { display:block; color:var(--muted); margin-top:10px; line-height:1.5; }