:root {
  /* Colors */
  --accent-color-dark: #3a7bc8;
  --accent-color: #5691d9;
  --article-line: rgba(0, 0, 0, 0.1);
  --bg-color: #ffffff;
  --bg-color-in: #1a1a1a;
  --bg-color-in-text: #ffffff;
  --border-color: rgba(0, 0, 0, 0.1);
  --error-color-dark: #DC2626;
  --error-color: #EF4444;
  --modal-bg: rgba(255, 255, 255, 0.95);
  --secondary-bg: #f8f9fa;
  --sponsored-bg: #fff7e6;
  --sponsored-text: #b38600;
  --success-color: #28a745;
  --success-dark: #218838;
  --text-color-in: #ffffff;
  --text-color: #1a1a1a;
  --text-secondary: #666666;
  /* Layout */
  --article-width: 708px;
}

.dark-theme {
  --accent-color-dark: #4d8fce;
  --accent-color: #6da2e2;
  --article-line: rgba(255, 255, 255, 0.1);
  --bg-color: #1a1a1a;
  --bg-color-in: #ffffff;
  --bg-color-in-text: #1a1a1a;
  --border-color: rgba(255, 255, 255, 0.1);
  --modal-bg: rgba(26, 26, 26, 0.95);
  --secondary-bg: #2a2a2a;
  --sponsored-bg: #332b00;
  --sponsored-text: #ffdb4d;
  --success-color: #28a745;
  --success-dark: #218838;
  --text-color-in: #ffffff;
  --text-color: #f5f5f5;
  --text-secondary: #a0a0a0;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
* {
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  hyphens: auto;
  margin: 0;
  overflow-wrap: break-word;
  padding: 0;
  word-wrap: break-word;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
  padding-top: 60px;
  transition: background-color 0.3s, color 0.3s;
}

/* Typography */
h1, h2, h3 {
  color: var(--text-color);
  font-family: "Merriweather", serif;
  max-width: 100%;
}

a {
  color: var(--text-color);
  max-width: 100%;
  text-decoration: none;
}

h2 {
  position: relative !important;
  scroll-margin-top: 74px !important;
}

h1.more-posts,
h2.more-posts {
  color: var(--text-color);
  font-family: Merriweather, serif;
  font-size: 1.75rem;
  margin-left: -13px;
  padding-bottom: 10px;
}

.flash-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  pointer-events: none;
  position: fixed;
  right: 20px;
  top: 20px;
  width: calc(100% - 40px);
  z-index: 1000;
}
.flash-messages .alert {
  align-items: center;
  animation: slide-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  font-weight: 500;
  justify-content: space-between;
  margin: 0;
  min-height: 56px;
  padding: 16px 20px;
  pointer-events: auto;
}
.flash-messages .alert.fade-out {
  animation: fade-out 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.flash-messages .alert .alert-icon {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  margin-right: 12px;
  width: 24px;
}
.flash-messages .alert .alert-content {
  flex: 1;
  margin-right: 8px;
}
.flash-messages .close {
  align-items: center;
  background: none;
  border-radius: 50%;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 18px;
  height: 32px;
  justify-content: center;
  margin-left: 8px;
  opacity: 0.7;
  padding: 8px;
  transition: all 0.2s ease;
  width: 32px;
}
.flash-messages .close:hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
  transform: scale(1.1);
}
.flash-messages .close:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  outline: none;
}
.flash-messages .alert-success {
  background-color: rgba(52, 211, 153, 0.95);
  border: 1px solid rgba(5, 150, 105, 0.3);
  color: #065f46;
}
.flash-messages .alert-success .close {
  color: #065f46;
}
.flash-messages .alert-success .close:hover {
  background-color: rgba(6, 95, 70, 0.1);
}
.flash-messages .alert-info {
  background-color: rgba(96, 165, 250, 0.95);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: #1e40af;
}
.flash-messages .alert-info .close {
  color: #1e40af;
}
.flash-messages .alert-info .close:hover {
  background-color: rgba(30, 64, 175, 0.1);
}
.flash-messages .alert-warning {
  background-color: rgba(251, 191, 36, 0.95);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: #92400e;
}
.flash-messages .alert-warning .close {
  color: #92400e;
}
.flash-messages .alert-warning .close:hover {
  background-color: rgba(146, 64, 14, 0.1);
}
.flash-messages .alert-error {
  background-color: rgba(248, 113, 113, 0.95);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #991b1b;
}
.flash-messages .alert-error .close {
  color: #991b1b;
}
.flash-messages .alert-error .close:hover {
  background-color: rgba(153, 27, 27, 0.1);
}
@keyframes slide-in {
  0% {
    transform: translateX(120%) scale(0.9);
    opacity: 0;
  }
  70% {
    transform: translateX(-5%) scale(1.02);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(10%) scale(0.95);
    opacity: 0;
  }
}
@media (max-width: 768px) {
  .flash-messages .flash-messages {
    top: 16px;
    right: 16px;
    width: calc(100% - 32px);
  }
  .flash-messages .alert {
    padding: 14px 16px;
    font-size: 14px;
    min-height: 48px;
  }
  .flash-messages .close {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}
@media (prefers-color-scheme: dark) {
  .flash-messages .alert {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .flash-messages .alert-success {
    background-color: rgba(6, 95, 70, 0.95);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: #a7f3d0;
  }
  .flash-messages .alert-success .close {
    color: #a7f3d0;
  }
  .flash-messages .alert-success .close:hover {
    background-color: rgba(167, 243, 208, 0.1);
  }
  .flash-messages .alert-info {
    background-color: rgba(30, 64, 175, 0.95);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #bfdbfe;
  }
  .flash-messages .alert-info .close {
    color: #bfdbfe;
  }
  .flash-messages .alert-info .close:hover {
    background-color: rgba(191, 219, 254, 0.1);
  }
  .flash-messages .alert-warning {
    background-color: rgba(146, 64, 14, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
  }
  .flash-messages .alert-warning .close {
    color: #fde68a;
  }
  .flash-messages .alert-warning .close:hover {
    background-color: rgba(253, 230, 138, 0.1);
  }
  .flash-messages .alert-error {
    background-color: rgba(153, 27, 27, 0.95);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fecaca;
  }
  .flash-messages .alert-error .close {
    color: #fecaca;
  }
  .flash-messages .alert-error .close:hover {
    background-color: rgba(254, 202, 202, 0.1);
  }
}

.break-all {
  word-break: break-all;
}

.hidden {
  display: none;
}

.blog-form {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(400px, 500px) minmax(500px, 1fr);
  margin: 2rem auto;
  max-width: 1400px;
  padding: 0 1rem;
}
@media (max-width: 1024px) {
  .blog-form {
    gap: 1.5rem;
    grid-template-columns: 1fr;
    padding: 0 0.75rem;
  }
}
@media (max-width: 768px) {
  .blog-form {
    gap: 1rem;
    margin: 1rem auto;
    padding: 0 0.5rem;
  }
}
.blog-form-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin: 2rem auto;
  max-width: 1400px;
  padding: 0 1rem;
}
@media (max-width: 1024px) {
  .blog-form-container {
    gap: 1.5rem;
    grid-template-columns: 1fr;
    padding: 0 0.75rem;
  }
  .blog-form-container .preview-section {
    margin-bottom: 1.5rem;
    position: relative;
    top: auto;
  }
}
@media (max-width: 768px) {
  .blog-form-container {
    gap: 1rem;
    margin: 1rem auto;
  }
}
.blog-form .preview-section {
  height: fit-content;
  position: sticky;
  top: 2rem;
}
@media (max-width: 768px) {
  .blog-form .preview-section {
    position: relative;
    top: 0;
  }
}
.blog-form .form-section {
  margin-bottom: 1rem;
}
.blog-form .form-section .modern-form {
  background: var(--bg-color);
  border-radius: 1rem;
  box-shadow: 0 4px 6px var(--border-color);
  padding: 2rem;
}
@media (max-width: 768px) {
  .blog-form .form-section .modern-form {
    border-radius: 0.75rem;
    padding: 1rem;
  }
}
.blog-form .form-tabs {
  -ms-overflow-style: none;
  border-bottom: 2px solid var(--article-line);
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.blog-form .form-tabs::-webkit-scrollbar {
  display: none;
}
@media (max-width: 768px) {
  .blog-form .form-tabs {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
}
.blog-form .form-tabs .tab-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  position: relative;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .blog-form .form-tabs .tab-button {
    padding: 0.5rem 1rem;
  }
}
.blog-form .form-tabs .tab-button.active {
  color: var(--text-color);
}
.blog-form .form-tabs .tab-button.active:after {
  background: currentColor;
  bottom: -2px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}
.blog-form .form-tabs .tab-button:hover:not(.active) {
  color: var(--text-color);
}
.blog-form .form-group.modern .form-label {
  color: var(--text-color);
  display: block;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.blog-form .form-group.modern .form-input {
  background-color: var(--bg-color);
  border-radius: 0.5rem;
  border: 1px solid var(--article-line);
  color: var(--text-color);
  padding: 0.75rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
@media (max-width: 768px) {
  .blog-form .form-group.modern .form-input {
    padding: 0.625rem 0.875rem;
  }
}
.blog-form .form-group.modern .form-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-color), 0.1);
  outline: none;
}
.blog-form .form-group.modern .form-input::placeholder {
  color: var(--text-secondary);
}
.blog-form .form-group.modern .form-input[readonly], .blog-form .form-group.modern .form-input:disabled, .blog-form .form-group.modern .form-input.disabled {
  background-color: var(--secondary-bg);
  cursor: not-allowed;
  opacity: 0.75;
}
.blog-form .form-group.modern.has-error .form-input {
  border-color: #DC2626;
}
.blog-form .form-group.modern.has-error .form-input:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.blog-form .form-group.modern.has-error .form-label {
  color: #DC2626;
}
.blog-form .tab-content {
  display: none;
}
.blog-form .tab-content.active {
  display: block;
}
.blog-form .inputs-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .blog-form .inputs-grid {
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
  }
}
.blog-form .inputs-grid .input-group {
  position: relative;
}
.blog-form .inputs-grid .input-group .form-group {
  margin-bottom: 0;
}
.blog-form .inputs-grid .input-group label {
  align-items: center;
  color: var(--text-color);
  display: flex;
  font-weight: 500;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.blog-form .inputs-grid .input-group label i {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-right: 10px;
}
.blog-form .inputs-grid .input-group input,
.blog-form .inputs-grid .input-group .form-control {
  background-color: var(--bg-color);
  border-radius: 0.5rem;
  border: 1px solid var(--article-line);
  color: var(--text-color);
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  width: 100%;
}
@media (max-width: 768px) {
  .blog-form .inputs-grid .input-group input,
  .blog-form .inputs-grid .input-group .form-control {
    padding: 0.625rem 0.875rem;
  }
}
.blog-form .inputs-grid .input-group input:focus,
.blog-form .inputs-grid .input-group .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-color), 0.1);
  outline: none;
}
.blog-form .inputs-grid .input-group input.is-valid,
.blog-form .inputs-grid .input-group .form-control.is-valid {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310B981' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") right 0.75rem center/1.25rem auto no-repeat;
  border-color: var(--success-color);
  padding-right: 2.5rem;
}
.blog-form .inputs-grid .input-group input.is-invalid,
.blog-form .inputs-grid .input-group .form-control.is-invalid {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23EF4444' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23EF4444' stroke='none'/%3e%3c/svg%3e") right 0.75rem center/1.25rem auto no-repeat;
  border-color: var(--error-color);
  padding-right: 2.5rem;
}
.blog-form .media-inputs {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .blog-form .media-inputs {
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-bottom: 1.5rem;
  }
}
.blog-form .media-inputs .input-group {
  margin-bottom: 0.5rem;
  position: relative;
}
.blog-form .media-inputs .input-group input,
.blog-form .media-inputs .input-group .form-control {
  background-color: var(--bg-color);
  border-radius: 0.5rem;
  border: 1px solid var(--article-line);
  color: var(--text-color);
  padding: 0.75rem 1rem 0.75rem 40px;
  transition: all 0.2s ease;
  width: 100%;
}
@media (max-width: 768px) {
  .blog-form .media-inputs .input-group input,
  .blog-form .media-inputs .input-group .form-control {
    padding: 0.625rem 0.875rem 0.625rem 36px;
  }
}
.blog-form .media-inputs .input-group input:focus,
.blog-form .media-inputs .input-group .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(var(--accent-color), 0.1);
  outline: none;
}
.blog-form .media-inputs .input-group i {
  background: var(--bg-color);
  color: var(--text-secondary);
  font-size: 1.1rem;
  left: 12px;
  padding: 0 2px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
@media (max-width: 768px) {
  .blog-form .media-inputs .input-group i {
    font-size: 1rem;
    left: 10px;
  }
}
.blog-form .upload-field {
  position: relative;
  margin-bottom: 1rem;
}
.blog-form .upload-field .drop-zone-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  border-radius: 8px;
}
.blog-form .upload-field .drop-zone-overlay i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.blog-form .upload-field .drop-zone-overlay span {
  font-size: 1rem;
}
.blog-form .upload-field.drag-over .drop-zone-overlay {
  opacity: 1;
  pointer-events: auto;
}
.blog-form .upload-field .clear-image {
  align-items: center;
  background-color: var(--accent-color);
  border-radius: 4px;
  border: none;
  color: var(--text-color-in);
  cursor: pointer;
  display: flex;
  float: right;
  font-size: 0.875rem;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}
