/* ═══════════════════════════════════════════════
   YEAST MONITOR — Styles
   ═══════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0c0a09;
  font-family: 'DM Sans', sans-serif;
  color: #d6d3d1;
  min-height: 100vh;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d6d3d1;
  border: 2px solid #78716c;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb:hover {
  background: #fafaf9;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Loading spinner */
.yeast-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: #78716c;
  font-size: 18px;
}

.yeast-loading .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #d97706;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Connection indicator */
.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.connection-dot.connected { background: #22c55e; }
.connection-dot.disconnected { background: #ef4444; }
.connection-dot.waiting { background: #eab308; animation: pulse-dot 2s infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}