/* LoopLogger website — iOS dark theme, matching the device (D019) */
:root{
  --bg:#000; --card:#1c1c1e; --card2:#2c2c2e; --txt:#fff;
  --label:#8e8e93; --sep:#38383a; --accent:#0a84ff; --orange:#ff9f0a;
  --red:#f00; --green:#0f0; --blue:#00f; --yellow:#ff0;
  --redsoft:#ff453a; --greensoft:#32d74b; --bluesoft:#0a84ff; --yellowsoft:#ffd60a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
main{max-width:1150px;margin:0 auto;padding:20px 16px 60px}
footer{color:var(--label);text-align:center;padding:20px;font-size:12px;
  border-top:1px solid var(--sep)}
h1{font-size:26px;margin:14px 0 18px}
h2{font-size:17px;margin:2px 0 12px}
.muted{color:var(--label);font-size:13px}
.hidden{display:none!important}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-bottom:1px solid var(--sep);padding:10px 18px;
  position:sticky;top:0;z-index:10}
.brand{font-size:20px;font-weight:700}
.b1{color:var(--txt)} .b2{color:var(--accent)}
.nav-right{display:flex;gap:16px;align-items:center}
.navuser{color:var(--label)}
.navlink{color:var(--txt)}

/* cards & buttons */
.card{background:var(--card);border:1px solid var(--sep);border-radius:14px;
  padding:16px 18px;margin-bottom:16px}
.btn{background:var(--card);border:1px solid var(--sep);color:var(--txt);
  border-radius:999px;padding:8px 18px;font-size:14px;cursor:pointer}
.btn:hover{border-color:var(--label)}
.btn.accent{background:var(--accent);border-color:var(--accent)}
.btn.small{padding:4px 12px;font-size:13px}
.btn.active{background:var(--accent);border-color:var(--accent)}
.btn.danger{color:var(--redsoft)}
.btn.wide{width:100%}
.error{background:#3a1d1d;border:1px solid #7a2e2e;color:#ffb4ab;
  border-radius:10px;padding:8px 12px;margin-bottom:12px}
.ok{background:#12331b;border:1px solid #1f5c30;color:#8fe3a5;
  border-radius:10px;padding:8px 12px;margin-bottom:12px}
input{background:var(--card2);border:1px solid var(--sep);color:var(--txt);
  border-radius:10px;padding:9px 12px;font-size:15px;width:100%;margin:4px 0 14px}
label{color:var(--label);font-size:13px}

/* login */
.login-wrap{max-width:380px;margin:6vh auto 0}
.login-brand{text-align:center;margin-bottom:22px}
.signal{width:260px;height:40px}
.wordmark{font-size:42px;font-weight:800;letter-spacing:-1px;margin-top:6px}
.tagline{color:var(--label);letter-spacing:4px;font-size:12px;margin-top:2px}
.login-card{padding:22px}

/* device grid (home) */
.devgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.devcard{display:block;color:var(--txt)}
.devcard:hover{border-color:var(--accent)}
.devname{font-size:19px;font-weight:600}
.devowner{color:var(--label);font-size:13px}
.devstate{margin-top:8px;font-size:14px}
.devstate.online{color:var(--greensoft)}
.devstate.offline{color:var(--label)}
.devmeta{color:var(--label);font-size:12px;margin-top:2px}
.empty{text-align:center;padding:40px}

/* device page */
.devhead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.back{color:var(--label)}
.headicons{margin-left:auto;display:flex;gap:12px;align-items:center;color:var(--label)}
.icon.on-green{color:var(--greensoft)} .icon.on-blue{color:var(--accent)}
.icon.on-red{color:var(--redsoft)} .icon{font-size:18px}
.hdrtime{font-size:13px;color:var(--label)}
.tabs{display:flex;gap:8px;margin:14px 0}
.tab{flex:1;background:var(--card);border:1px solid var(--sep);color:var(--txt);
  padding:10px;border-radius:999px;font-size:15px;cursor:pointer}
.tab.active{background:var(--accent);border-color:var(--accent)}

/* dashboard tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tile{background:var(--card);border:1px solid var(--sep);border-radius:14px;
  padding:0 0 16px;overflow:hidden;text-align:center}
.tile .bar{height:5px}
.tile .name{color:var(--txt);font-size:15px;margin:12px 0 2px;font-weight:600}
.tile .value{font-size:40px;font-weight:700;margin:6px 0 0}
.tile .value.alert{font-size:26px}
.tile .unit{font-size:18px;color:var(--label);margin-left:6px}
.tile .minmax{color:var(--label);font-size:13px;margin-top:6px}
.tile .value.nc{color:var(--redsoft)}
.tile .value.ol{color:var(--orange)}

/* statistics */
.statrow{display:flex;justify-content:space-between;border-bottom:1px solid var(--sep);
  padding:9px 2px;font-size:15px}
.statrow span:first-child{color:var(--label)}
.stattable{width:100%;border-collapse:collapse;margin-top:14px}
.stattable th{color:var(--label);font-weight:500;text-align:right;padding:8px 10px;
  border-bottom:1px solid var(--sep)}
.stattable td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--sep)}
.stattable td:first-child,.stattable th:first-child{text-align:left}

/* graphs */
.graphcard{padding:14px}
.graphbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.legend{display:flex;gap:14px;font-size:13px;flex:1}
.legend .li{display:flex;align-items:center;gap:6px;color:var(--label)}
.legend .sw{width:14px;height:4px;border-radius:2px;display:inline-block}
.grbtns{display:flex;gap:6px}
#graph{width:100%;height:auto;background:var(--card);border-radius:8px}

/* channel colors (original saturated device colors) */
.c0{color:var(--red)} .c1{color:var(--green)} .c2{color:var(--blue)} .c3{color:var(--yellow)}

/* admin */
.admintable{width:100%;border-collapse:collapse}
.admintable th{color:var(--label);text-align:left;font-weight:500;
  border-bottom:1px solid var(--sep);padding:8px 6px}
.admintable td{border-bottom:1px solid var(--sep);padding:8px 6px}
.inline-form{display:inline-flex;gap:8px;align-items:center;margin:0}
.inline-form input{width:auto;margin:0}
.actions{display:flex;gap:10px;flex-wrap:wrap}

.offlinebar{position:fixed;left:0;right:0;bottom:0;background:#3a1d1d;
  color:#ffb4ab;text-align:center;padding:10px;border-top:1px solid #7a2e2e}