/* Colored styles for the export/import panel */
#export-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid rgba(20,40,80,0.12);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(10,30,60,0.12);
  font-family: Inter, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 60;
  min-width: 180px;
}

#export-panel button {
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #0b2a66;
  transition: background-color 0.12s ease, transform 0.08s ease;
}

#export-panel button:hover { background-color: #e0e9ff; transform: translateY(-1px); }

#export-panel button.primary { background-color: #2563eb; color: #fff; }
#export-panel button.ghost { background-color: transparent; border: 1px solid rgba(20,40,80,0.06); }

/* colored backgrounds for each button */
.bg-red { background-color: #ef4444; color: #fff; }
.bg-blue { background-color: #2563eb; color: #fff; }
.bg-green { background-color: #16a34a; color: #fff; }
.bg-purple { background-color: #7c3aed; color: #fff; }
.bg-orange { background-color: #f97316; color: #fff; }
.bg-teal { background-color: #0d9488; color: #fff; }

#export-panel button.bg-red:hover,
#export-panel button.bg-blue:hover,
#export-panel button.bg-green:hover,
#export-panel button.bg-purple:hover,
#export-panel button.bg-orange:hover,
#export-panel button.bg-teal:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

#export-panel .hint { font-size: 11px; color: #4b5563; }

#input-import-json { display: none; }