.blog-form .upload-field .clear-image:hover {
  filter: brightness(0.9);
}
.blog-form .upload-field .clear-image.hidden {
  display: none;
}
.blog-form .upload-field .clear-image i {
  font-size: 1rem;
}
.blog-form .upload-field .remove-image-option {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.blog-form .upload-field .remove-image-option input[type=checkbox] {
  margin: 0;
}
.blog-form .upload-field .remove-image-option .remove-image-label {
  color: var(--danger-color);
  font-size: 0.875rem;
  margin: 0;
  cursor: pointer;
}
.blog-form .upload-field .upload-trigger {
  align-items: center;
  border-radius: 0.5rem;
  border: 2px dashed var(--article-line);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  transition: all 0.2s;
}
@media (max-width: 768px) {
  .blog-form .upload-field .upload-trigger {
    padding: 1.5rem;
  }
}
.blog-form .upload-field .upload-trigger:hover {
  border-color: var(--text-secondary);
}
.blog-form .upload-field .upload-trigger i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .blog-form .upload-field .upload-trigger i {
    font-size: 1.5rem;
  }
}
.blog-form .form-hint {
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.blog-form .slug-field {
  position: relative;
}
.blog-form .slug-status {
  bottom: -0.6rem;
  height: 0.6rem;
  position: absolute;
  right: 0;
}
.blog-form .slug-status span {
  font-size: 0.6rem;
}
.blog-form .slug-status span.is-valid {
  color: var(--success-color);
}
.blog-form .slug-status span.is-invalid {
  color: var(--error-color);
}
.blog-form span.error {
  color: var(--error-color);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.user-info-panel {
  background-color: #ffa500;
  border-radius: 12px;
  border: 1px solid var(--article-line);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 10px 20px;
  margin: 20px 0;
  font-size: 0.9rem;
}

.blog-posts {
  margin: 0 auto;
  max-width: 768px;
  padding: 2rem 1.5rem;
  position: relative;
}
.blog-posts .no-topics {
  color: var(--text-secondary);
  font-size: 1.25rem;
  text-align: center;
}

.all-posts {
  background-color: var(--bg-color);
  border-radius: 9999px;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 auto;
  max-width: 200px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.all-posts:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
}

.user-card {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.user-card .user-card-header {
  position: relative;
  height: 120px;
  background-size: cover;
  background-position: center;
}
.user-card .user-card-header .user-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.user-card .user-card-header .user-card-avatar {
  position: absolute;
  bottom: -25px;
  left: 1rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid white;
  background-size: cover;
  background-position: center;
}
.user-card .user-card-content {
  padding: 2.5rem 1rem 1rem;
  text-align: left;
}
.user-card .user-card-content .user-card-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: bold;
}
.user-card .user-card-content .user-card-handle {
  margin: 0;
  color: gray;
  font-size: 0.9rem;
}

.bloggers-section .bloggers {
  display: flex;
  justify-content: center;
  margin: 2rem 0 0.5rem;
  padding: 0 1rem;
}
.bloggers-section .bloggers .blogger {
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  border: 1px solid var(--article-line);
  cursor: pointer;
  height: 80px;
  margin-left: -0.5rem;
  overflow: visible;
  position: relative;
  transition: transform 0.2s;
  width: 80px;
}
.bloggers-section .bloggers .blogger:hover {
  transform: translateY(-5px);
  z-index: 2;
}
.bloggers-section .bloggers .blogger:hover .blogger-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
  visibility: visible;
}
.bloggers-section .bloggers .blogger .blogger-tooltip {
  background: var(--bg-color);
  border-radius: 6px;
  bottom: calc(100% + 10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 0.75rem;
  left: 50%;
  opacity: 0;
  padding: 0.5rem 1rem;
  position: absolute;
  transform: translateX(-50%);
  transition: all 0.2s;
  visibility: hidden;
  white-space: nowrap;
}
.bloggers-section .bloggers .blogger .blogger-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--bg-color) transparent transparent transparent;
}
.bloggers-section .bloggers .blogger .blogger-tooltip .blogger-link i {
  margin-left: 0.5rem;
}
.bloggers-section .bloggers-title {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 1.5rem auto 1rem auto;
  text-align: center;
}

