.notion-render {
  /*font-family: system-ui, sans-serif;*/
  line-height: 1.6;
}

.notion-render h1, .notion-render h2, .notion-render h3 {
  margin: 1em 0 0.5em;
}

.notion-render p {
  margin-bottom: 1em;
}

.notion-render ul, .notion-render ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.notion-render pre {
  background: #f4f4f4;
  padding: 0.75em;
  border-radius: 4px;
  overflow-x: auto;
}

.notion-render table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}

.notion-render table td {
  border: 1px solid #ccc;
  padding: 0.5em;
}

.notion-placeholder {
  padding: 2em;
  color: #777;
  text-align: center;
}


.notion-image {
  margin: 1em 0;
  text-align: center;
}
.notion-image img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Палитра (можешь заменить на свои цвета/переменные) */
:root {
  --n-gray:   #6b7280;
  --n-brown:  #795548;
  --n-orange: #f97316;
  --n-yellow: #ca8a04;
  --n-green:  #16a34a;
  --n-blue:   #2563eb;
  --n-purple: #7c3aed;
  --n-pink:   #db2777;
  --n-red:    #dc2626;

  --n-gray-bg:   #f3f4f6;
  --n-brown-bg:  #efebe9;
  --n-orange-bg: #fff7ed;
  --n-yellow-bg: #fef9c3;
  --n-green-bg:  #ecfdf5;
  --n-blue-bg:   #eff6ff;
  --n-purple-bg: #f5f3ff;
  --n-pink-bg:   #fdf2f8;
  --n-red-bg:    #fef2f2;
}

/* Цвет текста */
.n-color-gray   { color: var(--n-gray); }
.n-color-brown  { color: var(--n-brown); }
.n-color-orange { color: var(--n-orange); }
.n-color-yellow { color: var(--n-yellow); }
.n-color-green  { color: var(--n-green); }
.n-color-blue   { color: var(--n-blue); }
.n-color-purple { color: var(--n-purple); }
.n-color-pink   { color: var(--n-pink); }
.n-color-red    { color: var(--n-red); }

/* Цвет фона (лёгкая подложка как в Notion) */
.n-bg-gray   { background: var(--n-gray-bg); }
.n-bg-brown  { background: var(--n-brown-bg); }
.n-bg-orange { background: var(--n-orange-bg); }
.n-bg-yellow { background: var(--n-yellow-bg); }
.n-bg-green  { background: var(--n-green-bg); }
.n-bg-blue   { background: var(--n-blue-bg); }
.n-bg-purple { background: var(--n-purple-bg); }
.n-bg-pink   { background: var(--n-pink-bg); }
.n-bg-red    { background: var(--n-red-bg); }

/* Немного оформления для бэкграундов */
[class^="n-bg-"], [class*=" n-bg-"] {
  padding: 0 .2em;
  border-radius: .25em;
}


/* Цвет текста (Notion palette) */
#course-popup-content .n-color-default { color: inherit !important; }
#course-popup-content .n-color-gray   { color: #6b7280 !important; }
#course-popup-content .n-color-brown  { color: #92400e !important; }
#course-popup-content .n-color-orange { color: #ea580c !important; }
#course-popup-content .n-color-yellow { color: #ca8a04 !important; }
#course-popup-content .n-color-green  { color: #16a34a !important; }
#course-popup-content .n-color-blue   { color: #2563eb !important; }
#course-popup-content .n-color-purple { color: #7c3aed !important; }
#course-popup-content .n-color-pink   { color: #db2777 !important; }
#course-popup-content .n-color-red    { color: #e11d48 !important; }

/* Цвет фона блока */
#course-popup-content .n-bg-gray   { background: #f3f4f6 !important; }
#course-popup-content .n-bg-brown  { background: #f5f1ea !important; }
#course-popup-content .n-bg-orange { background: #fff7ed !important; }
#course-popup-content .n-bg-yellow { background: #fef9c3 !important; }
#course-popup-content .n-bg-green  { background: #dcfce7 !important; }
#course-popup-content .n-bg-blue   { background: #dbeafe !important; }
#course-popup-content .n-bg-purple { background: #ede9fe !important; }
#course-popup-content .n-bg-pink   { background: #ffe4e6 !important; }
#course-popup-content .n-bg-red    { background: #fee2e2 !important; }