:root { color-scheme: dark; }
html, body { background: oklch(0.16 0.01 260); }

#login-view:not(.hidden) { display: flex; }

.live-dot { width: 10px; height: 10px; border-radius: 9999px; display: inline-block; flex-shrink: 0; }
.live-dot.on { background: oklch(0.75 0.18 155); box-shadow: 0 0 10px oklch(0.75 0.18 155 / 0.8); }
.live-dot.off { background: oklch(0.6 0.05 20); }

.match { border-left: 3px solid var(--mcolor, oklch(0.75 0.18 155)); }
.match .msg {
  white-space: pre-wrap; overflow-wrap: break-word; font-size: 0.9rem;
  background: oklch(0.2 0.015 260); border-radius: 0.5rem; padding: 0.6rem 0.75rem;
}
.dot { width: 12px; height: 12px; border-radius: 9999px; display: inline-block; flex-shrink: 0; }

.group-card { border-left: 3px solid var(--gcolor, oklch(0.4 0.03 260)); }

.switch { position: relative; width: 40px; height: 23px; flex-shrink: 0; cursor: pointer; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; margin: 0; }
.switch .slider { position: absolute; inset: 0; background: oklch(0.35 0.03 260); border-radius: 9999px; transition: background 0.2s; }
.switch .slider:before {
  content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px;
  background: #fff; border-radius: 9999px; transition: transform 0.2s;
}
.switch input:checked + .slider { background: oklch(0.75 0.18 155); }
.switch input:checked + .slider:before { transform: translateX(17px); }
.switch input:focus-visible + .slider { outline: 2px solid oklch(0.75 0.18 155); outline-offset: 2px; }

input[type="color"].color-pick {
  width: 36px; height: 32px; padding: 2px; border-radius: 0.5rem; cursor: pointer;
  background: oklch(0.22 0.015 260); border: 1px solid oklch(0.32 0.02 260);
}
.swatch { width: 26px; height: 26px; border-radius: 9999px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch:hover { transform: scale(1.12); }
.swatch.current { border-color: #fff; }

#toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: 0.6rem; max-width: min(380px, calc(100vw - 2rem)); }
.toast {
  display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer;
  border-left: 3px solid var(--mcolor, oklch(0.75 0.18 155));
  animation: toast-in 0.25s ease-out;
}
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.msg-full {
  white-space: pre-wrap; overflow-wrap: break-word; font-size: 0.9rem;
  background: oklch(0.2 0.015 260); border-radius: 0.5rem; padding: 0.75rem;
  max-height: 50vh; overflow: auto;
}

@media (max-width: 640px) {
  .stats { overflow-x: auto; }
  input, select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  * { transition: none !important; }
}