body {
  font-family: 'DM Sans', sans-serif !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700; }

.btn {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500; }

.nav-link {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500; }

.card-title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700; }

.story-title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600; }

.story-description {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400; }

.metadata-item {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400; }

.author-info {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400; }

.search-results .card {
  border: none;
  border-radius: 8px;
  overflow: hidden; }
  .search-results .card .card-header {
    background-color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1rem; }

.search-results .search-result {
  transition: background-color 0.2s ease; }
  .search-results .search-result:hover {
    background-color: rgba(0, 0, 0, 0.02); }
  .search-results .search-result:last-child {
    border-bottom: none !important; }

.search-results mark {
  background-color: rgba(255, 243, 205, 0.5);
  padding: 0.1em 0.2em;
  border-radius: 2px;
  color: inherit; }

.search-results .metadata-item {
  font-size: 0.875rem; }

.search-results img {
  object-fit: cover; }

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }

.save-snippet-btn {
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease; }
  .save-snippet-btn:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff; }
  .save-snippet-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed; }

.snippet-save-button {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease; }
  .snippet-save-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

.notification {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 8px;
  animation: slideIn 0.3s ease; }

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0; }
  to {
    transform: translateX(0);
    opacity: 1; } }

.message-content-compact {
  user-select: text;
  cursor: text; }
  .message-content-compact::selection {
    background-color: rgba(0, 123, 255, 0.2); }

.text-decoration-none {
  text-decoration: none !important; }