:root { --bg:#0f1115; --panel:#181b22; --line:#2a2f3a; --text:#e9ecf2; --muted:#8b93a3; --on:#ffb938; --ok:#3ecf8e; --bad:#ff6b6b; --blue:#5aa9ff; --violet:#b78cff; }
@media (prefers-color-scheme: light) { :root { --bg:#f2f4f8; --panel:#fff; --line:#dde2ea; --text:#1a1d24; --muted:#667085; --on:#d98200; --ok:#1fa971; --bad:#d83a3a; --blue:#2f7fd8; --violet:#7c4dff; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; padding:20px; }
main { max-width:1100px; margin:0 auto; }
main:has(#v-pages:not([hidden])) { max-width:1700px; }
h1 { margin:0 0 2px; font-size:1.6rem; letter-spacing:-.02em; }
.sub { color:var(--muted); margin-bottom:16px; }
.bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
button, select, input { font:inherit; color:var(--text); }
.pill { border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:7px 14px; cursor:pointer; }
.pill.act { border-color:var(--on); color:var(--on); }
.pill:active { transform:scale(.97); }
.groups { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.grp { display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px 8px 6px 12px; }
.grp b { font-weight:600; }
.grp button { border:1px solid var(--line); background:none; border-radius:8px; padding:3px 10px; cursor:pointer; }
h2 { font-size:.95rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:22px 2px 8px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px; transition:border-color .2s, box-shadow .2s; }
.card.on { border-color:var(--on); box-shadow:0 0 22px -10px var(--on); }
.card.off-line { opacity:.55; border-style:dashed; }
.card.inactive { opacity:.4; }
.row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.name { font-weight:700; font-size:1.05rem; }
.badge { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.badge.tuya { color:var(--violet); border-color:var(--violet); }
.badge.ewelink { color:var(--blue); border-color:var(--blue); }
.badge.zigbee { color:var(--ok); border-color:var(--ok); }
.cfgset { border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin:4px 0; display:flex; flex-direction:column; gap:4px; }
.scbar { display:flex; height:22px; border-radius:6px; overflow:hidden; margin:2px 0 4px; }
.scbar span { flex:1; display:flex; align-items:center; justify-content:flex-start; padding-left:5px; font-size:.68rem; color:#fff; text-shadow:0 0 3px rgba(0,0,0,.6); }
.sctab input[type=color] { width:44px; height:28px; padding:0; border:1px solid var(--line); border-radius:6px; background:none; }
.cfgset legend { font-size:.8rem; color:var(--muted); padding:0 4px; }
.badge.myiot { color:var(--on); border-color:var(--on); }
details.more { font-size:.8rem; color:var(--muted); }
details.more summary { cursor:pointer; }
details.more table { width:100%; margin-top:4px; border-collapse:collapse; }
details.more td { padding:2px 0; vertical-align:top; border-bottom:1px solid var(--line); }
details.more td:last-child { text-align:right; color:var(--text); font-weight:600; word-break:break-word; padding-left:8px; }
.meta { color:var(--muted); font-size:.8rem; }
.props { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.85rem; color:var(--muted); }
.props b { color:var(--text); }
.err { color:var(--bad); font-size:.8rem; word-break:break-word; }
.sw { border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:6px 14px; cursor:pointer; min-width:92px; font-weight:600; }
.card.on .sw { background:var(--on); border-color:var(--on); color:#1a1d24; }
.sw[disabled] { opacity:.5; cursor:not-allowed; }
.sw.busy { animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.4; } }
.link { background:none; border:0; color:var(--muted); cursor:pointer; padding:0; font-size:.8rem; text-decoration:underline; }
form.edit { display:grid; gap:6px; border-top:1px solid var(--line); padding-top:8px; }
form.edit label { font-size:.75rem; color:var(--muted); display:grid; gap:2px; }
form.edit input { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:5px 8px; }
form.edit .actions { display:flex; gap:8px; }
table.scan { width:100%; border-collapse:collapse; margin-top:8px; }
table.scan th { text-align:left; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:6px 8px; border-bottom:1px solid var(--line); }
table.scan td { padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
table.scan code { font-size:.8rem; color:var(--muted); }
.tag { font-size:.72rem; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.tag.warn { color:var(--on); border-color:var(--on); }
.tag.bad { color:var(--bad); border-color:var(--bad); }
.tag.ok { color:var(--ok); border-color:var(--ok); }
.progress { height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin:10px 0; }
.progress i { display:block; height:100%; background:var(--on); width:0; transition:width .4s linear; }
.hint { color:var(--muted); font-size:.85rem; }
.empty { color:var(--muted); text-align:center; padding:40px 0; }
.checkline { display:flex; gap:8px; align-items:center; font-size:.85rem; color:var(--muted); }
#toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:9px 16px; display:none; max-width:90vw; }
#toast.bad { border-color:var(--bad); color:var(--bad); }
/* cases à cocher : toujours à gauche de leur légende, sur une même ligne cliquable (les formulaires d'édition empilaient case et texte) */
form.edit label.checkline, .cfgset label.checkline, label.checkline { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; font-size:.9rem; color:var(--text); padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); cursor:pointer; }
label.checkline:hover { border-color:color-mix(in srgb,var(--on) 50%,var(--line)); }
label.checkline > input[type=checkbox], form.edit label.checkline > input[type=checkbox] { flex:none; width:18px; height:18px; margin:0; padding:0; border:0; background:none; accent-color:var(--on); cursor:pointer; }