:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1b302d;background:#f5f7f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{height:80px;background:white;border-bottom:1px solid #e2e8e5;display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{display:flex;align-items:center;gap:12px;font-size:19px;letter-spacing:-.5px}.brand b span{font-size:14px;color:#81908a;font-weight:400;letter-spacing:0}.mark{display:grid;place-items:center;background:#165d4c;color:white;width:34px;height:36px;border-radius:9px;font-size:27px;font-family:Georgia;font-style:italic}.readonly{color:#55726a;font-size:12px;background:#eef5f1;border-radius:20px;padding:8px 12px}main{max-width:1450px;margin:auto;padding:44px 5% 24px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:650;color:#658078}h1{font-size:34px;letter-spacing:-1.2px;margin:9px 0}p{font-size:14px;color:#7c8a84;line-height:1.6;margin:0 0 14px}.actions{display:flex;gap:10px;align-items:center}button{border:1px solid #d7e2dc;background:white;padding:12px 16px;border-radius:7px;color:#39584e;font:inherit;font-size:12px;font-weight:550;cursor:pointer}button:hover{background:#edf4ef}button.primary{background:#175c4b;border-color:#175c4b;color:white}button.primary:hover{background:#104737}button:focus-visible,input:focus-visible{outline:3px solid #a1d9c6;outline-offset:2px}.connection{display:flex;justify-content:space-between;align-items:center;background:#edf2ef;border:1px solid #e0e8e2;padding:16px 20px;border-radius:8px;margin-top:24px;font-size:12px}.connection>div{display:flex;align-items:center;gap:10px}.connection strong{font-weight:600}.connection #detail{color:#7b8c83;margin-left:8px}.dot{width:7px;height:7px;background:#a0ada5;border-radius:50%;flex-shrink:0}.dot.live{background:#21a774;box-shadow:0 0 0 4px #d2ede0}.dot.demo{background:#d4a248}.topic{display:flex;align-items:center;gap:14px;margin:17px 0 35px;font-size:12px;color:#64796f}.topic>span{font-size:9px;letter-spacing:1.5px;border:1px solid #dbe4de;padding:5px 7px;border-radius:4px}code{font-size:11px;overflow-wrap:anywhere}.sectiontitle{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}h2{font-size:16px;margin:0;letter-spacing:-.3px}.sectiontitle>span{font-size:11px;color:#8b9891}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{background:white;border:1px solid #e0e8e2;border-radius:9px;padding:21px 20px;min-height:116px}.card.featured{border-top:3px solid #388370;background:#fff}.label{display:block;color:#71847a;font-family:ui-monospace,SFMono-Regular,monospace;font-size:10px;overflow-wrap:anywhere;letter-spacing:.3px}.value{font-size:32px;line-height:1.2;font-weight:550;letter-spacing:-1px;margin-top:16px;display:block;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.value small{font-size:12px;color:#97a39b;font-weight:400;letter-spacing:0}.card.featured .value{color:#1d6a55}.metadata{display:grid;grid-template-columns:1fr 2fr 1fr 1.5fr;margin-top:26px;padding:22px 0;border-top:1px solid #dfe6e1;border-bottom:1px solid #dfe6e1;gap:15px}.metadata span{font-size:9px;color:#8c9992;letter-spacing:1.4px;display:block;margin-bottom:9px}.metadata strong{font-size:12px;font-weight:500}footer{display:flex;justify-content:space-between;font-size:10px;color:#9ba69f;padding:24px 0}footer b{margin:0 8px}dialog{border:1px solid #dce6df;border-radius:14px;padding:26px;max-width:510px;width:calc(100% - 30px);box-shadow:0 30px 90px #163c352e}dialog::backdrop{background:#142a2566;backdrop-filter:blur(3px)}.modalhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.modalhead button{padding:6px 10px}label{display:block;font-size:12px;color:#4e6b5e;margin:14px 0}input{display:block;width:100%;padding:12px;margin-top:7px;border:1px solid #d8e3db;border-radius:6px;font:inherit;color:#254c3d}.hint{font-size:11px}#error{font-size:12px;color:#b54c3b;margin-top:12px}dialog .actions{justify-content:flex-end}dialog p{font-size:12px}@media(min-width:1400px){.cards{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:950px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.heading{align-items:flex-start;flex-direction:column}.connection #detail{display:none}}@media(max-width:620px){main{padding-top:28px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{padding:17px 13px}.label{font-size:9px}.value{font-size:27px}.metadata{grid-template-columns:1fr 1fr}.brand b span{display:none}h1{font-size:29px}.sectiontitle>span{font-size:9px}footer{gap:20px}.topic{margin-bottom:26px}.actions button{padding:11px 12px}}

.connection>div{flex-wrap:wrap}.connection #detail{margin-left:0;flex-basis:100%;line-height:1.6}@media(max-width:950px){.connection #detail{display:block}}

/* MQTT Test */
.metadata{grid-template-columns:1fr 2fr 1fr}header{height:72px}main{padding-bottom:38px}.connection{padding:14px 20px}.connection>div{gap:10px}.connection #detail{display:none}@media(max-width:620px){.metadata{grid-template-columns:1fr 1fr}.metadata>div:last-child{grid-column:1/-1}}