body {
  background: #181818;
  min-height: 100vh;
}
header, .navbar {
  background: linear-gradient(180deg, #232323 0%, #181818 100%) !important;
  border-bottom: 1px solid #232323 !important;
  box-shadow: 0 2px 16px 0 #0006;
}
.navbar {
  background: none !important;
}
.navbar-brand svg {
  margin-right: 0.5rem;
  vertical-align: middle;
}
.footer-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.3em;
  opacity: 0.7;
}
.nav-link.active, .nav-link:hover {
  color: #fff !important;
  text-shadow: 0 0 8px #60a5fa80;
}
.alert {
  opacity: 0.97;
}
.fade-in {
  animation: fadeIn 0.7s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Bootstrap Icons fix: ensure correct font-family */
.bi { font-family: "bootstrap-icons" !important; font-style: normal !important; }
/* Миниатюра заметки: строгий квадрат, не растягивается, не сжимается, всегда по центру */
.thumbnail-img {
  width: 196px !important;
  height: 196px !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #181818;
  border-radius: 0.5rem;
}
.thumbnail-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
}

.card.card-hover {
  transition: box-shadow 0.2s, border-color 0.2s;
}
.card.card-hover:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.25)!important;
  border-color: #0d6efd!important;
}

.thumbnail-img {
  background: #181818;
}

.link-primary-hover:hover {
  color: #0d6efd !important;
}

@media (max-width: 576px) {
  .thumbnail-img {
    width: 64px !important;
    height: 64px !important;
  }
}

.btn-readmore {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

/* Адаптивные изображения внутри текста заметки */
.note-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 0.5rem;
  box-shadow: 0 2px 12px #0003;
  object-fit: contain;
  background: #181818;
}

/* Миниатюры изображений */
.img-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid #444;
  background: #181818;
  margin: 0.2rem;
  box-shadow: 0 2px 8px #0002;
}

/* Модальное окно выбора размеров (компактно) */
#img-size-modal .modal-body-compact {
  padding: 0.7rem 0.7rem 0.5rem 0.7rem !important;
}
#img-size-modal .modal-img-preview {
  max-height: 48px !important;
  max-width: 90% !important;
  margin-bottom: 0.2rem !important;
  border-radius: 0.3rem !important;
}
#img-size-modal .form-control-sm {
  padding: 0.08rem 0.3rem;
  font-size: 0.93em;
  height: 1.5em;
  min-width: 0;
}
#img-size-modal .btn-sm {
  padding: 0.08rem 0.5rem;
  font-size: 0.93em;
  height: 1.5em;
  min-width: 0;
}
#img-size-modal .d-flex {
  gap: 0.18rem !important;
}
#img-size-modal .mb-1 {
  margin-bottom: 0.18rem !important;
}
#img-size-modal .mt-1 {
  margin-top: 0.18rem !important;
}
#img-size-modal .rounded {
  border-radius: 0.3rem !important;
}
#img-size-modal .modal-hint {
  font-size: 0.85em;
  color: #888 !important;
  margin-left: 0.3em;
  cursor: help;
  border-bottom: 1px dotted #888;
}
#img-size-modal .btn {
  min-width: 0;
  border-radius: 0.22rem;
}
#img-size-modal .modal-btn-row {
  display: flex;
  gap: 0.18rem;
  justify-content: flex-end;
  margin-top: 0.1rem;
}
#img-size-modal .modal-title-compact {
  font-size: 0.98em;
  margin-bottom: 0.1rem;
}
#img-size-modal .modal-close-btn {
  top: 0.2rem !important;
  right: 0.2rem !important;
  font-size: 1.1rem !important;
}
#img-size-modal {
  z-index: 2000 !important;
}

.material-icons {
  font-family: 'Material Icons' !important;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
}

.profile-header {
  min-height: 70px;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  background: #181818 url('/static/img/profile_header.svg') center/cover no-repeat;
}
.profile-header--custom {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
footer.footer {
  background: #181818 !important;
  border-top: 1px solid #232323 !important;
  color: #888 !important;
  box-shadow: 0 -2px 16px 0 #0004;
}
.footer-icon svg {
  filter: drop-shadow(0 0 4px #60a5fa55);
}
.footer a {
  color: #60a5fa;
  text-decoration: underline dotted;
  transition: color 0.2s;
}
.footer a:hover {
  color: #fff;
  text-decoration: underline;
}
/* --- Комментарии и ответы --- */
.reply-form, #comment-form {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  display: block !important;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}
.reply-form.show, #comment-form.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  height: auto;
  overflow: visible;
}
.reply-form.d-none, #comment-form.d-none {
  display: none !important;
  opacity: 0 !important;
  height: 0 !important;
}
.comment-new {
  animation: comment-fade-in 1.2s cubic-bezier(.4,1.4,.6,1) 1;
  background: linear-gradient(90deg, #2d3748 60%, #3b4252 100%);
  box-shadow: 0 0 0 2px #60a5fa55;
}
@keyframes comment-fade-in {
  from { background: #2563eb; opacity: 0.2; }
  to { background: linear-gradient(90deg, #2d3748 60%, #3b4252 100%); opacity: 1; }
}
.collapse-replies-btn { cursor:pointer; }
.replies-list.collapsed { display: none; }
/* Гарантируем видимость форм комментариев и ответов */
#comment-form,
.reply-form {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Reply-форма скрывается только через .d-none */
.reply-form.d-none {
  display: none !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}