.header {
  display: flex; align-items: center; gap: 12px;
}

.title {
  font-size: 2rem; font-weight: 400; letter-spacing: 0.1em; color: var(--text);
}

.subtitle {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--text-secondary); margin-top: 4px;
}

.theme-toggle, .log-toggle {
  background: none; border: 2px solid var(--border); border-radius: 50%;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); transition: 0.2s; margin-left: 4px;
}

.theme-toggle:hover, .log-toggle:hover { background: var(--surface-alt); }

.controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px;
  background: var(--surface); padding: 14px 24px; border-radius: 48px;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  transition: background 0.3s, border-color 0.3s;
}

.control-group {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--text-secondary);
}

.control-label {
  font-weight: 500; white-space: nowrap; letter-spacing: 0.04em; color: var(--text);
}

.selector-group {
  display: flex; gap: 4px; background: var(--surface-alt);
  border-radius: 30px; padding: 3px;
}

.selector-btn {
  border: none; background: transparent; font-family: inherit; font-size: 0.8rem;
  font-weight: 500; color: var(--text-secondary); padding: 6px 14px; border-radius: 28px;
  cursor: pointer; transition: all 0.2s; letter-spacing: 0.03em; white-space: nowrap;
}

.selector-btn.active {
  background: var(--diff-active-bg); color: var(--diff-active-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.selector-btn:hover:not(.active) { background: var(--border); color: var(--text); }

.canvas-size-slider { display: flex; align-items: center; gap: 10px; }

.canvas-size-slider input[type="range"] {
  -webkit-appearance: none; width: 110px; height: 8px; background: var(--slider-track);
  border-radius: 4px; outline: none; cursor: pointer; transition: background 0.2s;
}

.canvas-size-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; background: var(--slider-thumb);
  border-radius: 50%; box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: transform 0.15s, box-shadow 0.15s; border: 2px solid transparent;
}

.canvas-size-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.canvas-size-slider input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.95); }

.size-value {
  font-weight: 600; font-size: 0.85rem; min-width: 45px; color: var(--text);
}

.mode-indicator {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; padding: 2px 8px; border-radius: 12px;
  background: var(--surface-alt); color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.mode-indicator .mode-dot {
  width: 6px; height: 6px; border-radius: 50%;
}

.mode-indicator .mode-dot.local { background: #4caf50; }
.mode-indicator .mode-dot.remote { background: #2196f3; }