.blogs-list {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
  position: relative;
}
.blogs-list .blog {
  position: relative;
}
.blogs-list .blog-card {
  background-color: var(--bg-color);
  border-radius: 12px;
  border: 1px solid var(--article-line);
  box-shadow: 0 4px 6px var(--border-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blogs-list .blog-card:hover {
  box-shadow: 0 10px 20px var(--border-color);
  transform: translateY(-5px);
}
.blogs-list .blog-cover {
  background-position: center;
  background-size: cover;
  height: 200px;
}
.blogs-list .blog-info {
  align-items: center;
  display: flex;
  padding: 15px;
}
.blogs-list .blog-avatar {
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  border: 1px solid var(--article-line);
  height: 50px;
  margin-right: 15px;
  width: 50px;
}
.blogs-list .blog-details {
  flex-grow: 1;
}
.blogs-list .blog-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}
.blogs-list .blog-handle {
  color: var(--text-secondary);
  font-size: 14px;
}
.blogs-list .blog-actions {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: var(--modal-bg);
  border-radius: 50px;
  box-shadow: 0 2px 8px var(--border-color);
  display: flex;
  gap: 15px;
  padding: 8px 15px;
  position: absolute;
  right: 10px;
  top: 10px;
}
.blogs-list .no-blogs {
  text-align: center;
}
.blogs-list .no-blogs.unauthorized {
  background-color: var(--secondary-bg);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin: 3rem auto;
  max-width: 600px;
  padding: 2rem;
  text-align: center;
}
.blogs-list .no-blogs.unauthorized p {
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.blogs-list .no-blogs.unauthorized .google-button {
  align-items: center;
  background-color: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  font-weight: 500;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
  padding: 12px 24px;
  transition: all 0.2s ease;
}
.blogs-list .no-blogs.unauthorized .google-button:hover {
  background-color: var(--secondary-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.blogs-list .no-blogs.unauthorized .google-button .fab.fa-google {
  color: var(--accent-color);
  font-size: 1.2rem;
}
.blogs-list .no-blogs.unauthorized .google-button span {
  color: var(--text-color);
}
.blogs-list .no-blogs.unauthorized .button_to {
  display: inline-block;
}

.create-blog-btn {
  background-color: var(--accent-color);
  border-radius: 8px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: block;
  font-size: 18px;
  font-weight: 500;
  padding: 15px;
  text-align: center;
  transition: background-color 0.3s ease;
  width: 100%;
}
.create-blog-btn:hover {
  background-color: var(--accent-color-dark);
}

.action-icon {
  align-items: center;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 1rem;
  height: 32px;
  justify-content: center;
  transition: all 0.2s ease;
  width: 32px;
}
.action-icon:hover {
  transform: scale(1.1);
}
.action-icon:first-child {
  background-color: var(--success-color);
}
.action-icon:first-child:hover {
  background-color: var(--success-dark);
}
.action-icon:last-child {
  background-color: var(--accent-color);
}
.action-icon:last-child:hover {
  background-color: var(--accent-color-dark);
}

@media (max-width: 768px) {
  .blog-cover {
    height: 150px;
  }
  .blog-title {
    font-size: 16px;
  }
  .blog-handle {
    font-size: 12px;
  }
}
.cta-button {
  border-radius: 9999px;
  display: inline-block;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
  color: white;
  background-color: var(--accent-color);
}
.cta-button:hover {
  background-color: var(--accent-color-dark);
}

.google-button {
  align-items: center;
  background-color: #4285f4;
  border-radius: 9999px;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  display: inline-block;
  font-weight: 500;
  gap: 0.5rem;
  margin: 1rem auto;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.google-button:hover {
  background-color: #357abd;
}
.google-button i {
  font-size: 1.2rem;
}

.blogger-actions {
  color: var(--text-color-in);
  background-color: var(--bg-color);
  border-top: 1px solid var(--article-line);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  padding: 2rem 1.5rem;
  width: 100%;
}
.blogger-actions a {
  color: var(--text-color-in);
}
.blogger-actions .add-new-topic-button {
  background-color: var(--success-color);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.blogger-actions .add-new-topic-button:hover {
  background-color: var(--success-dark);
}
.blogger-actions .add-new-topic-button i {
  margin-right: 0.5rem;
}
.blogger-actions .edit-blog-button {
  background-color: var(--accent-color);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.blogger-actions .edit-blog-button:hover {
  background-color: var(--accent-color-dark);
}
.blogger-actions .edit-blog-button i {
  margin-right: 0.5rem;
}

.edit-user-profile {
  color: var(--accent-color-dark);
}

@media (max-width: 768px) {
  .blogger-actions {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    text-align: center;
  }
}
.cta-section {
  background-color: var(--secondary-bg);
  margin-top: 3rem;
  padding: 3rem 1.5rem;
  text-align: center;
}
.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.embed-responsive {
  border-radius: 1rem;
  height: 0;
  max-width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  width: 100%;
}
.embed-responsive iframe {
  border: none;
  height: 100%;
  width: 100%;
}
.embed-responsive .embed-responsive-item {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.footer {
  background: var(--secondary-bg);
  margin-top: 3rem;
  padding: 3rem 1.5rem;
}
.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-section {
  flex: 1;
  min-width: 200px;
}
.footer-section h3 {
  color: var(--text-color);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.footer-section p, .footer-section ul {
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.footer-section ul {
  list-style-type: none;
}
.footer-section ul li {
  margin-bottom: 0.5rem;
}
.footer-section ul li.help-ukraine {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.footer-section ul li a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-section ul li a:hover {
  color: var(--text-color);
}
.footer-bottom {
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: center;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}
.form-actions .btn-primary,
.form-actions .btn-danger {
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s;
}
.form-actions .btn-primary {
  background: var(--accent-color);
  color: #ffffff;
}
.form-actions .btn-primary:hover {
  background: var(--accent-color-dark);
  cursor: pointer;
}
.form-actions .btn-danger {
  background: var(--error-color);
  color: #ffffff;
}
.form-actions .btn-danger:hover {
  background: var(--error-color-dark);
  cursor: pointer;
}

.nav {
  align-items: center;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  height: 64px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.nav-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1.5rem;
  width: 100%;
}
.nav-container .logo {
  color: var(--text-color);
  font-family: "Merriweather";
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  padding-bottom: 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
}
.nav-container .logo sub {
  background-color: black;
  border-radius: 10px 2px 10px;
  bottom: 0;
  color: white;
  font-size: 8px;
  left: 0;
  position: absolute;
  right: 0;
}
.nav-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
}
.nav-actions a {
  align-items: center;
  display: flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.nav-actions .user-avatar-wrapper {
  position: relative;
  display: inline-block;
}
.nav-actions .user-avatar-wrapper .user-avatar {
  border-radius: 100%;
  border: 1px solid #f2f2f2;
  height: 30px;
  width: 30px;
  display: block;
}
.nav-actions .user-avatar-wrapper .notification-dot {
  background: rgb(227, 59, 59);
  border-radius: 50%;
  color: white;
  font-size: 8px;
  font-weight: bold;
  height: 16px;
  line-height: 16px;
  position: absolute;
  right: -4px;
  text-align: center;
  top: -4px;
  width: 16px;
}
.nav-links {
  align-items: center;
  display: flex;
  font-weight: 500;
  gap: 2rem;
}
.nav-links a {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--accent-color);
}

.hero {
  background: var(--bg-color);
  padding: 6rem 1.5rem 3rem;
  text-align: center;
}
.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
.hero p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 auto 1rem;
  max-width: 600px;
}
.hero a {
  color: var(--text-color);
}
.hero a:visited {
  color: var(--text-color);
}

.burger-menu,
.close-menu {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  display: none;
  font-size: 1.5rem;
  padding: 0.5rem;
}

.mobile-menu {
  background: var(--bg-color);
  display: none;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: hidden;
  width: 100%;
  z-index: 1001;
}
.mobile-menu.active {
  display: block;
  opacity: 1;
  visibility: visible;
}
.mobile-menu-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 4rem 2rem;
  text-align: center;
}
.mobile-menu-content a {
  color: var(--text-color);
  text-decoration: none;
}
.mobile-menu .close-menu {
  display: block;
  position: absolute;
  right: 25px;
  top: 10px;
}

.modal {
  -webkit-backdrop-filter: blur(8px);
  align-items: flex-start;
  backdrop-filter: blur(8px);
  display: flex;
  height: 100%;
  left: 0;
  overflow-y: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.modal h2 {
  font-family: "Merriweather", serif;
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
}
.modal-header {
  padding: 20px;
  text-align: center;
}
.modal-content {
  background-color: var(--modal-bg);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 800px;
  min-height: auto;
  padding: 60px 20px 20px;
  position: relative;
  width: 100%;
}
.modal .close-modal {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
}
.modal .user-blogs-toggle {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 20px;
  padding: 5px;
}

.tseivo_pagination {
  align-items: center;
  color: var(--text-color);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 2rem 0 3rem;
  padding: 0 1rem;
}
.tseivo_pagination a, .tseivo_pagination span {
  background: var(--secondary-bg);
  border-radius: 4px;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.tseivo_pagination a:hover, .tseivo_pagination span:hover {
  background: var(--border-color);
}
.tseivo_pagination .current {
  font-weight: bold;
}
.tseivo_pagination .disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.tseivo_pagination .disabled:hover {
  background: var(--secondary-bg);
}

.back-to-top {
  align-items: center;
  background: var(--bg-color);
  border-radius: 50%;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  height: 30px;
  justify-content: center;
  opacity: 0.1;
  transition: background-color 0.2s, opacity 0.3s;
  width: 30px;
}
.back-to-top:hover {
  background: var(--secondary-bg);
}
.back-to-top.visible {
  opacity: 1;
}

.search-container {
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
}
.search-container input {
  background: var(--secondary-bg);
  border-radius: 9999px;
  border: none;
  color: var(--text-color);
  font-size: 1rem;
  padding: 1.5rem 3rem 1.5rem 1.5rem;
  transition: background-color 0.2s;
  width: 100%;
}
.search-container input:focus {
  background: var(--bg-color);
  box-shadow: 0 0 0 2px var(--accent-color);
  outline: none;
}
.search-container .search-button {
  align-items: center;
  background: none;
  border-radius: 50%;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  font-size: 1.3rem;
  justify-content: center;
  padding: 0.5rem;
  position: absolute;
  right: 0.5rem;
  transition: background-color 0.2s;
}
.search-container .search-button:hover {
  background: var(--secondary-bg);
}

.theme-toggle {
  align-items: center;
  background: none;
  border-radius: 50%;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  font-size: 1.25rem;
  height: 30px;
  justify-content: center;
  transition: background-color 0.2s;
  width: 30px;
}
.theme-toggle:hover {
  background: var(--secondary-bg);
}

.notification-toggle {
  align-items: center;
  background-color: var(--accent-color);
  border-radius: 1rem;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  justify-content: center;
  padding: 12px;
  transition: background-color 0.3s ease;
  width: 100%;
}
.notification-toggle:hover {
  background-color: var(--accent-color-dark);
}
.notification-toggle i {
  margin-right: 8px;
}
.notification-toggle.active {
  background-color: var(--bg-color);
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
}

.post-card {
  animation-fill-mode: both;
  margin-bottom: 3rem;
  padding-left: 2rem;
  position: relative;
}
.post-card::before {
  background: var(--article-line);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 2px;
}
.post-card h2 {
  color: var(--text-color);
  font-family: "Merriweather", serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.post-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.post-card-image {
  aspect-ratio: 16/9;
  background: var(--secondary-bg);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  position: relative;
}
.post-card-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.post-card-meta {
  align-items: center;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.post-card .draft-date,
.post-card .published-date {
  background-color: var(--secondary-bg);
  border-radius: 4px;
  color: var(--text-color);
  padding: 2px 6px;
}
.post-card .draft-date .fa-file-alt,
.post-card .published-date .fa-file-alt {
  color: #ffa500;
}
.post-card-actions {
  display: inline-block;
  margin-left: 8px;
}
.post-card .edit-link {
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.9em;
  padding: 2px 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.post-card .edit-link:hover {
  background-color: var(--secondary-bg);
  color: var(--text-color);
}
.post-card .edit-link i {
  margin-right: 2px;
}
.post-card-author {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.post-card .author-avatar {
  border-radius: 50%;
  border: 1px solid var(--article-line);
  height: 40px;
  overflow: hidden;
  width: 40px;
}
.post-card .author-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.post-card .author-info {
  display: flex;
  flex-direction: column;
}
.post-card .author-info .author-name {
  color: var(--text-color);
  font-weight: 500;
}
.post-card .author-info .blog-name {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.topic-form .form-section,
.reply-form .form-section {
  margin-bottom: 1.5rem;
}
.topic-form .form-control,
.reply-form .form-control {
  background-color: var(--bg-color);
  border-radius: 0.5rem;
  border: 1px solid var(--article-line);
  color: var(--text-color);
  padding: 0.75rem;
  transition: all 0.2s ease;
  width: 100%;
}
.topic-form .form-control:focus,
.reply-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  outline: none;
}
.topic-form .form-control[type=file],
.reply-form .form-control[type=file] {
  padding: 0.5rem 0;
}
.topic-form .custom-trix,
.reply-form .custom-trix {
  background-color: var(--bg-color);
  border-radius: 0.5rem;
  border: 1px solid var(--article-line);
  color: var(--text-color);
  min-height: 300px;
  padding: 1rem;
}
.topic-form .custom-trix:focus,
.reply-form .custom-trix:focus {
  border-color: var(--accent-color);
  outline: none;
}
.topic-form .editor-info,
.reply-form .editor-info {
  margin-top: 0.5rem;
}
.topic-form .editor-info .info-text,
.reply-form .editor-info .info-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.topic-form .editor-info .info-text i,
.reply-form .editor-info .info-text i {
  color: var(--accent-color);
  margin-right: 0.5rem;
}
.topic-form .form-text,
.reply-form .form-text {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.topic-form .file-upload-container,
.reply-form .file-upload-container {
  cursor: pointer;
  position: relative;
  width: 100%;
}
.topic-form .file-upload-container .file-input,
.reply-form .file-upload-container .file-input {
  cursor: pointer;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.topic-form .file-upload-container .file-input:not([disabled]),
.reply-form .file-upload-container .file-input:not([disabled]) {
  cursor: pointer;
}
.topic-form .file-upload-container .current-image-preview,
.reply-form .file-upload-container .current-image-preview {
  background: var(--bg-color);
  border-radius: 0.5rem;
  border: 2px solid var(--article-line);
  margin-bottom: 1rem;
  padding: 1rem;
  position: relative;
  text-align: center;
  z-index: 2;
}
.topic-form .file-upload-container .current-image-preview.hidden,
.reply-form .file-upload-container .current-image-preview.hidden {
  display: none;
}
.topic-form .file-upload-container .current-image-preview .current-image,
.reply-form .file-upload-container .current-image-preview .current-image {
  margin-bottom: 1rem;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}
.topic-form .file-upload-container .current-image-preview .current-image-actions,
.reply-form .file-upload-container .current-image-preview .current-image-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  position: relative;
  z-index: 3;
}
.topic-form .file-upload-container .current-image-preview .current-image-actions button,
.reply-form .file-upload-container .current-image-preview .current-image-actions button {
  align-items: center;
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
  position: relative;
  z-index: 3;
}
.topic-form .file-upload-container .current-image-preview .current-image-actions button i,
.reply-form .file-upload-container .current-image-preview .current-image-actions button i {
  font-size: 0.9rem;
}
.topic-form .file-upload-container .current-image-preview .current-image-actions button:hover,
.reply-form .file-upload-container .current-image-preview .current-image-actions button:hover {
  color: var(--accent-color);
}
.topic-form .file-upload-container .current-image-preview .current-image-actions button.remove-current-image,
.reply-form .file-upload-container .current-image-preview .current-image-actions button.remove-current-image {
  color: #e74c3c;
}
.topic-form .file-upload-container .current-image-preview .current-image-actions button.remove-current-image:hover,
.reply-form .file-upload-container .current-image-preview .current-image-actions button.remove-current-image:hover {
  color: #d62c1a;
}
.topic-form .file-upload-container .upload-content,
.reply-form .file-upload-container .upload-content {
  background: var(--secondary-bg);
  border-radius: 0.5rem;
  border: 2px dashed var(--article-line);
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}
.topic-form .file-upload-container .upload-content i,
.reply-form .file-upload-container .upload-content i {
  color: var(--accent-color);
  display: block;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.topic-form .file-upload-container .upload-content .upload-text,
.reply-form .file-upload-container .upload-content .upload-text {
  color: var(--text-color);
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.topic-form .file-upload-container .upload-content .upload-hint,
.reply-form .file-upload-container .upload-content .upload-hint {
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.topic-form .file-upload-container .upload-content.dragging,
.reply-form .file-upload-container .upload-content.dragging {
  background: var(--secondary-bg);
  border-color: var(--accent-color);
}
.topic-form .file-upload-container:hover .upload-content,
.reply-form .file-upload-container:hover .upload-content {
  background: var(--secondary-bg);
  border-color: var(--accent-color);
}
.topic-form .file-preview,
.reply-form .file-preview {
  background: var(--bg-color);
  border-radius: 0.5rem;
  border: 2px solid var(--article-line);
  padding: 1rem;
  text-align: center;
}
.topic-form .file-preview.hidden,
.reply-form .file-preview.hidden {
  display: none;
}
.topic-form .file-preview .preview-image,
.reply-form .file-preview .preview-image {
  margin-bottom: 1rem;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}
.topic-form .file-preview .preview-info,
.reply-form .file-preview .preview-info {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  position: relative;
  z-index: 13;
}
.topic-form .file-preview .preview-info .preview-name,
.reply-form .file-preview .preview-info .preview-name {
  color: var(--text-color);
  font-size: 0.9rem;
}
.topic-form .file-preview .preview-info .remove-file,
.reply-form .file-preview .preview-info .remove-file {
  align-items: center;
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
.topic-form .file-preview .preview-info .remove-file:hover,
.reply-form .file-preview .preview-info .remove-file:hover {
  color: #d62c1a;
}
.topic-form .file-preview .preview-info .remove-file i,
.reply-form .file-preview .preview-info .remove-file i {
  font-size: 0.9rem;
}

.page-container {
  max-width: 768px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.form-container {
  background: var(--bg-color);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px var(--border-color);
  padding: 2rem;
}

.form-header {
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--article-line);
  padding-bottom: 1rem;
}
.form-header .form-title {
  font-size: 1.75rem;
  color: var(--text-color);
}
.form-header .form-title i {
  color: var(--accent-color);
}

.switch-wrapper {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}
.switch .toggle-checkbox {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.switch .toggle-checkbox:checked + .slider {
  background-color: var(--accent-color);
}
.switch .toggle-checkbox:focus + .slider {
  box-shadow: 0 0 1px var(--accent-color);
}
.switch .toggle-checkbox:checked + .slider:before {
  transform: translateX(26px);
}

.slider {
  background-color: var(--text-secondary);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.4s;
}
.slider:before {
  background-color: var(--bg-color);
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s;
  width: 26px;
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

.toggle-label {
  color: var(--text-color);
  cursor: pointer;
  font-size: 1rem;
}

#categories {
  border-radius: 0.5rem;
  border: 2px solid lightblue;
  margin-bottom: 1rem;
  padding: 1rem;
}
#categories .category-switches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
#categories .form-text {
  margin-bottom: 1rem;
}

.topic {
  margin: 0 auto;
  max-width: 768px;
  padding: 2rem 0;
}
.topic .topic-header img.main-image {
  border-radius: 2rem;
  height: auto;
  margin: 1rem 0;
  object-fit: cover;
  width: 100%;
}
.topic .topic-header .container {
  margin: 0 auto;
  max-width: 768px;
  padding: 0 1rem;
}
.topic .topic-header .title-wrapper .edit-topic {
  margin: 0.5rem 0;
  text-align: center;
}
.topic .topic-header .title-wrapper .edit-topic .delete-link,
.topic .topic-header .title-wrapper .edit-topic .edit-link {
  color: var(--text-color);
  text-decoration: none;
  margin: 0 0.5rem;
}
.topic .topic-header .title-wrapper .edit-topic .delete-link i,
.topic .topic-header .title-wrapper .edit-topic .edit-link i {
  margin-right: 0.5rem;
}
.topic .topic-header .title-wrapper .thread-info {
  background-color: var(--secondary-bg);
  border-radius: 1rem;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.2;
  margin-top: 1rem;
  padding: 1rem;
  text-align: center;
}
.topic .topic-header .title-wrapper .thread-info a {
  color: var(--accent-color);
  text-decoration: none;
}
.topic .topic-header .title-wrapper .thread-info a:hover {
  color: var(--accent-color-dark);
}
.topic .topic-header .title-wrapper .title {
  color: var(--text-color);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 1rem 0;
  text-align: center;
}
@media (max-width: 768px) {
  .topic .topic-header .title-wrapper .title {
    font-size: 2rem;
  }
}
.topic .topic-header .meta {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  gap: 1rem;
}
.topic .topic-header .author-info {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  text-decoration: none;
}
.topic .topic-header .author-info:hover .name {
  color: var(--text-color);
}
.topic .topic-header .author-info .avatar {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  color: var(--text-secondary);
  display: flex;
  font-size: 1.5rem;
  height: 48px;
  justify-content: center;
  width: 48px;
}
.topic .topic-header .author-info .avatar:empty {
  background-color: var(--secondary-bg);
}
.topic .topic-header .author-info .avatar:not(:empty) {
  background-image: none !important;
}
.topic .topic-header .author-info .details {
  display: flex;
  flex-direction: column;
}
.topic .topic-header .author-info .name {
  color: var(--text-color);
  font-weight: 600;
  transition: color 0.2s;
}
.topic .topic-header .author-info .handle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color 0.2s;
}
.topic .topic-header .post-info {
  background-color: var(--secondary-bg);
  border-radius: 2rem;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1rem;
}
.topic .topic-header .post-info i {
  margin-right: 0.5rem;
}
.topic .topic-header .post-info .time {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.topic .topic-header .post-info .draft {
  align-items: center;
  background: var(--secondary-bg);
  border-radius: 1rem;
  color: var(--text-secondary);
  display: flex;
  padding: 0.25rem 0.75rem;
}
.topic .topic-header .post-info .published-time .fa-file-alt {
  color: #ffa500;
}
.topic .topic-header .sponsored {
  background: var(--sponsored-bg, #fff5e6);
  border-radius: 1rem;
  color: var(--sponsored-text, #995200);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  text-align: center;
  width: 100%;
}
.topic .topic-header .sponsored i {
  margin-right: 0.5rem;
}
@media (max-width: 480px) {
  .topic .topic-header .post-info {
    font-size: 0.85rem;
    gap: 0.75rem;
    justify-content: center;
    text-align: center;
  }
  .topic .topic-header .post-info > div {
    padding: 0.2rem 0.5rem;
  }
  .topic .topic-header .post-info .author-info {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
  }
  .topic .topic-header .post-info .author-info .avatar {
    margin: 0 auto;
  }
  .topic .topic-header .post-info .time {
    align-items: center;
    width: 100%;
  }
}
.topic .table-of-contents {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--border-color);
  margin: 2rem 0;
  padding: 1.5rem;
}
.topic .table-of-contents span {
  color: var(--text-color);
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
}
.topic .table-of-contents small {
  color: var(--text-secondary);
  display: block;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.topic .table-of-contents .anchor-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.topic .table-of-contents .anchor-list a {
  background: var(--secondary-bg);
  border-left: 3px solid transparent;
  border-radius: 6px;
  color: var(--text-color);
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.topic .table-of-contents .anchor-list a:hover {
  background: var(--secondary-bg);
  border-left-color: var(--accent-color);
  color: var(--accent-color);
  opacity: 0.9;
}

.legacy-signin .form-container {
  background-color: var(--bg-color);
  border-radius: 12px;
  box-shadow: 0 2px 4px var(--border-color);
  margin: 2rem auto;
  max-width: 400px;
  padding: 2rem;
}
.legacy-signin .form-container form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.legacy-signin .form-container .center-text {
  margin-bottom: 1.5rem;
  text-align: center;
}
.legacy-signin .form-container .center-text a {
  color: var(--accent-color);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.legacy-signin .form-container .center-text a:hover {
  color: var(--accent-color-dark);
}
.legacy-signin .form-container .form-field {
  margin-bottom: 1rem;
}
.legacy-signin .form-container .form-field:last-child {
  margin-bottom: 0;
}
.legacy-signin .form-container input[type=email],
.legacy-signin .form-container input[type=password] {
  background-color: var(--secondary-bg);
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--text-color);
  font-size: 1rem;
  outline: none;
  padding: 12px 16px;
  transition: all 0.2s ease;
  width: 100%;
}
.legacy-signin .form-container input[type=email]:focus,
.legacy-signin .form-container input[type=password]:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(var(--accent-color), 0.1);
}
.legacy-signin .form-container input[type=email]::placeholder,
.legacy-signin .form-container input[type=password]::placeholder {
  color: var(--text-secondary);
}
.legacy-signin .form-container .toggle-field {
  align-items: center;
  display: flex;
  gap: 12px;
}
.legacy-signin .form-container .toggle-switch {
  position: relative;
}
.legacy-signin .form-container .toggle-switch input[type=checkbox] {
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.legacy-signin .form-container .toggle-switch input[type=checkbox]:checked + .toggle-label {
  background-color: var(--accent-color);
}
.legacy-signin .form-container .toggle-switch input[type=checkbox]:checked + .toggle-label .toggle-inner {
  transform: translateX(24px);
}
.legacy-signin .form-container .toggle-switch input[type=checkbox]:focus + .toggle-label {
  box-shadow: 0 0 0 4px rgba(var(--accent-color), 0.1);
}
.legacy-signin .form-container .toggle-switch .toggle-label {
  background-color: var(--text-secondary);
  border-radius: 34px;
  cursor: pointer;
  display: block;
  height: 24px;
  position: relative;
  transition: background-color 0.2s ease;
  width: 48px;
}
.legacy-signin .form-container .toggle-switch .toggle-label .toggle-inner {
  background-color: var(--bg-color);
  border-radius: 50%;
  bottom: 2px;
  height: 20px;
  left: 2px;
  position: absolute;
  transition: transform 0.2s ease;
  width: 20px;
}
.legacy-signin .form-container .toggle-text {
  color: var(--text-color);
  cursor: pointer;
  font-size: 0.95rem;
  user-select: none;
}
.legacy-signin .form-container input[type=submit] {
  background-color: var(--accent-color);
  border: none;
  border-radius: 8px;
  color: var(--text-color-in);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px;
  transition: all 0.2s ease;
  width: 100%;
}
.legacy-signin .form-container input[type=submit]:hover {
  background-color: var(--accent-color-dark);
  transform: translateY(-1px);
}
.legacy-signin .form-container input[type=submit]:active {
  transform: translateY(0);
}
.legacy-signin .form-container .field_with_errors input {
  border-color: var(--error-color);
}

@media (max-width: 480px) {
  .legacy-signin .form-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  .legacy-signin .form-container .form-field {
    margin-bottom: 0.75rem;
  }
  .legacy-signin .form-container .center-text a {
    font-size: 1.25rem;
  }
  .legacy-signin .form-container input[type=email],
  .legacy-signin .form-container input[type=password],
  .legacy-signin .form-container input[type=submit] {
    padding: 10px 14px;
  }
}
.article-divider {
  margin: 2rem 0;
  position: relative;
  text-align: center;
}
.article-divider::before {
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
}
.article-divider .divider-content {
  background: var(--bg-color);
  display: inline-block;
  padding: 0 1rem;
  position: relative;
}
.article-divider .divider-content .share-trigger {
  align-items: center;
  background: var(--card-bg);
  border-radius: 25px;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s ease;
}
.article-divider .divider-content .share-trigger:hover {
  background: var(--hover-bg);
  transform: translateY(-1px);
}
.article-divider .divider-content .share-trigger:active {
  transform: translateY(0);
}

.share-modal {
  align-items: flex-start;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  overflow-y: auto;
  padding: 2rem 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease;
  visibility: hidden;
  z-index: 1000;
}
.share-modal.active {
  opacity: 1;
  visibility: visible;
}
.share-modal.active .modal-content {
  transform: translateY(0);
}
.share-modal .modal-overlay {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
.share-modal .modal-content {
  background: var(--bg-color);
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin: auto;
  max-height: min(800px, 90vh);
  max-width: 500px;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  width: 90%;
  z-index: 1;
}
.share-modal .modal-content h3 {
  color: var(--text-color);
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
}
.share-modal .modal-content .close-btn {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 24px;
  padding: 0.5rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
  transition: all 0.2s ease;
}
.share-modal .modal-content .close-btn:hover {
  color: var(--text-color);
  transform: translateY(-1px);
}
.share-modal .modal-content .close-btn:active {
  transform: translateY(0);
}
.share-modal .copy-link-section {
  margin-bottom: 2rem;
}
.share-modal .copy-link-section .input-group {
  background: var(--input-bg, rgba(125, 125, 125, 0.1));
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
}
.share-modal .copy-link-section .input-group .link-input {
  background: var(--input-bg, rgba(125, 125, 125, 0.1));
  border: none;
  color: var(--text-color, #666);
  cursor: default;
  flex: 1;
  font-size: 0.9rem;
  padding: 0.5rem;
  user-select: all;
}
.share-modal .copy-link-section .input-group .link-input:focus {
  outline: none;
}
.share-modal .copy-link-section .input-group .copy-btn {
  align-items: center;
  background: var(--accent-color);
  border-radius: 6px;
  border: none;
  color: var(--text-color-in);
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
.share-modal .copy-link-section .input-group .copy-btn:hover {
  background: var(--accent-color-dark);
  transform: translateY(-1px);
}
.share-modal .copy-link-section .input-group .copy-btn:active {
  transform: translateY(0);
}
.share-modal .copy-link-section.copied .input-group {
  animation: pulse 0.3s ease;
}
.share-modal .share-options {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.share-modal .share-options .share-option {
  align-items: center;
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.8rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.share-modal .share-options .share-option:hover {
  transform: translateY(-2px);
}
.share-modal .share-options .share-option:active {
  transform: translateY(-1px);
}
.share-modal .tabs {
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.share-modal .tabs .tab-btn {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 0.5rem 1rem;
  position: relative;
  transition: all 0.2s ease;
}
.share-modal .tabs .tab-btn:after {
  background: var(--accent-color);
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.share-modal .tabs .tab-btn.active {
  color: var(--text-color);
}
.share-modal .tabs .tab-btn.active:after {
  transform: scaleX(1);
}
.share-modal .tabs .tab-btn:hover {
  color: var(--text-color);
}
.share-modal .tab-content.hidden {
  display: none;
}
.share-modal .citation-formats {
  margin-top: 1rem;
}
.share-modal .citation-formats .loading-spinner {
  padding: 2rem;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 480px) {
  .share-modal .modal-content {
    padding: 1.5rem;
  }
  .share-modal .share-options {
    grid-template-columns: 1fr;
  }
}
:root[data-theme=dark] .share-modal .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}
:root[data-theme=dark] .share-modal .modal-content {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.citation-content {
  color: var(--text-color);
}
.citation-content section {
  margin-bottom: 2.5rem;
}
.citation-content section:last-child {
  margin-bottom: 0;
}
.citation-content .citation-intro .title {
  color: var(--text-color);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.citation-content .citation-intro .subtitle {
  color: var(--text-color);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.citation-content .citation-intro .description {
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.5;
}
.citation-content .citation-formats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.citation-content .citation-formats .format-card {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.citation-content .citation-formats .format-card .format-header {
  align-items: center;
  background: var(--card-header-bg, rgba(0, 0, 0, 0.02));
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.citation-content .citation-formats .format-card .format-header h4 {
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 600;
}
.citation-content .citation-formats .format-card pre {
  background: var(--pre-bg, transparent);
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  padding: 1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.citation-content .citation-details .section-title {
  color: var(--text-color);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.citation-content .citation-details .details-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.citation-content .citation-details .details-grid .detail-card {
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.citation-content .citation-details .details-grid .detail-card .detail-header {
  align-items: center;
  background: var(--card-header-bg, rgba(0, 0, 0, 0.02));
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
}
.citation-content .citation-details .details-grid .detail-card .detail-header strong {
  color: var(--text-color);
  font-size: 0.8rem;
}
.citation-content .citation-details .details-grid .detail-card pre {
  background: var(--pre-bg, transparent);
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  padding: 0.75rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.citation-content .citation-help .help-card {
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: 1rem;
}
.citation-content .citation-help .help-card h5 {
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.citation-content .citation-help .help-card p {
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.5;
}
.citation-content .citation-help .help-card .archive-link {
  color: var(--link-color);
  display: inline-block;
  font-size: 0.9rem;
  margin-top: 0.5rem;
  text-decoration: none;
}
.citation-content .citation-help .help-card .archive-link:hover {
  text-decoration: underline;
}
.citation-content .citation-help .help-card .archive-btn {
  align-items: center;
  background: var(--button-bg);
  border-radius: 8px;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
  width: 100%;
}
.citation-content .citation-help .help-card .archive-btn i {
  font-size: 1rem;
}
.citation-content .citation-help .help-card .archive-btn:hover {
  transform: translateY(-1px);
}
.citation-content .citation-help .help-card .archive-btn:active {
  transform: translateY(0);
}

.copy-btn {
  align-items: center;
  background: var(--button-bg);
  border-radius: 6px;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  transition: all 0.2s ease;
}
.copy-btn.small {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}
.copy-btn.icon-only {
  background: transparent;
  color: var(--text-color);
  font-size: 0.8rem;
  padding: 0.25rem;
}
.copy-btn.icon-only:hover {
  background: var(--hover-bg);
  color: var(--text-color);
}
.copy-btn:hover {
  background: var(--button-hover-bg);
  transform: translateY(-1px);
}
.copy-btn:active {
  transform: translateY(0);
}
.copy-btn .sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.copied {
  animation: pulse 0.3s ease;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 480px) {
  .share-modal .citation-content .details-grid {
    grid-template-columns: 1fr;
  }
}
.replies-thread h2.thread-reply-title {
  margin-top: 0;
}
.replies-thread h2.thread-reply-title .fa {
  margin-right: 0.5rem;
}
.replies-thread span.subtitle {
  width: 100%;
  display: block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .replies-thread .post-card {
    padding-left: 0.5rem;
  }
}
.write-first-post {
  background-color: lightpink;
  color: black;
  font-weight: 500;
  padding: 20px;
}
.write-first-post .content {
  max-width: 768px;
  margin: 0 auto;
}
.write-first-post .content p {
  margin-bottom: 5px;
  font-size: 0.85rem;
}
.write-first-post button.close-notice {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
}

.topic-tabs {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
}
.topic-tabs .tabs-header {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}
.topic-tabs .tabs-list {
  display: flex;
  gap: 0;
}
.topic-tabs .tab-trigger {
  background: none;
  border: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.topic-tabs .tab-trigger:hover {
  color: var(--text-color);
  background-color: var(--secondary-bg);
}
.topic-tabs .tab-trigger.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  background-color: var(--secondary-bg);
}
.topic-tabs .tab-trigger .tab-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topic-tabs .tab-trigger .icon {
  width: 16px;
  height: 16px;
}
.topic-tabs .tab-trigger .count-badge {
  background-color: var(--border-color);
  color: var(--text-color);
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.25rem;
}
.topic-tabs .tab-trigger.active .count-badge {
  color: var(--accent-color);
}
.topic-tabs .tab-panel.hidden {
  display: none !important;
}
.topic-tabs .threads-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.topic-tabs .thread-card {
  transition: all 0.2s ease;
  display: block !important;
  visibility: visible !important;
  padding-left: 2em;
  border-left: 2px solid var(--article-line);
  border-radius: 0;
}
.topic-tabs .thread-card .thread-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--article-line);
}
.topic-tabs .thread-card .thread-item .thread-link {
  text-decoration: none;
  color: inherit;
}
.topic-tabs .thread-card .thread-item .thread-link:hover .thread-reply-title {
  color: var(--accent-color);
}
.topic-tabs .thread-card .thread-item .thread-reply-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}
.topic-tabs .thread-card .thread-item .thread-reply-title .fa {
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.topic-tabs .thread-card .thread-item .subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.topic-tabs .thread-card .thread-toggle {
  background: none;
  border-left: 2px solid var(--article-line);
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  border-right: 0;
  border-bottom: 0;
  border-top: 0;
}
.topic-tabs .thread-card .thread-toggle:hover {
  background-color: var(--secondary-bg);
  border-color: var(--text-secondary);
  color: var(--text-color);
}
.topic-tabs .thread-card .thread-toggle.expanded {
  background-color: var(--secondary-bg);
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.topic-tabs .thread-card .thread-toggle .toggle-icon {
  transition: transform 0.2s ease;
}
.topic-tabs .thread-card .thread-toggle .replies-count {
  background-color: var(--border-color);
  color: var(--text-color);
  padding: 0.125rem 0.375rem;
  border-radius: 0.75rem;
  font-size: 0.625rem;
  font-weight: 500;
  margin-left: 0.25rem;
}
.topic-tabs .thread-card .thread-toggle .replies-count.hidden {
  display: none;
}
.topic-tabs .thread-card .thread-toggle.expanded .replies-count {
  color: var(--accent-color);
}
.topic-tabs .thread-card .nested-content.hidden {
  display: none !important;
}
.topic-tabs .empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}
.topic-tabs .empty-state a {
  color: var(--text-secondary);
}
.topic-tabs .empty-state a i {
  margin-right: 10px;
}
.topic-tabs .empty-state p {
  margin-bottom: 0.25rem;
}
.topic-tabs .empty-state .sub-text {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.topic-tabs .error-state {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}
.topic-tabs .error-state .error-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  opacity: 0.5;
}
.topic-tabs .error-state .retry-button {
  margin-top: 0.5rem;
  color: var(--accent-color);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}
.topic-tabs .error-state .retry-button:hover {
  color: var(--accent-color-dark);
}
.topic-tabs .loading-spinner {
  text-align: center;
  padding: 2rem;
}
.topic-tabs .loading-spinner.hidden {
  display: none !important;
}
.topic-tabs .loading-spinner .spinner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
}
.topic-tabs .loading-spinner .spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-color);
  border-top: 2px solid var(--accent-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.topic-tabs .loading-spinner .spinner-small {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--border-color);
  border-top: 1px solid var(--success-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.reply-to-thread {
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: inline-block;
  margin-left: 10px;
}
.reply-to-thread i {
  margin-right: 5px;
}

.thread-item .trix-content {
  padding: 0 0 0 40px;
}
.thread-item .thread-link .subtitle {
  padding-left: 40px;
}

.thread-avatar-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 100%;
  border: 1px solid #f2f2f2;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.thread-avatar-wrapper:before {
  content: "";
  border-left: 1px solid var(--article-line);
  display: block;
  height: 13px;
  margin-left: 13px;
  margin-top: 30px;
  border-bottom: 1px solid var(--article-line);
}

.blogger-page {
  margin: 0 auto;
  max-width: 768px;
  padding: 2rem 20px;
}
.blogger-page .notification-toggle {
  margin-bottom: 1rem;
}

.blogger {
  background-color: var(--bg-color);
  border-radius: 12px;
  border: 1px solid var(--article-line);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.blogger-header {
  background-position: center;
  background-size: cover;
  height: 200px;
  position: relative;
}
.blogger-header-overlay {
  background: rgba(0, 0, 0, 0.4);
  inset: 0;
  position: absolute;
}
.blogger-avatar {
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  border: 1px solid var(--article-line);
  bottom: -60px;
  height: 120px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 120px;
}
.blogger-content {
  padding: 70px 20px 20px;
  text-align: center;
}
.blogger .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 1rem 0;
}
.blogger .social-links a {
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  display: flex;
  font-size: 18px;
  height: 40px;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  width: 40px;
}
.blogger .social-links a:hover {
  transform: scale(1.1);
}
.blogger .social-links a svg {
  width: 1.1rem;
  height: 1.1rem;
}

.category {
  margin: 80px auto 0;
  max-width: 768px;
  padding: 0 20px;
}
.category-header {
  margin-bottom: 2rem;
  text-align: center;
}
.category-image-container {
  border-radius: 8px;
  margin-bottom: 1.5rem;
  max-height: 300px;
  overflow: hidden;
  width: 100%;
}
.category-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
}
.category-title {
  font-family: "Merriweather", serif;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.category-description {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin: 0 auto;
  max-width: 800px;
}
.category-filter {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
.category-filter .filter-button {
  background-color: var(--secondary-bg);
  border-radius: 9999px;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  margin: 0 0.5rem;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s, color 0.3s;
}
.category-filter .filter-button.active,
.category-filter .filter-button:hover {
  background-color: var(--accent-color);
  color: white;
}

.categories {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  margin: 0 auto;
  max-width: 100%;
  padding: 2rem 1.5rem;
  width: 100%;
}
.categories-card {
  background-color: var(--bg-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.categories-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.categories-card h2 {
  color: var(--text-secondary);
  font-family: "Merriweather", serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.categories-card-image {
  border-radius: 8px;
  height: 200px;
  margin-bottom: 1rem;
  object-fit: cover;
  width: 100%;
}

/* Адаптивний дизайн */
@media (max-width: 1159px) {
  .categories {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
  .category-card.featured {
    grid-column: span 1;
  }
}
@media (max-width: 768px) {
  .categories {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  .categories-card {
    width: 100%;
  }
  .categories-card.featured {
    width: 100%;
  }
}
@media (min-width: 1160px) {
  .categories {
    max-width: 1160px;
  }
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .burger-menu {
    display: block;
  }
  .hero {
    padding-top: 5rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .post h2 {
    font-size: 1.5rem;
  }
  .bloggers {
    margin: 1.5rem 0 0.5rem;
  }
  .bloggers-list {
    grid-template-columns: 1fr;
  }
  .blogger-card {
    max-width: 300px;
    margin: 0 auto;
  }
  .blog-posts {
    padding: 1.5rem 1rem;
  }
  .post {
    padding-left: 1rem;
  }
  .footer-content {
    flex-direction: column;
  }
  .modal-content {
    padding-top: 80px;
  }
  .blog-cover {
    height: 150px;
  }
  .category-title {
    font-size: 2rem;
  }
  .category-description {
    font-size: 1rem;
  }
  .category-image-container {
    max-height: 200px;
  }
  .hero {
    padding-top: 5rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .no-blogs.unauthorized {
    margin: 2rem 1rem;
    padding: 1.5rem;
  }
  .no-blogs.unauthorized p {
    font-size: 1rem;
  }
  .no-blogs.unauthorized .google-button {
    padding: 10px 20px;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .blogger-header {
    height: 150px;
  }
  .blogger-avatar {
    width: 100px;
    height: 100px;
    bottom: -50px;
  }
  .blogger-content {
    padding-top: 60px;
  }
  .social-links {
    gap: 8px;
  }
  .social-links a {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .cta-section h2 {
    font-size: 1.5rem;
  }
  .footer-content {
    flex-direction: column;
  }
}
/*
Trix 1.2.3
Copyright © 2020 Basecamp, LLC
http://trix-editor.org/*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: black;
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}

trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}

trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}

trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}

trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-editor .trix-button.trix-active {
  background: #cbeefa;
}

trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}

trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}

trix-editor .trix-button--remove:hover {
  border-color: #333;
}

trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}

trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
}

.trix-content * {
  box-sizing: border-box;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
  margin: 0;
}

.trix-content blockquote {
  margin: 0 0 0 0.3em;
  padding: 0 0 0 0.6em;
  border-left: 0.3em solid #ccc;
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  margin: 0;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}

.trix-content ul, .trix-content ol, .trix-content li {
  margin: 0;
  padding: 0;
}

.trix-content ul li, .trix-content ol li, .trix-content li li {
  margin-left: 1em;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  padding: 0;
  text-align: center;
}

.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " · ";
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 0;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 0;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 50%;
  padding: 0 0.5em;
  max-width: 50%;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

trix-toolbar {
  padding: 10px 0;
  position: sticky;
  top: 64px;
  z-index: 666;
}
trix-toolbar button {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

trix-content a,
trix-editor a {
  color: var(--accent-color) !important;
  text-decoration: underline !important;
}

.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 50%;
  max-width: 100% !important;
  padding: 0 !important;
}
.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  display: flex;
  flex-basis: 50%;
  gap: 0.2rem;
  max-width: 100% !important;
  padding: 0 !important;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: calc(50% - 0.5rem);
  max-width: calc(50% - 0.5rem) !important;
}
.trix-content .action-text-attachment .attachment {
  margin: 20px 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.trix-content .attachment {
  border-radius: 1rem;
  max-width: 100% !important;
  flex-direction: column;
}
.trix-content .attachment img {
  border-radius: 1rem;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}
.trix-content trix-editor [data-trix-cursor-target] {
  display: none !important;
}

.trix-content,
.trix-editor {
  color: var(--text-color);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  padding: 0 1rem;
}
.trix-content h1, .trix-content h2, .trix-content h3, .trix-content h4, .trix-content h5, .trix-content h6,
.trix-editor h1,
.trix-editor h2,
.trix-editor h3,
.trix-editor h4,
.trix-editor h5,
.trix-editor h6 {
  font-weight: 700;
  line-height: 1.25;
  margin: 2.5rem 0 1.5rem;
}
.trix-content h1:first-child, .trix-content h2:first-child, .trix-content h3:first-child, .trix-content h4:first-child, .trix-content h5:first-child, .trix-content h6:first-child,
.trix-editor h1:first-child,
.trix-editor h2:first-child,
.trix-editor h3:first-child,
.trix-editor h4:first-child,
.trix-editor h5:first-child,
.trix-editor h6:first-child {
  margin-top: 0;
}
.trix-content h1,
.trix-editor h1 {
  font-size: 2rem;
}
.trix-content h2,
.trix-editor h2 {
  font-size: 2rem;
}
.trix-content h3,
.trix-editor h3 {
  font-size: 1.75rem;
}
.trix-content h4,
.trix-editor h4 {
  font-size: 1.5rem;
}
.trix-content h5,
.trix-editor h5 {
  font-size: 1.25rem;
}
.trix-content h6,
.trix-editor h6 {
  font-size: 1.1rem;
}
.trix-content p, .trix-content div,
.trix-editor p,
.trix-editor div {
  font-size: 1.125rem;
  margin: 0 0 1.5rem;
}
.trix-content p:last-child, .trix-content div:last-child,
.trix-editor p:last-child,
.trix-editor div:last-child {
  margin-bottom: 0;
}
.trix-content ul, .trix-content ol,
.trix-editor ul,
.trix-editor ol {
  margin: 0 0 1.5rem 1.25rem;
  padding-left: 1rem;
}
.trix-content ul li, .trix-content ol li,
.trix-editor ul li,
.trix-editor ol li {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
.trix-content ul ul, .trix-content ol ol, .trix-content ul ol, .trix-content ol ul,
.trix-editor ul ul,
.trix-editor ol ol,
.trix-editor ul ol,
.trix-editor ol ul {
  margin: 0.5rem 0 0.5rem 1.25rem;
}
.trix-content blockquote,
.trix-editor blockquote {
  background: var(--secondary-bg);
  border-left: 4px solid var(--accent-color);
  border-radius: 0.5rem;
  font-style: italic;
  margin: 2rem 0;
  padding: 1.5rem 2rem;
}
.trix-content blockquote p:last-child,
.trix-editor blockquote p:last-child {
  margin-bottom: 0;
}
.trix-content pre,
.trix-editor pre {
  background: var(--secondary-bg);
  border-radius: 0.5rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  padding: 1rem;
}
.trix-content code,
.trix-editor code {
  background: var(--secondary-bg);
  border-radius: 0.25rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
  padding: 0.2rem 0.4rem;
}
.trix-content a,
.trix-editor a {
  border-bottom: 1px solid transparent;
  color: var(--accent-color);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.trix-content a:hover,
.trix-editor a:hover {
  border-bottom-color: currentColor;
  color: var(--accent-color-dark);
}
.trix-content table,
.trix-editor table {
  border-collapse: collapse;
  margin: 1.5rem 0;
  width: 100%;
}
.trix-content table th, .trix-content table td,
.trix-editor table th,
.trix-editor table td {
  border: 1px solid var(--border-color);
  padding: 0.75rem;
  text-align: left;
}
.trix-content table th,
.trix-editor table th {
  background: var(--secondary-bg);
  font-weight: 600;
}
.trix-content table tr:nth-child(even),
.trix-editor table tr:nth-child(even) {
  background: var(--secondary-bg);
}
.trix-content hr,
.trix-editor hr {
  background: var(--article-line);
  border: none;
  height: 1px;
  margin: 2rem 0;
}
.trix-content dl,
.trix-editor dl {
  margin: 1.5rem 0;
}
.trix-content dl dt,
.trix-editor dl dt {
  font-weight: 600;
  margin-top: 1rem;
}
.trix-content dl dd,
.trix-editor dl dd {
  color: var(--text-secondary);
  margin-left: 1rem;
}
.trix-content small,
.trix-editor small {
  color: var(--text-secondary);
  font-size: 0.875em;
}
.trix-content sub, .trix-content sup,
.trix-editor sub,
.trix-editor sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.trix-content sup,
.trix-editor sup {
  top: -0.5em;
}
.trix-content sub,
.trix-editor sub {
  bottom: -0.25em;
}
.trix-content ::selection,
.trix-editor ::selection {
  background: var(--accent-color);
  color: var(--text-color-in);
}
.trix-content .clearfix,
.trix-editor .clearfix {
  clear: both;
  margin: 0 0 0.5rem 0 !important;
}
.trix-content figcaption textarea,
.trix-editor figcaption textarea {
  background: var(--secondary-bg);
  border-radius: 0.25rem;
  padding: 0.5rem;
  overflow: hidden;
}
.trix-content .attachment__caption,
.trix-editor .attachment__caption {
  color: var(--text-color) !important;
  background: var(--secondary-bg);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.85rem;
  font-size: 0.8rem !important;
  padding: 1rem;
  text-align: center;
}
.trix-content trix-editor [data-trix-mutable].attachment.attachment--file,
.trix-editor trix-editor [data-trix-mutable].attachment.attachment--file {
  border-radius: 4px;
}

.sticky-panel {
  position: fixed;
  bottom: 0;
  height: 60px;
  left: 0;
  right: 0;
  background: var(--bg-color);
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.sticky-panel--visible {
  transform: translateY(0);
}
.sticky-panel__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}
.sticky-panel__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sticky-panel__author-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text-color);
}
.sticky-panel__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #f2f2f2;
}
.sticky-panel__author-name {
  font-weight: 500;
}
.sticky-panel__actions {
  display: flex;
  gap: 1rem;
}
.sticky-panel__support-button {
  background: #ff4d4d !important;
  color: var(--text-color-in) !important;
}
.sticky-panel__support-button:hover {
  background: #ff4d4d !important;
}
.sticky-panel__support-button, .sticky-panel__edit-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s ease;
  text-decoration: none;
}
.sticky-panel__support-button {
  background: var(--primary-color);
  color: var(--text-color);
}
.sticky-panel__support-button:hover {
  background: var(--primary-color-dark);
}
.sticky-panel__edit-button {
  background: var(--secondary-color);
  color: var(--text-color);
}
.sticky-panel__edit-button:hover {
  background: var(--secondary-color-dark);
}
@media (max-width: 768px) {
  .sticky-panel__content {
    padding: 0 1rem;
  }
  .sticky-panel__author-name {
    display: none;
  }
}

.panel-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.panel-modal-overlay.hidden {
  display: none;
}
.panel-modal-overlay:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.panel-modal-overlay__content {
  background: var(--bg-color);
  border-radius: 12px;
  padding: 1.5rem;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}
.panel-modal-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.panel-modal-overlay__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.panel-modal-overlay__author-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text-color);
  transition: opacity 0.2s ease;
}
.panel-modal-overlay__author-link:hover {
  opacity: 0.8;
}
.panel-modal-overlay__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid var(--primary-color);
}
.panel-modal-overlay__author-name {
  font-size: 1.25rem;
  font-weight: 600;
}
.panel-modal-overlay__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-color);
  padding: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.panel-modal-overlay__close:hover {
  opacity: 1;
}
.panel-modal-overlay__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.panel-modal-overlay__section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.panel-modal-overlay__text {
  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
}
.panel-modal-overlay__subtitle {
  color: var(--text-color);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.panel-modal-overlay__share {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.panel-modal-overlay__input-group {
  display: flex;
  gap: 0.5rem;
}
.panel-modal-overlay__input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-modal-overlay__input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.panel-modal-overlay__copy {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0 1rem;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.panel-modal-overlay__copy:hover {
  background: var(--hover-color);
  border-color: var(--primary-color);
}
.panel-modal-overlay__share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--primary-color);
  border-radius: 6px;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.panel-modal-overlay__share-button:hover {
  background: var(--primary-color-dark);
  transform: translateY(-1px);
}
.panel-modal-overlay__social-links, .panel-modal-overlay__donation-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.panel-modal-overlay__social-link, .panel-modal-overlay__donation-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-color);
  text-decoration: none;
  transition: all 0.2s ease;
}
.panel-modal-overlay__social-link:hover, .panel-modal-overlay__donation-link:hover {
  background: var(--hover-color);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}
.panel-modal-overlay__social-link i, .panel-modal-overlay__donation-link i {
  font-size: 1.25rem;
  width: 1.5rem;
  text-align: center;
}
.panel-modal-overlay__donation-link {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-color);
  font-weight: 500;
}
.panel-modal-overlay__donation-link:hover {
  background: var(--primary-color-dark);
}
.panel-modal-overlay__notify-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.panel-modal-overlay__notify-button:hover {
  background: var(--hover-color);
  border-color: var(--primary-color);
  transform: translateY(-1px);
}
.panel-modal-overlay__notify-button i {
  font-size: 1.5rem;
  color: var(--primary-color);
}
.panel-modal-overlay__notify-button #buttonText {
  font-weight: 500;
  font-size: 1.1rem;
}
.panel-modal-overlay__notify-button #notifyDescription {
  font-size: 0.9rem;
  color: var(--text-color-secondary);
}
@media (max-width: 768px) {
  .panel-modal-overlay__content {
    padding: 1rem;
  }
  .panel-modal-overlay__author-name {
    font-size: 1.1rem;
  }
  .panel-modal-overlay__avatar {
    width: 40px;
    height: 40px;
  }
}

.admin-options {
  border-radius: 0.5rem;
  border: 2px solid #e74c3c;
  margin-bottom: 1rem;
  padding: 1rem;
}

.blog_drukarmy svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 10px;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
}

.category-pill {
  display: inline-block;
}

.topic-categories {
  padding: 0px 1rem;
  margin-top: 1rem;
}

.category-link {
  display: inline-block;
  padding: 0.4em 0.8em;
  background-color: #eef2f7;
  color: #333;
  font-size: 0.875rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.category-link:hover {
  background-color: #dce4ee;
  color: #000;
}