/* Toggle button styles */
.toggle-btn {
  position: absolute;
  background: rgba(7, 9, 26, 0.75);
  border: 1px solid rgba(23, 255, 196, 0.25);
  color: rgba(244, 248, 255, 0.5);
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 1000;
  backdrop-filter: blur(8px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eye-icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  filter: invert(1) brightness(0.8);
}

.toggle-btn:hover .eye-icon {
  opacity: 0.8;
  filter: invert(1) brightness(1);
}

.toggle-btn:hover {
  background: rgba(7, 9, 26, 0.9);
  color: rgba(244, 248, 255, 0.8);
  border-color: rgba(23, 255, 196, 0.5);
}

.toggle-btn:active {
  transform: scale(0.95);
}

.toggle-header {
  top: 0.5rem;
  right: 0.5rem;
}

.toggle-readout {
  top: 0.5rem;
  right: 0.5rem;
}

.toggle-controls {
  top: 0.5rem;
  right: 0.5rem;
}

.toggle-footer {
  top: 0.5rem;
  right: 0.5rem;
}

/* Hidden state */
.app-header.hidden,
.controls-section.hidden,
.app-footer.hidden {
  display: none;
}

.readout-wrapper .timer-readout.hidden {
  display: none;
}

/* Adjust timer section when readout is hidden */
.timer-section {
  position: relative;
}