:root { --bg:#111418; --card:#1c2128; --txt:#e8ecf1; --dim:#8b95a1; --lvl:#3a4350; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--txt);
       font-family:system-ui,-apple-system,Roboto,sans-serif; }
main { max-width:480px; margin:0 auto; padding:12px 16px 24px; }
header { display:flex; justify-content:space-between; align-items:baseline; }
h1 { font-size:1.1rem; margin:0; }
button { width:100%; margin-top:12px; padding:16px; font-size:1.2rem; font-weight:700;
         border:0; border-radius:12px; background:#2e86de; color:#fff; }
button:disabled { background:#3a4350; color:var(--dim); }
button.sub { padding:10px; font-size:.95rem; background:var(--card); color:var(--dim); }
.msg { text-align:center; color:var(--dim); font-size:.9rem; min-height:1.3em; margin-top:6px; }

/* Liaison avec le boitier */
#conn { font-size:.8rem; color:var(--dim); }
#conn.off { color:#ff6b6b; }

/* RSSI en grand, colore selon le niveau */
#big { margin-top:12px; border-radius:16px; padding:18px 12px; text-align:center;
       background:var(--lvl); transition:background .4s; }
#rssi { font-size:5.5rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
#rssi small { font-size:1.4rem; font-weight:600; }
#lvl { font-size:1.5rem; font-weight:700; margin-top:4px; }
#trend { font-size:1rem; margin-top:4px; min-height:1.2em; }

.grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; }
.cell { background:var(--card); border-radius:12px; padding:10px; text-align:center; }
.cell b { display:block; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.cell span { font-size:.75rem; color:var(--dim); }
#age.stale { color:#ff9f43; }

#chart { width:100%; height:170px; margin-top:12px; background:var(--card); border-radius:12px; }

.opts { display:flex; gap:20px; justify-content:center; margin-top:10px; color:var(--dim); }
.opts label { display:flex; align-items:center; gap:6px; }

/* Carte */
#map { width:100%; height:360px; margin-top:18px; border-radius:12px; background:var(--card); }
.leaflet-bar a.locate { display:flex; align-items:center; justify-content:center; }
.leaflet-bar a.locate svg { width:18px; height:18px; }
.legend { background:#1c2128dd; color:var(--txt); padding:4px 8px 3px; border-radius:6px; font-size:11px;
          display:flex; flex-wrap:wrap; justify-content:space-between; width:130px; }
.legend i { flex-basis:100%; height:8px; border-radius:4px; margin-bottom:2px;
            background:linear-gradient(to right, #6c3483, #2471a3, #b7950b, #e67e22, #c0392b); }

/* Gestion des points (plein ecran par-dessus la page) */
dialog { width:100%; max-width:480px; height:100%; max-height:100%; margin:0 auto; padding:12px 16px;
         border:0; background:var(--bg); color:var(--txt); }
dialog::backdrop { background:#000a; }
dialog h2 { font-size:1.1rem; margin:0; }
#ptsClose { width:auto; margin:0; padding:6px 12px; font-size:1rem; background:var(--card); }
.row { display:flex; gap:8px; }
.row button { padding:10px; font-size:1rem; }
#ptsMsg { text-align:left; }
#ptsList { list-style:none; padding:0; margin:8px 0 0; }
#ptsList li { display:flex; align-items:center; gap:10px; background:var(--card); border-radius:10px;
              padding:8px 10px; margin-bottom:6px; font-size:.85rem; }
#ptsList i { width:14px; height:14px; border-radius:50%; flex:none; }
#ptsList div { flex:1; min-width:0; }
#ptsList small { display:block; color:var(--dim); }
#ptsList li button { width:auto; margin:0; padding:6px 10px; font-size:.85rem; background:#3a4350; }

footer { margin-top:14px; font-size:.75rem; color:var(--dim); text-align:center; }
#log { margin:10px 0 0; font-size:.7rem; white-space:pre-wrap; word-break:break-all; }