/* BASE64 page styles */
:root {
  --base64-green-1: #0b4027;
  --base64-green-2: #0f5b36;
  --base64-green-3: #1ea362;
}

.base64-hero {
  background: radial-gradient(800px 420px at 10% 0%, rgba(30, 163, 98, 0.25), transparent 60%),
    linear-gradient(135deg, var(--base64-green-1), var(--base64-green-2));
  border-bottom: 1px solid rgba(30, 163, 98, 0.35);
  color: #e8f5ed;
}

.base64-hero .badge {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d9f1e4;
}

.mode-btn {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #e8f5ed;
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.15s ease;
}

.mode-btn.active {
  background: linear-gradient(135deg, #27c277, #1ea362);
  border-color: #27c277;
  color: #0b1a12;
  box-shadow: 0 10px 24px rgba(39, 194, 119, 0.28);
}

.mode-btn:hover {
  transform: translateY(-1px);
  border-color: #7be3b1;
}

.base64-card {
  background: linear-gradient(180deg, rgba(20, 27, 42, 0.9), rgba(14, 19, 30, 0.95));
  border: 1px solid #1f2b3c;
  border-radius: 1rem;
}

#input, #output {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #1f2b3c;
  color: #e6edf6;
  min-height: 160px;
}

#output[readonly] {
  cursor: default;
}

#status {
  border-radius: 0.75rem;
  border: 1px solid rgba(39, 194, 119, 0.35);
  background: rgba(39, 194, 119, 0.06);
  color: #b8f0cf;
}

#status.alert-danger {
  border-color: rgba(255, 99, 132, 0.35);
  background: rgba(255, 99, 132, 0.08);
  color: #ffc2d1;
}

.file-upload input[type="file"] {
  min-width: 260px;
}

@media (max-width: 768px) {
  .base64-hero h1 {
    font-size: 2rem;
  }
  .base64-card {
    padding: 0.75rem;
  }
  .file-upload input[type="file"] {
    width: 100%;
  }
  .flex-grow-1 button {
    width: 100%;
  }
}