:root { --bg:#f6f7f9; --fg:#1a1d21; --muted:#6b7280; --line:#e2e5e9; --blue:#1769ff; }
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; background:#fff; border-bottom:1px solid var(--line); }
.brand { font-weight:800; font-size:18px; color:var(--blue); text-decoration:none; }
nav { display:flex; align-items:center; gap:12px; }
main { max-width:880px; margin:24px auto; padding:0 16px; }
h1 { font-size:22px; } h2 { font-size:17px; }
.muted { color:var(--muted); } .small { font-size:13px; }
.row { display:flex; gap:10px; align-items:center; }
.row.between { justify-content:space-between; }
.inline { display:inline; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; margin:14px 0; }
.card.narrow { max-width:420px; }
/* sign-in card */
.authwrap { display:flex; justify-content:center; padding:48px 0; }
.card.auth { max-width:420px; width:100%; text-align:center; padding:34px 30px; }
.authlogo { height:46px; display:block; margin:0 auto 14px; }
.card.auth h1 { font-size:24px; margin:0 0 6px; }
.card.auth .muted { margin:0 0 22px; }
.authform { display:flex; flex-direction:column; gap:12px; }
.authform input { padding:13px 14px; font-size:16px; }
.authform button { width:100%; padding:13px; font-size:16px; font-weight:700; }
.authfoot { margin:18px 0 0; }
/* Single-column pages (device settings): keep every card the same, readable width. */
.narrowpage { max-width:620px; margin:0 auto; }
.narrowpage select { width:100%; padding:10px; font-size:15px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.device { display:flex; flex-direction:column; gap:7px; }
.frame { width:100%; height:140px; object-fit:cover; border-radius:8px; background:#eef0f3; display:block; }
.frame.noimg { display:flex; align-items:center; justify-content:center; color:#9aa1a9; font-size:13px; }
.device .row.grow, .grow { flex:1; }
input.name { font-weight:700; border:1px solid transparent; background:transparent; padding:4px; }
input.name:hover, input.name:focus { border-color:var(--line); background:#fff; }
strong.name { font-size:16px; }
.gear { text-decoration:none; font-size:18px; line-height:1; opacity:.7; }
.gear:hover { opacity:1; }
textarea { width:100%; padding:10px; font-size:15px; border:1px solid var(--line); border-radius:8px;
  box-sizing:border-box; font-family:inherit; resize:vertical; }
.hint { margin:4px 0 2px; }
input.mins { width:74px; padding:6px; }
input.prompt { padding:7px; font-size:13px; }
.device button { padding:7px 12px; font-size:13px; }
input { padding:10px; font-size:15px; border:1px solid var(--line); border-radius:8px; width:100%; }
button { padding:10px 16px; font-size:15px; border:0; border-radius:8px; background:var(--blue); color:#fff; cursor:pointer; }
button.link { background:none; color:var(--blue); padding:0; }
label { display:block; margin:10px 0 4px; font-weight:600; font-size:14px; }
.badge { font-size:12px; padding:2px 8px; border-radius:999px; background:#e7f5ea; color:#137333; }
.badge.alert { background:#fde7e7; color:#c5221f; }
.msg { background:#eef3ff; border:1px solid #cdddff; padding:8px 10px; border-radius:8px; }
.msg.error { background:#fde7e7; border-color:#f6b8b5; }
a { color:var(--blue); }
.check { display:flex; align-items:center; gap:8px; font-weight:500; margin:8px 0; }
.check input { width:auto; }
nav a { text-decoration:none; }
.frameitem { text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:6px; padding:8px; }
.frameitem .frame { height:120px; }
.pick { display:flex; align-items:center; justify-content:space-between; margin:0; font-weight:500; }
.pick input { width:auto; transform:scale(1.3); transform-origin:left center; cursor:pointer; }
button.danger { background:#c5221f; }
button.danger:disabled { background:#e3a9a7; cursor:default; }
.clitem { border:1px solid var(--line); border-radius:8px; padding:10px; margin:8px 0;
  display:flex; flex-direction:column; gap:6px; background:#fafbfc; }
.clitem input, .clitem select { font-size:14px; padding:8px; }
.clrule { gap:6px; flex-wrap:wrap; align-items:center; }
.clrule select, .clrule input { width:auto; }
.cl-options, .cl-value { max-width:170px; }
button.secondary { background:#eef0f3; color:var(--blue); }
.testcard { margin-top:12px; }
.testcard .frame { max-width:260px; height:auto; }
.testvals { list-style:none; padding:0; margin:8px 0; }
.testvals li { padding:3px 0; }
.testvals li.alerting { color:#c5221f; font-weight:600; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:10px 0 0; }
.kv dt { color:var(--muted); font-size:13px; }
.kv dd { margin:0; font-size:14px; }
.kv .warn { color:#b26a00; font-size:13px; }
.shares { list-style:none; padding:0; margin:6px 0; }
.shares li { padding:6px 0; border-bottom:1px solid var(--line); }
.pager { justify-content:center; }
.pgbtn { display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:8px;
  text-decoration:none; background:#fff; color:var(--blue); }
.pgbtn.disabled { color:#b8bdc4; border-color:#eee; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.on { background:#1fae4d; box-shadow:0 0 0 3px #1fae4d22; }
.dot.off { background:#b3b9c0; }
.offhint { background:#fff8e6; border:1px solid #f3e2b3; color:#7a6a2f; padding:6px 8px; border-radius:8px; }