/* ========================================
   DEVELOPER PANEL
   For testing during development
   ======================================== */

.dev-panel {
  max-width: 40vw;
  background: var(--color-bg-elevated);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.dev-panel-header {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-dark);
  border-bottom: var(--border-width) solid var(--color-border);
}

.dev-panel-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-warning);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.dev-panel-content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.dev-panel-btn {
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-primary);
  background: var(--color-bg-dark);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dev-panel-btn:hover:not(:disabled) {
  border-color: var(--color-accent-gold);
  background: var(--panel-bg-hover);
}

.dev-panel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dev-panel-output {
  padding: var(--space-md);
  background: var(--color-bg-darkest);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  min-height: calc(var(--vw) * 5);
  max-height: calc(var(--vw) * 15);
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-panel-output:empty::before {
  content: 'Output will appear here...';
  color: var(--color-text-tertiary);
}

.dev-panel-output .success {
  color: var(--color-success);
}

.dev-panel-output .error {
  color: var(--color-danger);
}