/* Wspólny wygląd ekranów programu świateł (ciemny, pod dotyk) */
:root {
  --bg: #0f1115; --bg2: #0b0d11; --card: #161920; --card2: #1a1d24; --hover: #1d2129;
  --line: #23272f; --line2: #2f3540; --text: #eceef1; --dim: #a3a9b4; --dim2: #8b919c;
  --ok: #3fb950; --ok-bg: #15251a; --ok-text: #a7f0b3; --warn: #f0c674; --warn-bg: #3a2f12;
  --red: #d9473f; --red-bg: #241819; --red-text: #ffb4ad; --blue: #3b82f6; --blue-bg: #172033;
  --gold-1: #c9a24a; --gold-2: #e8d9a8;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; user-select: none; }
a { color: #7ee08f; }
.hidden { display: none !important; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.err { background: var(--red); }
.btn { height: 52px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); color: var(--text);
  font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { transform: scale(0.98); }
.btn.sel { border: 2px solid var(--ok); background: #16261b; color: var(--ok-text); font-weight: 600; }
.btn.primary { border: none; background: #2f8f3e; color: #fff; font-weight: 700; }
.btn.danger { border: 1px solid #5a2b2b; background: var(--red-bg); color: var(--red-text); font-weight: 600; }
.btn.light { border: none; background: #e8eaee; color: #0f1115; font-weight: 700; }
.chip { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card2); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.chip.sel { border: 2px solid var(--ok); background: #16261b; color: var(--ok-text); font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.muted { color: var(--dim); } .muted2 { color: var(--dim2); }
.toggle { width: 56px; height: 32px; border-radius: 999px; background: #3a404b; position: relative; border: none; flex: none; }
.toggle::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle.on { background: #2f8f3e; } .toggle.on::after { left: 28px; }
/* nakładka "brak połączenia" */
#offline { position: fixed; inset: 0; background: rgba(11,13,17,.85); display: flex; align-items: center; justify-content: center; z-index: 50;
  font-size: 20px; font-weight: 600; text-align: center; padding: 30px; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #2a2e36; border: 1px solid var(--line2); padding: 12px 20px;
  border-radius: 12px; font-size: 15px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60; }
#toast.show { opacity: 1; }