body {
  color: #f1f5f9;
  background: #304058;
}

.header {
  color: #3b82f6;
  background: rgba(30, 41, 59, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#login-button {
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
  color: white;
}

.tabs {
  background: rgba(15, 23, 42, 0.7);
}

.tab {
  color: #cbd5e1;
  background: #304058;
}

.tab.active {
  color: #f8fafc;
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
}

.controls button {
  color: white;
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
}

.controls button:hover {
  background: linear-gradient(90deg, #4338ca, #2563eb);
}

.editor-panel {
  background: rgba(30, 41, 59, 0.5);
}

.output-panel {
  background: #1e293b;
}

.code-wrapper textarea {
  color: #e2e8f0;
  background: transparent;
}

.output {
  background-color: #959393;
}

.console {
  color: #0f0;
  background: #0f172a;
}

.show-more-menu button {
  color: whitesmoke !important;
  background: #0f172a;
}

.show-more-menu button:hover {
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
}

.line-numbers {
  color: #ffffff;
  background: #0f172a;
  border-right: 1px solid #ffffff;
}

/* Mobile Panel Toggle - Dark Theme */
.mobile-panel-toggle {
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-toggle-btn {
  background: #0f172a;
  color: #94a3b8;
}

.panel-toggle-btn.active {
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
  color: #ffffff;
}