/* Light theme for Quill editor */
#toolbar {
  border: 1px solid #ddd;
  background: white;
}
#editor {
  background: white;
  color: #333;
  min-height: 400px;
  border: 1px solid #ddd;
}
.ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid #ddd;
  background: white;
}
.ql-container.ql-snow {
  border: none;
  background: white;
}
.ql-editor {
  color: #333;
}
.ql-snow .ql-stroke {
  stroke: #333;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #333;
}
.ql-snow .ql-picker {
  color: #333;
}
.ql-snow .ql-picker-options {
  background: white;
  border: 1px solid #ddd;
}
.ql-snow .ql-tooltip {
  color: #333;
  background: white;
  border: 1px solid #ddd;
}
.ql-snow .ql-tooltip a {
  color: #0066cc;
}

/* Read-only mode styling */
.ql-editor.ql-blank::before {
  color: #999;
}

/* Table styling for Quill */
.ql-snow .ql-table {
  border-collapse: collapse;
  width: 100%;
}
.ql-snow .ql-table td,
.ql-snow .ql-table th {
  border: 1px solid #ddd;
  padding: 8px;
}
.ql-snow .ql-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* Mode toggle styling */
.mode-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.mode-toggle label {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* Textarea for HTML/MD editing */
#rawEditor {
  width: 100%;
  min-height: 400px;
  border: 1px solid #ddd;
  padding: 10px;
  font-family: 'Courier New', monospace;
  background: white;
  color: #333;
  resize: vertical;
}

/* Layout for about page: 1/6 - 4/6 - 1/6 columns */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  gap: 20px;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-content h1 {
  text-align: center;
}