/* ==========================================================================
   css/settings/desktop-and-server-stats.css
   Split from app.html (build 2026.10.08.9-beta), original lines 8115-8139.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* Desktop settings → Performance graphs */
.perf-graph { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:10px 12px 8px; }
.perf-head { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.perf-val { font-size:12.5px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.perf-graph canvas { width:100%; height:64px; display:block; }
.perf-legend { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-muted); margin-top:5px; }
/* Server Stats rows */
.ss-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:2px 16px; margin-bottom:8px; }
.ss-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; font-size:13.5px; border-bottom:1px solid var(--border); }
.ss-row:last-child { border-bottom:none; }
.ss-row > span:first-child { color:var(--text-muted); flex-shrink:0; }
.ss-row > span:last-child { color:var(--text-primary); font-weight:600; text-align:right; font-variant-numeric:tabular-nums; word-break:break-all; user-select:text; }
.ss-label { font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--text-muted); text-transform:uppercase; margin:22px 0 10px; }
/* Server Stats map (MapLibre + Protomaps pmtiles, dark) */
.ss-map-wrap { position:relative; height:260px; border-radius:12px; overflow:hidden; border:1px solid var(--border-strong); background:#0d0e14; margin-bottom:8px; }
.ss-map { position:absolute; inset:0; }
.ss-map .maplibregl-ctrl-attrib, .ss-map .maplibregl-ctrl-logo { opacity:.4; }
.ss-map-note { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:13px; pointer-events:none; text-align:center; padding:0 20px; }
.ss-map-legend { display:flex; gap:20px; font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.ss-map-legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.ss-dot.you { background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.ss-dot.edge { background:#f7a83e; box-shadow:0 0 0 3px rgba(247,168,62,.3); }
.ss-pin { width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.7); cursor:default; }
.ss-pin.you { background:var(--accent); }
.ss-pin.edge { background:#f7a83e; }