/* Overlay Control Panel for Broadcast Page - Integrative Resets */

.overlay-panel {
  margin-top: 2rem;
  padding: 1.25rem;
  background: #f5f9f6;
  border: 1px solid #d4e5d8;
  border-radius: 6px;
}

.overlay-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}

.overlay-panel-title {
  font-family: 'Philosopher', Georgia, serif; font-size: 1rem; font-weight: 500;
  color: #333;
}

.overlay-panel-hint {
  font-family: 'Lato', sans-serif; font-size: 11px; color: #999;
  letter-spacing: 0.05em;
}

.overlay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.overlay-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #d4e5d8;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  font-family: 'Lato', sans-serif;
}

.overlay-btn:hover {
  border-color: #5c9269;
}

.overlay-btn.active {
  border-color: #5c9269;
  background: rgba(92, 146, 105, 0.08);
}

.overlay-btn-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: #999;
  transition: color 0.3s;
}

.overlay-btn.active .overlay-btn-icon { color: #5c9269; }

.overlay-btn-icon svg { width: 20px; height: 20px; }

.overlay-btn-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #999;
  transition: color 0.3s;
}

.overlay-btn.active .overlay-btn-label { color: #333; }

.overlay-btn-status {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #999;
}

.overlay-btn.active .overlay-btn-status { color: #5c9269; }

/* Overlay Input Fields */
.overlay-fields {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #d4e5d8;
  display: none;
}

.overlay-fields.visible { display: block; }

.overlay-field {
  margin-bottom: 0.75rem;
}

.overlay-field label {
  display: block;
  font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #999; margin-bottom: 0.3rem;
}

.overlay-field input {
  width: 100%; padding: 0.5rem 0.75rem;
  font-family: 'Lato', sans-serif; font-size: 13px;
  border: 1px solid #d4e5d8; border-radius: 4px;
  background: #fff; color: #333;
  box-sizing: border-box;
}

.overlay-field input:focus {
  outline: none; border-color: #5c9269;
}

/* Timer Controls */
.overlay-timer-controls {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 0.5rem;
}

.overlay-timer-btn {
  padding: 0.4rem 0.75rem;
  font-family: 'Lato', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid #d4e5d8; border-radius: 4px;
  background: #fff; color: #333;
  cursor: pointer; transition: border-color 0.3s;
}

.overlay-timer-btn:hover { border-color: #5c9269; }

@media (max-width: 600px) {
  .overlay-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}