/*!
 * Repost — main theme styles
 * Version: 3.0
 * Developer: HideDev — https://hidedev.com
 * Support: https://t.me/hidedevsupport
 */
*,
::after,
::before {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-color);
  background-color: var(--body-bg);
  margin: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: 100%;
}
a {
  text-decoration: none;
  color: var(--color-primary);
}
p {
  margin: 0;
  padding: 0;
}
/* Page layout */

/* Grid */

.main {
  display: grid;
  min-width: 0;
  margin-top: var(--header-offset);
}

.main__grid {
  grid-template-columns: 50px minmax(280px, auto) 320px;
  grid-gap: var(--main-gap);
}
.main__grid-full {
  grid-template-columns: 50px minmax(280px, auto);
  grid-gap: var(--main-gap);
}
.main__grid-feed {
  grid-template-columns: minmax(280px, auto) 320px;
  grid-gap: var(--main-gap);
}
.feed {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--main-gap);
  padding-bottom: var(--main-gap);
}

.profile__aside {
  position: sticky;
  top: calc(var(--header-height) + var(--header-offset));
  align-self: start;
}
/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.header__inner {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 250px;
  align-items: center;
  grid-gap: 10px;
  height: var(--header-height);
  background-color: var(--body-bg);
  border-bottom: 1px solid var(--border-color);
}
.header__nav {
  --header-tabs-padding: 3px;
  --header-tabs-x: var(--header-tabs-padding);
  --header-tabs-width: 0px;
  --header-tabs-indicator-opacity: 0;

  position: relative;
  isolation: isolate;
  display: flex;
  justify-self: center;
  width: max-content;
  height: 44px;
  padding: var(--header-tabs-padding);
  overflow: hidden;
  border-radius: 22px;
  background-color: var(--gray-150);
}
.header__nav.is-ready {
  --header-tabs-indicator-opacity: 1;
}
.header__nav::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--header-tabs-padding);
  left: 0;
  width: var(--header-tabs-width);
  height: calc(100% - 6px);
  border-radius: 19px;
  background-color: var(--white-900);
  box-shadow:
    0 2px 8px rgb(15 23 42 / 8%),
    inset 0 0 0 1px rgb(15 23 42 / 3%);
  opacity: var(--header-tabs-indicator-opacity);
  transform: translate3d(var(--header-tabs-x), 0, 0);
  transition:
    transform 260ms ease,
    width 260ms ease,
    opacity 180ms ease;
}
.header__nav a {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  height: 100%;
  padding-inline: 20px;
  border-radius: 19px;
  color: var(--gray-500);
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: color 220ms ease;
}
.header__nav a:is(.is-current, :hover, :focus-visible) {
  color: var(--title-color);
}
.header__nav:not(.is-ready) a.active {
  color: var(--title-color);
  background-color: var(--white-900);
  box-shadow:
    0 2px 8px rgb(15 23 42 / 8%),
    inset 0 0 0 1px rgb(15 23 42 / 3%);
}
.header__nav a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.header__start,
.header__end {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.header__start {
  justify-content: start;
}
.header__end {
  justify-content: end;
}

/* Sidebar */

.sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--header-offset));
  display: flex;
  height: calc(100vh - var(--header-height) - var(--header-offset));
  height: calc(100dvh - var(--header-height) - var(--header-offset));
  flex-direction: column;
  overflow: hidden;
}
.sidebar__body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sidebar__body::-webkit-scrollbar {
  display: none;
}
.sidebar__section,
.sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar__list li {
  display: flex;
}
.sidebar__title {
  font-family: var(--font-primary);
  margin-bottom: 0.5rem;
  color: var(--color-gray);
  font-size: 0.875em;
  font-weight: 400;
}
.sidebar__footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding-block: 0.5rem;
  background-color: var(--body-bg);
}
.sidebar .online::before {
  --online-border-color: var(--body-bg);
}
/* Widgets */

.widgets {
  display: flex;
  flex-direction: column;
  gap: var(--main-gap);
}

.widget {
  --widget-gap: 15px;
  --widget-content-bleed: 10px;
  --widget-list-gap: 2px;
  gap: var(--widget-gap);
}

.widget__title {
  margin: 0;
}

.widget__footer {
  font-size: 0.8rem;
}
.widget__content {
  min-width: 0;
}
.widget__content--bleed {
  margin-inline: calc(var(--widget-content-bleed) * -1);
}
.widget__content--full-bleed {
  margin-inline: calc(var(--card-spacer-x) * -1);
}
.widget__content-offset {
  margin-top: 10px;
}
.widget__list {
  display: flex;
  flex-direction: column;
  gap: var(--widget-list-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.widget__list--separator li:not(:first-child) {
  margin-top: 11px;
}

.widget__list--separator li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
}
.widget__list--separator-lg li:not(:first-child) {
  margin-top: 25px;
}
.widget__list--separator-lg li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
}

.widget__list--limit {
  height: auto;
  max-height: 500px;
  padding-right: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.widget__list--limit::-webkit-scrollbar {
  width: 4px;
  height: 10px;
}

.widget__list--limit::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background: transparent;
}

.widget__list--limit:hover::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
}

.widget__list--limit::-webkit-scrollbar-track {
  background: transparent;
}

/* User list */
.widget__subscribers {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.widget__subscribers > a {
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.widget__subscribers > a:hover img {
  opacity: 0.8;
}
.widget__subscribers img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

/* Footer */
.footer {
  --footer-offset: 20px;
  --footer-spacer: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--footer-offset) var(--footer-offset);
}
.footer__menu {
  display: flex;
  align-items: center;
  gap: var(--footer-spacer);
}
.footer__menu-link {
  font-size: 0.8rem;
  color: var(--gray-500);
  transition: var(--transition);
}
.footer__menu-link:hover {
  color: var(--gray-700);
}
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* Hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-inline: 20px;
}
.hero__title {
  margin-bottom: 0;
}
.hero__header-main {
  display: grid;
  grid-template-columns: 1fr 27px;
  gap: 5px;
  align-items: center;
  margin-bottom: 10px;
  padding-inline: 10px;
}
.hero__sort-toggle {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 20px;
}

.hero__sort-toggle > .dropdown-menu {
  --dropdown-menu-left: auto;
  --dropdown-menu-right: 0;
}
.hero__toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 16px;
  padding-inline: 5px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--gray-500);
}
.hero__toggle-text {
  transition: var(--transition);
}

.hero__toggle:hover .hero__toggle-text {
  color: var(--gray-700);
}
.hero__toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--btn-focus-ring-color);
}
.hero__digest {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero__digest-more {
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
/* Common blocks */

/* Logo */

.logo {
  --logo-icon-size: 36px;
  --logo-text-size: 1.5rem;
  display: grid;
  align-items: center;
  grid-template-columns: var(--logo-icon-size) 1fr;
  grid-gap: 0.5rem;
  will-change: transform;
  transition: var(--transition);
}
.logo:active {
  transform: scale(0.98);
}
.logo-icon {
  width: var(--logo-icon-size);
  height: var(--logo-icon-size);
}
.logo-text {
  color: var(--title-color);
  font-family: var(--font-accent);
  font-size: var(--logo-text-size);
  font-weight: 500;
}

/* Theme switch */
.switcher::before {
  --switcher-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3A7 7 0 0 0 21 12.79Z'/%3E%3C/svg%3E");

  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: currentColor;

  -webkit-mask: var(--switcher-icon) center / contain no-repeat;
  mask: var(--switcher-icon) center / contain no-repeat;

  transition: var(--transition);
}

[data-theme="dark"] .switcher::before {
  --switcher-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}

/* Search */

.search-modal {
  --modal-content-radius: 25px;
}

.search {
  width: 100%;
}

.search__form {
  position: relative;
  padding-block: 5px;
}

.search__form input {
  width: 100%;
  padding: 20px 105px 20px 60px;
  border: 0;
  outline: 0;
  color: var(--text-color);
  background-color: transparent;
  font: inherit;
  box-shadow: none;
}

.search__form input::placeholder {
  color: var(--color-gray);
}

.search__form input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search__form::before {
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 15l6 6m-11-4a7 7 0 1 1 0-14a7 7 0 0 1 0 14'/%3E%3C/svg%3E");

  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: var(--color-gray);
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask: var(--search-icon) center / contain no-repeat;
  mask: var(--search-icon) center / contain no-repeat;
}

.search__actions {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search__options[hidden] {
  display: none;
}

.search__options.is-listening {
  --btn-color: var(--color-red);
  --btn-bg: var(--red-100);
  --btn-hover-color: var(--red-600);
  --btn-hover-bg: var(--red-100);

  animation: search-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes search-mic-pulse {
  50% {
    transform: scale(1.08);
  }
}

/* Edit button */
.edit {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
}

/* Pages */

/* Static page */
.static__footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}
.static__counts {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--color-gray);
}
.static__counts-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Feedback */
.feedback__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0;
  list-style: none;
  margin-top: 15px;
}

/* Page content */
.searchpage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
}
.searchpage__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.searchpage__header > * {
  margin: 0;
}
.searchpage #searchtable {
  min-width: 0;
}
.searchpage__simple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}
.searchpage__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.searchpage__section {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
}
.searchpage__section > :is(h2, h3, p) {
  margin: 0;
}
.searchpage__section--wide {
  grid-column: 1 / -1;
}
.searchpage__fields {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}
.searchpage__control {
  display: grid;
  min-width: 0;
  gap: 6px;
}
.searchpage__control
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  max-width: 100%;
}
.searchpage__label {
  color: var(--color-gray);
  font-size: 0.8rem;
}
.searchpage__option,
.searchpage__inline-control {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.85rem;
}
.searchpage .form-check-label {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.searchpage .form-check-input:is([type="checkbox"], [type="radio"]) {
  appearance: none;
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  flex: 0 0 18px;
  border: 1px solid var(--gray-300);
  outline: 0;
  background-color: var(--color-surface-overlay);
  box-shadow: 0 2px 3px rgb(15 23 42 / 4%);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}
.searchpage .form-check-input[type="checkbox"] {
  border-radius: 6px;
}
.searchpage .form-check-input[type="radio"] {
  border-radius: 50%;
}
.searchpage .form-check-input:is([type="checkbox"], [type="radio"])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-white);
  translate: -50% -50%;
  scale: 0;
  transition: scale 0.16s cubic-bezier(0.2, 0.8, 0.2, 1.25);
}
.searchpage .form-check-input[type="checkbox"]::before {
  width: 9px;
  height: 9px;
  clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 20%, 84% 5%, 38% 71%);
}
.searchpage .form-check-input[type="radio"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.searchpage .form-check-label:hover .form-check-input:not(:checked) {
  border-color: var(--gray-400);
}
.searchpage .form-check-input:is([type="checkbox"], [type="radio"]):checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  box-shadow: 0 2px 5px
    color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.searchpage
  .form-check-input:is([type="checkbox"], [type="radio"]):checked::before {
  scale: 1;
}
.searchpage
  .form-check-input:is([type="checkbox"], [type="radio"]):focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.searchpage .form-check-input:is([type="checkbox"], [type="radio"]):active {
  transform: scale(0.9);
}
.searchpage__inline-control > :is(input, select) {
  width: min(100%, 160px);
}
.searchpage__sort-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.searchpage__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.searchpage__result {
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}
/* Statistics */
.stats__counts,
.stats__chart-grid {
  display: grid;
  gap: var(--main-gap);
}

.stats__counts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats__chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats__count-card {
  display: flex;
  min-width: 0;
  min-height: 130px;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
}

.stats__count-card--posts {
  --stats-count-color: var(--color-primary);
  --stats-count-bg: var(--blue-400);
}

.stats__count-card--comments {
  --stats-count-color: var(--orange-500);
  --stats-count-bg: var(--orange-100);
}

.stats__count-card--users {
  --stats-count-color: var(--green-500);
  --stats-count-bg: var(--green-100);
}

.stats__count-head,
.stats__count-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stats__count-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--stats-count-color);
  background-color: var(--stats-count-bg);
}

.stats__count-icon svg {
  display: block;
}

.stats__count-label,
.stats__count-num {
  font-family: var(--font-secondary);
}

.stats__count-label {
  font-weight: 500;
}

.stats__count-num {
  color: var(--title-color);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.stats__count-success {
  padding: 1px 10px;
  border-radius: 15px;
  color: var(--green-500);
  background-color: var(--green-100);
  font-size: 0.8rem;
  line-height: 1.5;
}

.stats__chart {
  min-width: 0;
}

.stats__chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.stats__chart-head .h3 {
  margin-bottom: 4px;
}

.stats__chart-canvas {
  min-height: 320px;
}

.stats__chart-canvas--wide {
  min-height: 360px;
}

.stats__chart-canvas--compact {
  min-height: 330px;
}

.stats__chart-canvas .apexcharts-canvas,
.stats__chart-canvas .apexcharts-svg {
  max-width: 100%;
}

.stats__chart-canvas .apexcharts-legend {
  gap: 8px;
}

/* Private messages */
.pm {
  --pm-primary: var(--color-primary);
  --pm-secondary: var(--color-secondary);
  --pm-secondary-light: var(--gray-100);
  --pm-muted: var(--color-gray);
  --pm-green: var(--color-green);
  --pm-transition: 0.15s ease;
}

.pm__header {
  position: sticky;
  z-index: 40;
  top: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: -20px -20px -20px;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  background-color: var(--card-bg);
}

.pm__header .h3 {
  margin: 0;
}

.pm__header .h3 a {
  color: var(--title-color);
}

.pm__limit-label {
  color: var(--pm-muted);
  font-size: 0.8rem;
}

.pm__dropdown {
  min-width: 210px;
}

.pm__dropdown-limit {
  margin-top: 4px;
  padding: 12px 10px 5px;
  border-top: 1px solid var(--border-color);
}

.pm__list-wrap,
.pm__new {
  margin-top: 20px;
}

.pm__list-wrap {
  margin-inline: -10px;
}

.pm__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm__form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.pm-dialog {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.pm-dialog__header {
  display: flex;
  align-items: center;
  padding: 14px 0;
}

.pm-dialog__heading {
  min-width: 0;
}

.pm-dialog__heading h2 {
  margin: 0;
  overflow: hidden;
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-dialog__recipient {
  margin-top: 2px;
  color: var(--pm-muted);
  font-size: 0.78rem;
}

.pm-dialog__messages {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  gap: 12px;
}

.pm-dialog__message {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: flex-end;
  gap: 10px;
}

.pm-dialog__message.is-incoming {
  align-self: flex-start;
}

.pm-dialog__message.is-own {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.pm-dialog__avatar {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.pm-dialog__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--pm-secondary);
  object-fit: cover;
}

.pm-dialog__avatar .is-online {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 8px;
  height: 8px;
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  background-color: var(--pm-green);
}

.pm-dialog__message-main {
  min-width: 0;
  max-width: 70%;
  flex: 0 1 auto;
}

.pm-dialog__message.is-own .pm-dialog__message-main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.pm-dialog__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 4px;
  color: var(--pm-muted);
  font-size: 0.7rem;
}

.pm-dialog__message.is-own .pm-dialog__meta {
  flex-direction: row-reverse;
}

.pm-dialog__author {
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  font-weight: 700;
}

.pm-dialog__bubble {
  width: auto;
  min-width: 90px;
  padding: 10px 13px;
  border-radius: 16px 16px 16px 5px;
  color: var(--color-white);
  background-color: var(--pm-primary);
  font-size: 0.86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.pm-dialog__message.is-own .pm-dialog__bubble {
  border-radius: 16px 16px 5px 16px;
  color: var(--text-color);
  background-color: var(--pm-secondary-light);
}

.pm-dialog__text > div > :last-child,
.pm-dialog__text > :last-child {
  margin-bottom: 0;
}

.pm-dialog__message.is-incoming .pm-dialog__bubble a {
  color: var(--color-white);
  text-decoration: underline;
}

.pm-dialog__message.is-own .pm-dialog__bubble a {
  color: var(--color-primary);
}

.pm-dialog__signature {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgb(15 23 42 / 10%);
  font-size: 0.75rem;
  opacity: 0.75;
}

.pm-dialog__actions {
  position: relative;
  z-index: 3;
  display: inline-flex;
  visibility: hidden;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  opacity: 0;
  transition:
    visibility var(--pm-transition),
    opacity var(--pm-transition);
}

.pm-dialog__message:hover .pm-dialog__actions,
.pm-dialog__message:focus-within .pm-dialog__actions,
.pm-dialog__actions.is-open,
.pm-dialog__actions:has(.dropdown-menu.show) {
  visibility: visible;
  opacity: 1;
}

.pm-dialog__more {
  display: inline-flex;
  width: 22px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--pm-muted);
  background: transparent;
  cursor: pointer;
}

.pm-dialog__more svg {
  display: block;
  fill: currentColor;
  transform: translateY(1px);
}

.pm-dialog__actions .dropdown-menu {
  min-width: 190px;
}

.pm-dialog__actions .dropdown-menu-item > :is(a, button) {
  font-size: 0.8rem;
}

.pm-dialog__actions .dropdown-item {
  font-size: 0.8rem;
}

.pm-dialog__composer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm-dialog__composer h3 {
  margin: 0;
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 700;
}

.pm-dialog__editor {
  min-width: 0;
}

.pm-dialog__composer-actions {
  display: flex;
  justify-content: flex-end;
}

.pm-no-messages {
  display: block;
  width: 100%;
  padding-block: 50px;
  color: var(--pm-muted);
  font-size: 0.8rem;
  text-align: center;
}

.pm__dropdown-limit .pm_progress_bar {
  max-width: none;
}

.pm_progress_bar {
  position: relative;
  width: 100%;
  max-width: 30%;
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--pm-secondary-light);
  font-size: 0;
}

.pm_progress_bar span {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 3%;
  height: 5px;
  background-color: var(--pm-primary);
}

.pm-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 5px;
}

.pm-item {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 10px 6px 10px 10px;
  border-radius: 12px;
  transition: background-color var(--pm-transition);
}

.pm-item.is-unread,
.pm-item:hover,
.pm-item:focus-within {
  background-color: var(--pm-secondary-light);
}

.pm-item__link {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

.pm-item__avatar {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  transition: opacity var(--pm-transition);
}

.pm-item__avatar:hover {
  opacity: 0.8;
}

.pm-item__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--pm-secondary);
  object-fit: cover;
}

.pm-item__online {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  background-color: var(--pm-muted);
}

.pm-item__online.is-online {
  background-color: var(--pm-green);
}

.pm-item__body {
  min-width: 0;
  padding-right: 30px;
  flex: 1 1 auto;
}

.pm-item__name {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--pm-transition);
}

.pm-item__name:hover {
  color: var(--title-color);
  opacity: 0.8;
}

.pm-item.is-unread .pm-item__name {
  font-weight: 700;
}

.pm-item__preview {
  display: flex;
  min-width: 0;
  align-items: center;
  margin-top: 3px;
  padding-right: 100px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.pm-item__subject {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-width: 0;
  margin-right: 5px;
  flex: 0 1 auto;
  color: var(--pm-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-item__subject::after {
  margin-left: 1px;
  color: currentColor;
  content: ":";
}

.pm-item__subject .pm_list {
  color: inherit;
}

.pm-item__message {
  overflow: hidden;
  min-width: 45px;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-item__preview time {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: var(--pm-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.pm-item__dropdown {
  position: absolute;
  z-index: 30;
  top: 6px;
  right: 6px;
  visibility: hidden;
  opacity: 0;
  transition:
    visibility var(--pm-transition),
    opacity var(--pm-transition);
}

.pm-item:hover .pm-item__dropdown,
.pm-item:focus-within .pm-item__dropdown,
.pm-item__dropdown.is-open,
.pm-item__dropdown:has(.dropdown-menu.show) {
  visibility: visible;
  opacity: 1;
}

.pm-item__more {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--pm-muted);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--pm-transition),
    background-color var(--pm-transition);
}

.pm-item__more:hover,
.pm-item__more[aria-expanded="true"] {
  color: var(--text-color);
  background-color: transparent;
}

.pm-item__more svg {
  display: block;
  fill: currentColor;
}

.pm-item__dropdown .dropdown-menu {
  min-width: 220px;
}

.pm-item__dropdown .dropdown-menu-item > :is(a, button) {
  font-size: 0.82rem;
}

.pm-item__dropdown .dropdown-item {
  font-size: 0.82rem;
}

.pm #pmlist > .navigation {
  margin-top: 18px;
}

#pmlist {
  padding-bottom: 0;
  transition: opacity var(--pm-transition);
}

#pmlist.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.pm-unread-filter {
  --switch-width: 36px;
  --switch-height: 20px;
  --switch-thumb-size: 14px;
  --switch-padding: 3px;
  --switch-bg: var(--gray-300);
  --switch-checked-bg: var(--color-primary);
  --switch-thumb-bg: var(--color-white);
  --switch-focus-ring: color-mix(
    in srgb,
    var(--color-primary) 20%,
    transparent
  );

  position: sticky;
  z-index: 20;
  bottom: 0;
  display: flex;
  width: calc(100% + 20px);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px -10px -20px;
  padding: 14px 16px 16px;
  border-radius: 0 0 20px 20px;
  color: var(--pm-muted);
  background-color: var(--card-bg);
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
}

.pm.is-footer-floating .pm-unread-filter {
  box-shadow: 0 -8px 18px rgb(15 23 42 / 4%);
}

.pm-unread-filter__label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.pm-unread-filter__label svg {
  flex: 0 0 auto;
  color: var(--pm-muted);
  fill: currentColor;
}

.pm-unread-filter__input {
  appearance: none;
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
  min-width: var(--switch-width);
  float: none;
  margin: 0;
  flex: 0 0 var(--switch-width);
  border: 0;
  border-radius: calc(var(--switch-height) / 2);
  outline: 0;
  background-color: var(--switch-bg);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 6%);
  vertical-align: top;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

.pm-unread-filter__input::before {
  position: absolute;
  top: var(--switch-padding);
  left: var(--switch-padding);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: 50%;
  background-color: var(--switch-thumb-bg);
  box-shadow: 0 1px 3px rgb(15 23 42 / 22%);
  content: "";
  translate: 0 0;
  transition: translate 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pm-unread-filter__input:checked {
  background-color: var(--switch-checked-bg);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 4%);
}

.pm-unread-filter__input:checked::before {
  translate: calc(
      var(--switch-width) - var(--switch-thumb-size) -
        (var(--switch-padding) * 2)
    )
    0;
}

.pm-unread-filter__input:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--switch-focus-ring);
}

.pm-unread-filter__input:active:not(:disabled) {
  transform: scale(0.94);
}

.pm-unread-filter:has(.pm-unread-filter__input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.pm-unread-filter__input:disabled {
  cursor: not-allowed;
}

.pm-dialog__recipient .pm_list {
  color: var(--pm-primary);
}

.pm-dialog__author .pm_list {
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  font-weight: 700;
}

/* User rating */
.user-rating__list {
  counter-reset: user-rating;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px 10px;
  margin-inline: calc(10px * -1);
  padding: 0;
  list-style: none;
  margin: 0;
}

.user-rating__list > .user-card {
  counter-increment: user-rating;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.user-rating__list > .user-card::before {
  content: counter(user-rating);
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-color);
  background-color: var(--gray-200);
  font-size: 0.7rem;
  line-height: 1;
}
/* Subscriptions */
.subscriptions__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.subscriptions__section > h2 {
  margin: 0;
}
.subscriptions__users {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  list-style: none;
  padding: 0;
  margin-inline: -10px;
}

.user-card-sub {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-card-sub > .user-box {
  flex: 1 1 auto;
}

.user-card-sub__action {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
}

.user-card__subscribe {
  --btn-size: 26px;
  padding: 0;
  line-height: 1;
}

.subscriptions__none {
  padding-block: 30px;
  text-align: center;
}

.subscriptions__channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  margin-top: 0.5rem;
  padding: 0;
  list-style: none;
}

.subscriptions__channels > li {
  min-width: 0;
}

.subchannel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  padding: 10px;
  min-height: 170px;
}

.subchannel:hover {
  background-color: var(--gray-150);
}
.subchannel__footer {
  margin-top: auto;
}
.subchannel__icon {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline: auto;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--color-gray);
}

.subchannel__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subchannel__name {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-top: 1rem;
  margin-inline: auto;
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 700;
  color: var(--title-color);
  text-align: center;
  transition: opacity 0.15s ease;
}

.subchannel__name:hover {
  opacity: 0.8;
}

.subchannel__count {
  margin-top: 5px;
  color: var(--color-gray);
  font-size: 0.8rem;
  text-align: center;
}

.subchannel > .btn {
  width: 100%;
  margin-top: 1.5rem;
}

.subscriptions__action {
  font-size: 0.85rem;
}

/* Channels */

.channel-page {
  min-width: 0;
}

.channel {
  position: relative;
  padding-bottom: 0;
}

.channel__icon {
  display: flex;
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--color-gray);
  background-color: var(--gray-200);
}

.channel__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.channel__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.channel__description-text {
  max-width: 560px;
}
.channel__overview {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 20px;
}
.channel__overview,
.channel__content {
  min-width: 0;
}

.channel__title {
  margin-bottom: 0;
}

.channel__description {
  margin-top: 8px;
}

.channel__side {
  justify-self: end;
  min-width: 0;
}

.channel__authors {
  margin-top: 24px;
}

.channel__authors-title {
  margin-bottom: 4px;
  color: var(--color-gray);
  font-size: 0.8rem;
}

.channel__tabs {
  margin-top: 24px;
}

.channel-page__content {
  min-width: 0;
  padding-bottom: var(--main-gap);
}

.channel__posts {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--main-gap);
}

.channel__subscribers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.channel__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding-inline: 10px;
}
.channel__hero-start {
  display: flex;
  align-items: center;
  gap: 10px;
}
.channel__hero-count {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--gray-500);
}

.channel__tags {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.channel__tags::-webkit-scrollbar {
  display: none;
}

.channel__tags-list {
  display: flex;
  justify-content: flex-end;
  width: max-content;
  min-width: 100%;
  gap: 5px;
  direction: ltr;
}

.channel__tags-list > * {
  flex: 0 0 auto;
}

.channel__tags a {
  display: flex;
  color: var(--color-primary);
  font-size: 0.8rem;
  white-space: nowrap;
}

.channel__tags a:hover,
.channel__tags a:focus-visible {
  text-decoration: underline;
}

.channel__tags a::before {
  content: "#";
}

.channel-icon {
  --channel-icon-size: 50px;

  display: flex;
  width: var(--channel-icon-size);
  height: var(--channel-icon-size);
  border-radius: 50%;
  overflow: hidden;
}
.channel-icon.no-icon {
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  background-color: var(--gray-200);
}
.channel-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}
.channel-icon:hover img {
  opacity: 0.8;
}
.channel-icon.is-active {
  position: relative;
}
.channel-icon.is-active::before,
.channel-icon.is-active::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.channel-icon.is-active::before {
  inset: 0;
  border: 2px solid var(--color-primary);
}
.channel-icon.is-active::after {
  inset: 2px;
  border: 1px solid var(--body-bg);
}
/* User */

/* User list */
.user-set {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 5px;
}

.user-set__item {
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.user-set__item:not(:first-child) {
  margin-left: -5px;
}

.user-set__link,
.user-set__link img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.user-set__link {
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--card-bg);
}

.user-set__link img {
  object-fit: cover;
  transition: opacity 140ms ease;
}

.user-set__link:hover img {
  opacity: 0.8;
}

.user-set__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Avatar */
.avatar {
  --avatar-sizes: 40px;
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
  width: var(--avatar-sizes);
  height: var(--avatar-sizes);
  border-radius: 50%;
}
.avatar-sm {
  --avatar-sizes: 20px;
}
.avatar-md {
  --avatar-sizes: 30px;
}
.avatar-lg {
  --avatar-sizes: 50px;
}
.avatar-xl {
  --avatar-sizes: 90px;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transition: var(--transition);
}
.avatar:hover img {
  opacity: 0.8;
}

.avatar-upload-field {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}

.avatar-upload-field__content {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
}

.avatar-upload-field__title {
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}

.avatar-upload-field__description {
  margin: 0;
  color: var(--gray-500);
  font-size: 0.8rem;
  line-height: 1.45;
}

.avatar__upload {
  position: relative;
  display: grid;
  width: 90px;
  height: 90px;
  flex: 0 0 90px;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--blue-100);
  border-radius: 50%;
  background-color: var(--blue-100);
  box-shadow: 0 3px 10px rgb(15 23 42 / 8%);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.avatar__upload-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    filter 0.15s ease,
    transform 0.2s ease;
}

.avatar__upload::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 3px 8px rgb(15 23 42 / 20%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.avatar__upload input[type="file"] {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.avatar__upload:hover {
  border-color: var(--blue-400);
  box-shadow: 0 5px 14px rgb(15 23 42 / 12%);
}

.avatar__upload:hover .avatar__upload-image {
  filter: brightness(0.65);
  transform: scale(1.04);
}

.avatar__upload:hover::after,
.avatar__upload:has(input[type="file"]:focus-visible)::after {
  opacity: 1;
  transform: scale(1);
}

.avatar__upload:has(input[type="file"]:focus-visible) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.avatar__upload:active {
  transform: scale(0.97);
}

.avatar__upload:has(input[type="file"]:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.avatar__upload input[type="file"]:disabled {
  cursor: not-allowed;
}

.newpm {
  position: relative;
}
.newpm::before {
  --newpm-size: 9px;
  content: "";
  width: var(--newpm-size);
  height: var(--newpm-size);
  border-radius: 50%;
  border: 2px solid var(--body-bg);
  background-color: var(--red-500);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
/* User menu */
.user-card {
  --user-card-border-radius: 15px;
  --user-card-spacer-y: 10px;
  --user-card-spacer-x: 10px;
  padding: var(--user-card-spacer-y) var(--user-card-spacer-x);
  border-radius: var(--user-card-border-radius);
  transition: background-color 140ms ease;
}
.user-card:is(:hover, :focus-within) {
  background-color: var(--content-item-hover-bg);
}
.user-box {
  --user-box-sizes: 40px;
  --user-box-gap-x: 10px;
  --user-box-gap-y: 9px;
  display: grid;
  min-width: 0;
  grid-template-columns: var(--user-box-sizes) minmax(0, 1fr);
  align-items: center;
  grid-gap: var(--user-box-gap-x);
}
.user-box-sm {
  --user-box-sizes: 20px;
}
.user-box-sm .avatar {
  --avatar-sizes: 20px;
}
.user-box-sm .online::before {
  --online-size: 8px;
  bottom: -1px;
  right: -2px;
}
.user-box-md {
  --user-box-sizes: 30px;
}
.user-box-md .avatar {
  --avatar-sizes: 30px;
}
.user-box-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--user-box-gap-y);
}

.user-box-content > a:has(> .name) {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  line-height: 1;
}

.user-box-content--line {
  flex-direction: row;
  flex-wrap: wrap;
}
/* User name */
.name,
.name a {
  width: max-content;
  max-width: 100%;
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 600;
  color: var(--title-color);
}
.name {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.name-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: var(--transition);
}
.name:hover .name-text {
  opacity: 0.8;
}

.verify {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin: 0;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
}
.verify svg {
  display: block;
  width: 100%;
  height: 100%;
}

.meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-gray);
  font-size: 0.8rem;
  line-height: 1;
}
.meta a {
  color: var(--color-gray);
}
.meta a:hover {
  text-decoration: underline;
}

/*
 * Make author and category links easier to tap.
 * Keep their click areas separate.
 */
:is(.post__header, .entry-card) .user-box-content > .name {
  min-width: 24px;
  min-height: 24px;
  padding-block-start: max(0px, calc(24px - 0.9rem));
  margin-block-start: min(0px, calc(0.9rem - 24px));
}
:is(.post__header, .entry-card) .user-box-content > .meta a {
  display: inline-flex;
  min-width: 24px;
  min-height: 24px;
  align-items: flex-start;
  padding-block-end: max(0px, calc(24px - 0.8rem));
  margin-block-end: min(0px, calc(0.8rem - 24px));
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.online {
  position: relative;
}
.online::before {
  --online-size: 10px;
  --online-border-color: var(--card-bg);
  --online-bg: var(--color-green);
  content: "";
  width: var(--online-size);
  height: var(--online-size);
  background-color: var(--online-bg);
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1;
  border-radius: 50%;
  border: 2px solid var(--online-border-color);
}

/* Back to top */
.gotop {
  --btn-transition:
    color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease, opacity 0.2s ease, visibility 0.2s ease,
    translate 0.2s ease;

  position: fixed;
  z-index: 1000;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 10px;
  will-change: opacity, translate;
}
.gotop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0;
}

/* Profile */
.profile {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 20px;
}
.profile__offset {
  padding-bottom: 20px;
}
.profile__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}
.profile__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.profile__online::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  background-color: var(--color-green);
  position: absolute;
  bottom: 6px;
  right: 13px;
}
.profile__content {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 20px;
  margin-top: 16px;
}
.profile__info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.profile__name {
  display: flex;
  align-items: center;
  gap: 5px;
}
.profile__name h1 {
  margin-bottom: 0;
}
.profile__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.profile__rate {
  font-size: 0.9rem;
  font-family: var(--font-secondary);
  font-weight: 600;
}
.profile__rate .ratingplus {
  color: var(--color-green);
}
.profile__rate .ratinminus {
  color: var(--color-red);
}
.profile__top {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.9rem;
}
.profile__signature {
  margin-top: 15px;
}
.profile__nav {
  margin-top: 20px;
}
.profile__about {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.profile__site {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
}
.profile__site span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile__about-info {
  margin-top: 10px;
}
.profile__social {
  display: flex;
  gap: 5px;
  margin-top: 15px;
}
/* Settings */

.setting {
  display: grid;
  min-width: 0;
}
.setting > *,
.setting__aside {
  min-width: 0;
}
.setting__menu {
  --card-bg: var(--color-surface-overlay);

  padding-block: 10px;
}
.setting__box {
  padding: 0;
  margin-top: 20px;
}
.setting__box section:not(:first-child) {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}
.setting__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.setting__list-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  font-size: 0.9rem;
}
.setting__list-item--center {
  align-items: center;
}
.setting__list-label {
  color: var(--color-gray);
}
.setting__list-value {
  margin: 0;
}
.setting__group * {
  color: inherit !important;
  font-weight: 400;
}

.setting__avatar {
  margin-top: 20px;
}
.setting__avatar-upload {
  margin-top: 10px;
}

.setting__ignorlist {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ignore-list-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  color: transparent;
  background-color: var(--ignore-list-item-bg);
  transition: background-color 140ms ease;
}

.ignore-list-item:hover {
  background-color: var(--ignore-list-item-hover-bg);
}

.ignore-list-item .pm_list {
  color: var(--color-gray);
}

.ignore-list-item > a:last-of-type {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  border-radius: 50%;
  color: var(--color-red);
  background-color: transparent;
  transition: background-color 140ms ease;
}

.ignore-list-item > a:last-of-type svg {
  display: block;
  fill: currentColor !important;
}

.ignore-list-item > a:last-of-type:is(:hover, :focus-visible) {
  background-color: var(--red-100);
}

.ignore-list-item > a:last-of-type:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px
    color-mix(in srgb, var(--color-red) 22%, transparent);
}
.setting__submit {
  margin-top: 20px;
}
.setting__social {
  display: flex;
  align-content: center;
  gap: 10px;
  margin-top: 10px;
}
/* Authentication */

.login__profile .user-box {
  padding-block: 10px;
}

/* Sign in */
.signin {
  max-width: 350px;
  width: 100%;
  margin: 20px auto;
}
.signin__body {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signin__footer {
  margin-top: 30px;
}
.signin__footer p {
  margin-bottom: 0;
}
.signin__submit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.view-pass {
  position: relative;
}

.view-pass > input {
  padding-right: calc(var(--form-control-height) + 0.25rem);
}

.view-pass-btn {
  --view-pass-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-width='2'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25ZM9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C13.2426 9.75 14.25 10.7574 14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C10.7574 14.25 9.75 13.2426 9.75 12Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.25C7.48587 3.25 4.44529 5.9542 2.68057 8.24686L2.64874 8.2882C2.24964 8.80653 1.88206 9.28392 1.63269 9.8484C1.36564 10.4529 1.25 11.1117 1.25 12C1.25 12.8883 1.36564 13.5471 1.63269 14.1516C1.88206 14.7161 2.24964 15.1935 2.64875 15.7118L2.68057 15.7531C4.44529 18.0458 7.48587 20.75 12 20.75C16.5141 20.75 19.5547 18.0458 21.3194 15.7531L21.3512 15.7118C21.7504 15.1935 22.1179 14.7161 22.3673 14.1516C22.6344 13.5471 22.75 12.8883 22.75 12C22.75 11.1117 22.6344 10.4529 22.3673 9.8484C22.1179 9.28391 21.7504 8.80652 21.3512 8.28818L21.3194 8.24686C19.5547 5.9542 16.5141 3.25 12 3.25ZM3.86922 9.1618C5.49864 7.04492 8.15036 4.75 12 4.75C15.8496 4.75 18.5014 7.04492 20.1308 9.1618C20.5694 9.73159 20.8263 10.0721 20.9952 10.4545C21.1532 10.812 21.25 11.2489 21.25 12C21.25 12.7511 21.1532 13.188 20.9952 13.5455C20.8263 13.9279 20.5694 14.2684 20.1308 14.8382C18.5014 16.9551 15.8496 19.25 12 19.25C8.15036 19.25 5.49864 16.9551 3.86922 14.8382C3.43064 14.2684 3.17374 13.9279 3.00476 13.5455C2.84684 13.188 2.75 12.7511 2.75 12C2.75 11.2489 2.84684 10.812 3.00476 10.4545C3.17374 10.0721 3.43063 9.73159 3.86922 9.1618Z' fill='black'/%3E%3C/svg%3E");

  position: absolute;
  z-index: 1;
  top: 50%;
  right: 5px;
  display: inline-flex;
  width: calc(var(--form-control-height) - 0.625rem);
  height: calc(var(--form-control-height) - 0.625rem);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0.625rem;
  outline: 0;
  color: var(--color-gray);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.15s ease;
}

.view-pass-btn::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: var(--view-pass-icon) center / contain no-repeat;
  mask: var(--view-pass-icon) center / contain no-repeat;
}

.view-pass-btn:hover {
  color: var(--gray-600);
  background-color: var(--gray-200);
}

.view-pass-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.view-pass-btn.is-visible {
  --view-pass-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-width='2'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.2954 6.31083C22.6761 6.474 22.8524 6.91491 22.6893 7.29563L21.9999 7.00019C22.6893 7.29563 22.6894 7.29546 22.6893 7.29563L22.6886 7.29731L22.6875 7.2998L22.6843 7.30716L22.6736 7.33123C22.6646 7.35137 22.6518 7.37958 22.6352 7.41527C22.6019 7.48662 22.5533 7.58794 22.4888 7.71435C22.3599 7.967 22.1675 8.32087 21.9084 8.73666C21.4828 9.4197 20.8724 10.2778 20.0619 11.1304L21.0303 12.0987C21.3231 12.3916 21.3231 12.8665 21.0303 13.1594C20.7374 13.4523 20.2625 13.4523 19.9696 13.1594L18.969 12.1588C18.3093 12.7115 17.5528 13.2302 16.695 13.6564L17.6286 15.0912C17.8545 15.4383 17.7562 15.9029 17.409 16.1288C17.0618 16.3547 16.5972 16.2564 16.3713 15.9092L15.2821 14.2353C14.5028 14.4898 13.659 14.6628 12.7499 14.7248V16.5002C12.7499 16.9144 12.4141 17.2502 11.9999 17.2502C11.5857 17.2502 11.2499 16.9144 11.2499 16.5002V14.7248C10.3689 14.6647 9.54909 14.5004 8.78982 14.2586L7.71575 15.9093C7.48984 16.2565 7.02526 16.3548 6.67807 16.1289C6.33089 15.903 6.23257 15.4384 6.45847 15.0912L7.37089 13.689C6.5065 13.2668 5.74381 12.7504 5.07842 12.1984L4.11744 13.1594C3.82455 13.4523 3.34968 13.4523 3.05678 13.1594C2.76389 12.8665 2.76389 12.3917 3.05678 12.0988L3.98055 11.175C3.15599 10.3153 2.53525 9.44675 2.10277 8.75486C1.83984 8.33423 1.6446 7.97584 1.51388 7.71988C1.44848 7.59182 1.3991 7.48914 1.36537 7.41683C1.3485 7.38067 1.33553 7.35207 1.32641 7.33167L1.31562 7.30729L1.31238 7.29984L1.31129 7.29733L1.31088 7.29638C1.31081 7.2962 1.31056 7.29563 1.99992 7.00019L1.31088 7.29638C1.14772 6.91565 1.32376 6.474 1.70448 6.31083C2.08489 6.1478 2.52539 6.32374 2.68888 6.70381L2.68983 6.706L2.69591 6.71972C2.7018 6.73291 2.7114 6.7541 2.72472 6.78267C2.75139 6.83983 2.79296 6.92644 2.84976 7.03767C2.96345 7.26029 3.13762 7.58046 3.37472 7.95979C3.85033 8.72067 4.57157 9.70728 5.55561 10.6218C6.42151 11.4265 7.48259 12.1678 8.75165 12.656C9.70614 13.0232 10.7854 13.2502 11.9999 13.2502C13.2416 13.2502 14.342 13.013 15.3124 12.631C16.5738 12.1345 17.6277 11.3884 18.4866 10.5822C19.4562 9.67216 20.1668 8.69535 20.6354 7.9434C20.869 7.5685 21.0405 7.25246 21.1525 7.03286C21.2085 6.92315 21.2494 6.83776 21.2757 6.78144C21.2888 6.75328 21.2983 6.73242 21.3041 6.71943L21.31 6.70595L21.3106 6.70475C21.3105 6.70485 21.3106 6.70466 21.3106 6.70475M22.2954 6.31083C21.9147 6.14771 21.4738 6.32423 21.3106 6.70475L22.2954 6.31083Z' fill='black'/%3E%3C/svg%3E");
}

/* Sign up */
.signup__list {
  display: flex;
  list-style: none;
  padding: 0;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}
.signup__login {
  position: relative;
}
.signup__login-check {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
  text-decoration: none !important;
  height: calc(var(--form-control-height) - 0.625rem);
}
.signup__login-check:active {
  transform: translateY(calc(-50% + 1px));
}
/* Post */

.post__header {
  display: grid;
  grid-template-columns: 1fr 34px;
  grid-gap: 10px;
  align-items: center;
}
.post__comments {
  margin-top: 20px;
}
.post__short {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}
.post__title-full {
  margin-block: 15px;
  text-wrap: wrap;
}
.post__short-title {
  text-wrap: wrap;
  font-weight: 600;
  margin-bottom: 0;
  transition: var(--transition);
}
.post__short-title-text {
  line-height: 1.3;
}
.post__short-title:hover .post__short-title-text {
  opacity: 0.8;
}
.post__short-media {
  padding-top: 0;
}

.post__media-full {
  margin-top: 20px;
}
.post__media {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  border-radius: 15px;
}

.post__media.f-carousel {
  --f-carousel-slide-width: auto;
  --f-carousel-gap: 15px;
  --f-carousel-spacing: 15px;

  max-width: 100%;
}

.post__media-video {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 15px;
}

.post__media-image {
  width: 100%;
  height: 340px;
  border-radius: 15px;
  object-fit: cover;
}

.post__media-player-slide {
  --f-carousel-slide-width: 100%;

  position: relative;
  height: 100% !important;
  min-height: 0;
  max-height: none;
}

.post__media-video.post__media-player-slide {
  height: auto !important;
}

.post__media:has(.post__media-player-slide) {
  height: auto;
  aspect-ratio: 16 / 9;
}

.post__media:has(.post__media-player-slide) .f-carousel__slide {
  height: 100%;
}

.post__media:has(.post__media-player-slide) .post__media-image {
  height: 100%;
}

.post__media-player {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border-radius: 15px;
  background: var(--color-dark);
}

.post__media .post__media-player {
  height: 100% !important;
}

.post__media-player iframe,
.post__media-player video,
.post__media-player object,
.post__media-player embed {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 0;
  max-height: none;
  border: 0;
}

.post__media-player > div {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  max-height: none;
}

.post__media-loader {
  position: absolute;
  z-index: 35;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--color-surface-overlay);
}

.post__media-loader .loader {
  width: 18px;
  height: 18px;
  border: 3px solid var(--color-secondary);
  border-right-color: var(--color-primary);
  border-radius: 10px;
  animation: post-media-loader-spin 1s infinite linear;
}

@keyframes post-media-loader-spin {
  to {
    transform: rotate(1turn);
  }
}

.is-media-loading > .post__media-loader {
  display: flex;
}

.is-media-loading .post__media-nav {
  opacity: 0;
  pointer-events: none;
}

.post__media-nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: flex;
  width: 30px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-dark) 45%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}

.post__media-nav:hover {
  background: color-mix(in srgb, var(--color-dark) 60%, transparent);
}

.post__media-nav[aria-disabled] {
  display: none;
}

.post__media-nav--prev {
  left: 12px;
}

.post__media-nav--next {
  right: 12px;
}

.post__censored {
  position: absolute;
  z-index: 20;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

.post__censored::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--color-white) 10%, transparent);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.post__censored::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background:
    repeating-radial-gradient(
        var(--color-dark) 0 0.0001%,
        var(--color-white) 0 0.0002%
      )
      50% 0 / 2500px 2500px,
    repeating-conic-gradient(
        var(--color-dark) 0 0.0001%,
        var(--color-white) 0 0.0002%
      )
      60% 60% / 2500px 2500px;
  background-blend-mode: difference;
  opacity: 0.1;
  animation: post-censored-noise 1s infinite alternate;
}

@keyframes post-censored-noise {
  100% {
    background-position:
      50% 0,
      60% 50%;
  }
}

.post__censored-content {
  position: relative;
  z-index: 2;
}

.post__censored-content .btn {
  margin-top: 10px;
}

.post__censored-info {
  position: relative;
  display: block;
  color: var(--color-white);
}

.post__media .f-carousel__viewport {
  width: 100%;
}

.post__media-player-guard {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 15px;
  background: transparent;
  cursor: grab;
  touch-action: pan-x;
}

.post__media-player-guard.is-hidden {
  display: none;
}
.post__tags-full {
  margin-top: 15px;
}
.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
}
.post__tags a::before {
  content: "#";
}
.post__tags a:hover {
  text-decoration: underline;
}
.post__footer-full {
  margin-top: 15px;
}
.post__footer {
  padding-block: 0 !important;

  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.post__footer-stats {
  display: flex;
  gap: 10px;
}
.post__options-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-500);
}
.post__options {
  --card-spacer-x: 13px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.post__options-set {
  display: flex;
  align-items: center;
  gap: 5px;
}
.post__bestcomm {
  padding-top: 0;
}
.post__bestcomm {
  display: flex;
}
.post__bestcomm-text * {
  margin: 0;
  padding: 0;
}

/* Editor */
.editor p {
  margin-bottom: 10px;
}
.editor a:hover {
  text-decoration: underline;
}
.editor ol {
  padding-left: 17px;
  margin: 10px 0;
}
.editor ul {
  margin: 10px 0;
}
.editor img {
  max-width: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.editor table {
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 15px 0;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  background-color: var(--color-surface-overlay);
}

.editor :is(th, td) {
  min-width: 80px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  line-height: 1.4;
  text-align: left;
  vertical-align: top;
}

.editor th {
  color: var(--title-color);
  background-color: var(--gray-100);
  font-weight: 600;
}

.editor caption {
  padding-bottom: 8px;
  color: var(--gray-500);
  font-size: 0.85rem;
  text-align: left;
}

/* Poll */
.poll {
  display: grid;
  gap: 12px;
  margin-top: 15px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background-color: transparent;
}

.poll__question {
  margin: 0;
  color: var(--title-color);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.poll__title {
  color: var(--text-color);
  font-size: 0.9rem;
  line-height: 1.45;
}

.poll__list > [id^="dle-poll-list-"] {
  display: block;
}

.pollanswer + .pollanswer {
  margin-top: 8px;
}

.pollanswer .form-check-label,
.vote .form-check-label {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
}

:is(.pollanswer, .vote)
  .form-check-input:is([type="checkbox"], [type="radio"]) {
  appearance: none;
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  flex: 0 0 18px;
  border: 1px solid var(--gray-300);
  outline: 0;
  background-color: var(--color-surface-overlay);
  box-shadow: 0 2px 3px rgb(15 23 42 / 4%);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

:is(.pollanswer, .vote) .form-check-input[type="checkbox"] {
  border-radius: 6px;
}

:is(.pollanswer, .vote) .form-check-input[type="radio"] {
  border-radius: 50%;
}

:is(.pollanswer, .vote) .form-check-input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-white);
  translate: -50% -50%;
  scale: 0;
  transition: scale 0.16s cubic-bezier(0.2, 0.8, 0.2, 1.25);
}

:is(.pollanswer, .vote) .form-check-input[type="checkbox"]::before {
  width: 9px;
  height: 9px;
  clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 20%, 84% 5%, 38% 71%);
}

:is(.pollanswer, .vote) .form-check-input[type="radio"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

:is(.pollanswer, .vote)
  .form-check-label:hover
  .form-check-input:not(:checked) {
  border-color: var(--gray-400);
  box-shadow: 0 2px 5px rgb(15 23 42 / 8%);
}

:is(.pollanswer, .vote) .form-check-input:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  box-shadow: 0 2px 5px
    color-mix(in srgb, var(--color-primary) 24%, transparent);
}

:is(.pollanswer, .vote) .form-check-input:checked::before {
  scale: 1;
}

:is(.pollanswer, .vote) .form-check-input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem
    color-mix(in srgb, var(--color-primary) 16%, transparent);
}

:is(.pollanswer, .vote) .form-check-input:active {
  transform: scale(0.9);
}

.pollprogress {
  height: 8px;
  margin: 5px 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--gray-200);
}

.pollprogress > span {
  display: block;
  min-width: 8px;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--color-primary);
  color: transparent;
  font-size: 0;
  transition: width 0.3s ease;
}

.pollallvotes,
.poll__meta {
  color: var(--gray-500);
  font-size: 0.82rem;
  line-height: 1.4;
}

.pollallvotes {
  margin-top: 4px;
}

.poll__closed {
  margin-top: 4px;
}

.poll__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.poll__actions .btn {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(.pollanswer, .vote) .form-check-input,
  :is(.pollanswer, .vote) .form-check-input::before,
  .pollprogress > span {
    transition: none;
  }
}

.post__upload {
  margin-top: 20px;
}
/* Comment form */
.addcomment {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-block: 10px 20px;
}
.addcomments__guest {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Comments */
.comments-tree-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.comment__children {
  margin-left: 50px;
}
.comment__children .avatar {
  width: 26px;
  height: 26px;
}
.comment__children .user-box {
  grid-template-columns: 26px 1fr;
}
.comment__children .user-box-content {
  flex-direction: row;
  flex-wrap: wrap;
}
.comment__children .comment__content {
  margin-left: 0;
}
.comment__children .online::before {
  --online-size: 9px;
}
.comment {
  position: relative;

  margin-bottom: 15px;
}
.comment__content {
  min-width: 0;
  margin-left: 50px;
}
.comment__admin {
  position: absolute;
  top: 10px;
  right: 10px;
}
.comment__text {
  font-size: 0.95rem;
  margin-top: 5px;
}
.comment__options {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.comment__replycount {
  color: var(--color-primary);
  font-size: 0.8rem;
  line-height: 1;
}
.comment__rating,
.comment__rating-box {
  display: inline-flex;
  align-items: center;
}
.comment__rating-box a {
  margin: 0;
  padding: 0;
}
.comment__rating {
  height: 20px;
  gap: 5px;
  color: var(--color-gray);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.comment__rating-box {
  gap: 6px;
}
.comment__rating-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  border-radius: 50%;
  color: var(--color-gray);

  transition:
    color 140ms ease,
    background-color 140ms ease;
}
.comment__rating-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  color: currentColor;
}
.comment__rating-count {
  display: inline-flex;
  min-width: 0.6em;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: var(--color-gray);
  font-size: 0.8rem;
  line-height: 20px;
  text-align: center;
}
.comment__rating:is(:hover, :focus-within) .comment__rating-icon,
.comment__options
  a:is(:hover, :focus-visible)
  > .comment__rating
  .comment__rating-icon {
  color: var(--color-primary);
  background-color: var(--blue-400);
}
.comment__rating:is(:hover, :focus-within) .comment__rating-count,
.comment__options
  a:is(:hover, :focus-visible)
  > .comment__rating
  .comment__rating-count {
  color: var(--color-primary);
}
.comment__rating:active .comment__rating-icon {
  color: var(--color-primary);
  background-color: var(--blue-400);
}
.comment__reply {
  display: inline-flex;
  height: 20px;
  align-items: center;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 20px;
  color: var(--color-gray);
}
.comment__reply:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.comment__options > a:has(> .comment__reply) {
  display: inline-flex;
  height: 20px;
  align-items: center;
  line-height: 1;
}
.comment__options a:has(> .comment__rating) {
  display: inline-flex;
  height: 22px;
  align-items: center;
  margin: 0;
  padding: 0;
  color: var(--color-gray);
  line-height: 0;
}
.comments-image-gallery {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 10px;

  padding: 0;
}
.comments-image-gallery img {
  height: 80px;
  width: auto;
  object-fit: cover;
  border-radius: 10px;
}
.mass_comments_action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-gray);
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
  margin-top: 25px;
}
.mass_comments_action * {
  display: inline-flex;
  width: max-content;
}
.comment__news {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  font-size: 0.8rem;
  color: var(--color-gray);
  margin-top: 10px;
}
.comment__news > span {
  flex: 0 0 auto;
  white-space: nowrap;
}
.comment__news > a {
  display: block;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comments-image-uploader-area {
  margin-top: 10px;
  font-size: 0.8rem;
}
.comments-image-uploader-area a:hover {
  text-decoration: underline;
}
#dlefastreplycomments {
  font-size: 0.8rem;
  color: var(--color-gray);
}
#dlefastreplycomments form {
  margin-top: 10px;
}
/* Post form */
.addpost {
  display: grid;
  align-items: start;
}

.addpost__form,
.addpost__sidebar {
  min-width: 0;
}

.addpost__header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.addpost__header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.addpost__author {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.addpost__author-name {
  order: 1;
  overflow: hidden;
  font-family: var(--font-secondary);
  font-weight: 600;
  color: var(--text-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.addpost__author .select2-container {
  position: static;
  display: inline-flex;
  width: max-content !important;
  max-width: 100%;
  order: 2;
  align-self: flex-start;
  margin-top: 0 !important;
}

.addpost__author .select2-selection--multiple,
.addpost__author .select2-selection__rendered,
.addpost__author .select2-search--inline {
  height: 20px !important;
  min-height: 20px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  line-height: 20px !important;
  white-space: nowrap;
  overflow: visible !important;
}

.addpost__author .select2-search__field {
  width: 103px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  line-height: normal !important;
  vertical-align: middle;
}

.addpost__author .select2-selection--multiple::after {
  display: none;
}

.addpost__author .select2-search--inline::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 6px;
  flex: 0 0 14px;
  align-self: center;
  background-color: var(--color-gray);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 7 7 7-7' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 7 7 7-7' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

.addpost__author .select2-selection__choice {
  order: 1;
}

.addpost__author .select2-search--inline {
  order: 2;
}

.addpost__author .select2-container--open .select2-search--inline::after {
  transform: translateY(-2px) scaleY(-1);
}

.addpost__author .select2-selection__choice {
  height: 20px;
  padding-block: 2px !important;
  align-items: center;
  line-height: 16px;
  transform: translateY(-1px);
}

.addpost__author .select2-selection__choice__display {
  line-height: 16px;
}

.addpost__author
  .select2-selection__rendered:has(.select2-selection__choice)
  .select2-search--inline {
  width: auto !important;
  min-width: 0;
  overflow: visible !important;
}

.addpost__author
  .select2-selection__rendered:has(.select2-selection__choice)
  .select2-search__field {
  width: 0 !important;
  min-width: 0 !important;
  padding-inline: 0 !important;
}

.addpost__author .select2-selection__choice + .select2-search--inline {
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.addpost__author
  .select2-selection__choice
  + .select2-search--inline
  .select2-search__field {
  width: 0 !important;
  min-width: 0 !important;
  padding-inline: 0 !important;
}

.addpost__content {
  margin-top: 20px;
}

.addpost__fields,
.addpost__modal-fields {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;

  list-style: none;
}
.addpost__title {
  border: none;
  font-size: 1.4rem;
  font-weight: 600;
  outline: none;
  width: 100%;
  appearance: none;
  overflow-y: hidden;
  min-height: 1lh;
  resize: none;
}
.addpost__title,
.addpost__ultratag,
.addpost__form-tags {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-color);
  box-shadow: none;
}

.addpost__title {
  font-size: 1.4rem;
  font-weight: 600;
  appearance: none;
  color: var(--title-color);
  min-height: 38px !important;
  padding-block: 0;
  border-radius: 0;
  line-height: 1.5;
}

.addpost__title::placeholder,
.addpost__ultratag::placeholder,
.addpost__form-tags::placeholder {
  color: var(--color-gray);
  opacity: 1;
}

.tagify.addpost__form-tags {
  --tags-border-color: transparent;
  --tags-hover-border-color: transparent;
  --tags-focus-border-color: transparent;
  --input-color: var(--text-color);
  --placeholder-color: var(--color-gray);
  --placeholder-color-focus: var(--color-gray);
  --tag-bg: var(--gray-150);
  --tag-hover: var(--gray-150);
  --tag-text-color: var(--text-color);
  --tag-remove-btn-color: var(--color-gray);
  --tag-remove-btn-bg: transparent;
  --tag-remove-btn-bg--hover: var(--red-100);
  width: 100%;
  align-content: center;
  align-items: center;
  gap: 6px;
  border: 0;
  background-color: transparent;
  line-height: normal;
}

.tagify.addpost__form-tags .tagify__tag {
  margin: 0;
}

.tagify.addpost__form-tags .tagify__tag > div::before {
  transition: none;
  animation: none;
}

.tagify.addpost__form-tags .tagify__tag:hover:not([readonly]) > div::before,
.tagify.addpost__form-tags .tagify__tag:focus > div::before {
  --tag-bg: var(--gray-150);
  --tag-bg-inset: 0;
}

.tagify.addpost__form-tags .tagify__tag__removeBtn {
  color: var(--color-gray);
}

.tagify.addpost__form-tags .tagify__tag__removeBtn:hover,
.tagify.addpost__form-tags .tagify__tag__removeBtn:focus {
  background-color: var(--red-100);
  color: var(--color-red);
  transform: none;
}

.tagify.addpost__form-tags .tagify__tag__removeBtn:hover + div > span,
.tagify.addpost__form-tags .tagify__tag__removeBtn:focus + div > span {
  opacity: 1;
}

.tagify.addpost__form-tags .tagify__tag__removeBtn:hover + div::before,
.tagify.addpost__form-tags .tagify__tag__removeBtn:focus + div::before {
  box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-bg) inset !important;
}

.tagify.addpost__form-tags .tagify__input {
  min-width: 110px;
  margin: 0;
  padding: 0;
  color: var(--text-color);
}

.form-autoheight,
.dle-textarea-auto textarea {
  overflow-y: hidden;
  min-height: 1lh;
  resize: none;
}

.addpost__editor {
  margin-top: 25px;
}

.addpost__actions {
  display: flex;
  margin-top: 15px;
  flex-wrap: wrap;
  gap: 8px;
}

.addpost__footer {
  margin-top: 45px;
}

.addpost__footer .dle-captcha {
  margin-bottom: 15px;
}

.addpost__sidebar .widget__content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.addpost__or {
  position: relative;
  color: var(--color-gray);
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.addpost__or span {
  position: relative;
  z-index: 2;
  display: flex;
  width: max-content;
  margin-inline: auto;
  padding: 5px 10px;
  background-color: var(--card-bg);
}

.addpost__or::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
}

.addpost__modal-fields input:not([type="checkbox"]),
.addpost__modal-fields textarea,
.addpost__modal-fields .dle-input input {
  width: 100%;
}

.addpost__modal-fields--poll {
  gap: 10px;
}

.addpost__modal-fields--source {
  gap: 15px;
}

.addpost__settings {
  gap: 8px;
}

.addpost__settings > *,
.addpost__settings .checkbox {
  margin: 0;
}

.addpost__settings .form-check-label {
  align-items: center;
  gap: 10px;
}

.addpost__settings .form-check-input::before {
  top: var(--switch-padding);
  left: var(--switch-padding);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: 50%;
  background-color: var(--switch-thumb-bg);
  clip-path: none;
  translate: 0 0;
  scale: 1;
}

.addpost__settings .form-check-input:checked::before {
  translate: calc(
      var(--switch-width) - var(--switch-thumb-size) -
        (var(--switch-padding) * 2)
    )
    0;
  scale: 1;
}

.addpost__label {
  display: block;
  margin-bottom: 7px;
  color: var(--title-color);
  font-size: 0.85rem;
  font-weight: 600;
}

.addpost__switch .form-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.addpost__switch .form-check-input {
  position: relative;
  width: 34px;
  height: 18px;
  margin: 0;
  flex: 0 0 34px;
  border: 0;
  border-radius: 999px;
  background-color: var(--color-secondary);
  appearance: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.addpost__switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--card-bg);
  transition: transform 0.2s ease;
}

.addpost__switch .form-check-input:checked {
  background-color: var(--color-primary);
}

.addpost__switch .form-check-input:checked::before {
  transform: translateX(16px);
}

.addpost .select2-container {
  width: auto !important;
  max-width: 100%;
  font-size: 13px;
}

.addpost .select2-container--default .select2-selection--multiple {
  display: inline-flex;
  width: auto;
  min-height: 20px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background-color: transparent;
  line-height: 1;
  cursor: pointer;
}

.addpost
  .select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border: 0;
}

.addpost .select2-selection--multiple::after {
  content: "";
  position: static;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 6px;
  flex: 0 0 14px;
  align-self: center;
  background-color: var(--color-gray);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 7 7 7-7' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 7 7 7-7' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
  transform: translateY(-1px);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.addpost .select2-container--open .select2-selection--multiple::after {
  transform: translateY(-1px) scaleY(-1);
}

.addpost
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__rendered {
  display: flex;
  width: auto;
  min-height: 20px;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  line-height: 20px;
}

.addpost
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  display: inline-flex;
  margin: 0;
  padding: 4px 7px 4px 10px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 15px;
  background-color: var(--gray-150);
  color: var(--text-color);
}

.addpost
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  position: static;
  display: inline-flex;
  order: 2;
  width: 14px;
  height: 14px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-gray);
  font:
    14px/1 Arial,
    sans-serif;
  transform: none;
}

.addpost
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover,
.addpost
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:focus {
  border-radius: 6px;
  background-color: var(--red-100);
  color: var(--color-red);
}

.addpost
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__display {
  order: 1;
  padding: 0;
}

.addpost .select2-search--inline,
.addpost .select2-search--inline .select2-search__field {
  display: inline-flex;
  width: auto;
  height: 20px;
  margin: 0;
  padding: 0;
  align-items: center;
  color: var(--text-color);
  line-height: 1;
}

.select2-dropdown {
  overflow: hidden;
  width: min(280px, calc(100vw - 24px)) !important;
  max-width: 280px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background-color: var(--color-surface-overlay);
  box-shadow: var(--shadow-lg);
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
  border-radius: 14px;
}

.select2-container--default .select2-search--dropdown {
  padding: 0 0 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--color-primary);
  border-radius: 9px;
  outline: none;
  background-color: var(--card-bg);
  color: var(--text-color);
}

.select2-container--default .select2-results__options {
  display: flex;
  max-height: 300px;
  margin-right: -5px;
  padding-right: 10px;
  flex-direction: column;
  gap: 3px;
}

.select2-dropdown *::-webkit-scrollbar {
  width: 3px !important;
  height: 3px !important;
}

.select2-dropdown *::-webkit-scrollbar-track {
  background: transparent;
}

.select2-dropdown *::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--gray-200);
}

.select2-dropdown *::-webkit-scrollbar-button,
.select2-dropdown *::-webkit-scrollbar-button:single-button,
.select2-dropdown *::-webkit-scrollbar-button:vertical:start:decrement,
.select2-dropdown *::-webkit-scrollbar-button:vertical:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
}

.select2-container--default .select2-results__option {
  padding: 8px 10px;
  border-radius: 10px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.select2-container--default .select2-results__message {
  color: var(--color-gray);
  font-size: 0.8rem;
  text-align: center;
}

.select2-container--default .select2-results__option--selectable:hover,
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected {
  background-color: var(--gray-100);
  color: var(--text-color);
}

.addpost__category {
  display: flex;
  align-items: center;
  gap: 10px;
}

.addpost__category img,
.addpost__category-placeholder {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
}

.addpost__category img {
  object-fit: cover;
}

.addpost__category-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
  color: var(--color-gray);
}

.addpost__category-info {
  min-width: 0;
}

.addpost__category-info span,
.addpost__category-blog {
  display: block;
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-weight: 600;
}

.addpost__category-info p {
  margin: 2px 0 0;
  color: var(--color-gray);
  font-size: 0.78rem;
}
/* Components */

/* Navigation */
.navigation {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.navigation span {
  display: none;
}
/* Info message */
.info__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.info__title h6 {
  margin-bottom: 0;
}
.info__content a {
  color: var(--color-primary);
}
.info__content a:hover {
  text-decoration: underline;
}
/* Alert */
.allert {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-gray);
  font-size: 0.8rem;
}
.allert::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 11v5m0 5a9 9 0 1 1 0-18a9 9 0 0 1 0 18m.05-13v.1h-.1V8z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 11v5m0 5a9 9 0 1 1 0-18a9 9 0 0 1 0 18m.05-13v.1h-.1V8z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Custom components */

/* Digest */
.digest {
  display: flex;
  min-width: 0;
  align-items: center;
  margin-bottom: 3px;
  overflow: hidden;
  color: var(--text-color);
  font-size: 1rem;
  line-height: 1.35;
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.digest__title {
  display: block;
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  color: var(--text-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.digest__title:hover {
  opacity: 0.8;
}

.digest__comm {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 6px;
  gap: 3px;
  color: var(--color-gray);
  font-size: 0.8rem;
  line-height: 1;
  vertical-align: -2px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.digest__comm-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.digest__comm-icon svg {
  width: 14px;
  height: 14px;
}

.digest__comm:hover {
  color: var(--color-primary);
}

.digest__comm:hover .digest__comm-icon {
  color: var(--color-primary);
  background-color: var(--blue-400);
}
/* Entry card */
.entry-card {
  --entry-card-border-radius: 15px;
  --entry-card-spacer-y: 10px;
  --entry-card-spacer-x: 10px;
  --entry-box-offset: 7px;
  --entry-image-width: 100px;
  --entry-image-border-radius: 15px;

  position: relative;
  padding: var(--entry-card-spacer-y) var(--entry-card-spacer-x);
  border-radius: var(--entry-card-border-radius);
  transition: background-color 140ms ease;
}
.entry-card:is(:hover, :focus-within) {
  background-color: var(--content-item-hover-bg);
}

.entry-box {
  display: grid;
}
.entry-box.has-image {
  grid-template-columns: minmax(0, 1fr) var(--entry-image-width);
  gap: var(--entry-box-offset);
}
.entry-box-image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--entry-image-border-radius);
}
.entry-box-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: cover;
  border-radius: var(--entry-image-border-radius);
}

.entry-box.is-censored .entry-box-image img {
  filter: blur(12px);
  transform: scale(1.12);
}

.entry-box.is-censored .entry-box-image::before,
.entry-box.is-censored .entry-box-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.entry-box.is-censored .entry-box-image::before {
  z-index: 1;
  background-color: color-mix(in srgb, var(--color-dark) 10%, transparent);
}

.entry-box.is-censored .entry-box-image::after {
  z-index: 2;
  background:
    repeating-radial-gradient(
        var(--color-dark) 0 0.0001%,
        var(--color-white) 0 0.0002%
      )
      50% 0 / 2500px 2500px,
    repeating-conic-gradient(
        var(--color-dark) 0 0.0001%,
        var(--color-white) 0 0.0002%
      )
      60% 60% / 2500px 2500px;
  background-blend-mode: difference;
  opacity: 0.1;
  animation: post-censored-noise 1s infinite alternate;
}
.entry-box-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--entry-box-offset);
}
.entry-box-content--offset {
  margin-top: var(--entry-box-offset);
}
.entry-box-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}
.entry-box-title-row > [data-tooltip] {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.entry-box-title-row .entry-box-title {
  display: block;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-box-title {
  color: var(--title-color);
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition);
}
.entry-box-:hover {
  opacity: 0.8;
}
.entry-box-meta {
  margin-top: var(--entry-box-offset);
}
/* Compact comments */

.comm-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* Larger tap area without changing the widget size. */
.comm-card .user-box-sm > .avatar {
  width: 24px;
  height: 24px;
  margin: -2px;
}
.comm-card .user-box-sm > .avatar img {
  width: 20px;
  height: 20px;
  margin: auto;
}
.comm-card .user-box-sm > .online::before {
  right: 0;
  bottom: 1px;
}
.comm-card .user-box-content > .name {
  min-width: 24px;
  min-height: 24px;
  padding-block-start: max(0px, calc(24px - 0.9rem));
  margin-block-start: min(0px, calc(0.9rem - 24px));
}
.comm-card > .small > .link {
  padding: max(0px, calc((24px - 1.5em) / 2)) 2px;
  margin-inline: -2px;
}
.comm-card-short * {
  margin: 0;
  padding: 0;
}

/* Mobile navigation */

.mobmenu,
.mobile-side-panel {
  display: none;
}

.promo-card {
  --promo-header-gap: 10px;
  --promo-body-gap: 15px;
  --promo-image-radius: 15px;
}

:where(.promo-card) .promo-card-header {
  display: flex;
  justify-content: space-between;
  gap: var(--promo-header-gap);
}

:where(.promo-card) :is(.promo-card-header-start, .promo-card-header-end) {
  display: flex;
  align-items: center;
  gap: var(--promo-header-gap);
}

:where(.promo-card) .promo-card-header-start {
  justify-content: flex-start;
}

:where(.promo-card) .promo-card-header-end {
  justify-content: flex-end;
}

:where(.promo-card) .promo-card-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

:where(.promo-card) .promo-card-age {
  height: 20px;
  padding: 2px 5px;
  border-radius: 10px;
  background-color: var(--gray-150);
  color: var(--gray-500);
  font-size: 0.7rem;
}

:where(.promo-card) .promo-adcode {
  padding-block: 10px !important;
}

:where(.promo-card) .promo-adcode-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.promo-card) .promo-body {
  display: grid;
  gap: var(--promo-body-gap);
  margin-top: 20px;
}

:where(.promo-card) :is(.promo-body-row-2, .promo-body-row-3) {
  align-items: center;
}

:where(.promo-card) .promo-body-row-2 {
  grid-template-columns: 200px 1fr;
}

:where(.promo-card) .promo-body-row-3 {
  grid-template-columns: 80px 1fr 100px;
}

:where(.promo-card) .promo-body-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:where(.promo-card) .promo-image {
  height: max-content;
  max-width: 100%;
  border-radius: var(--promo-image-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

:where(.promo-card) .promo-image-horizontal {
  aspect-ratio: 16 / 9;
}

:where(.promo-card) .promo-image-square {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
}

:where(.promo-card) .promo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:where(.promo-card) .promo-body-content a {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

:where(.promo-card) .promo-body-content :is(h2, p) {
  margin: 0;
  padding: 0;
}

:where(.promo-card) .promo-link-compact a {
  width: max-content;
}

:where(.promo-card) .promo-link-full a {
  width: 100%;
}

/* Responsive styles */
@media screen and (max-width: 1120px) {
  .main__grid {
    grid-template-columns: 50px minmax(280px, auto) 290px;
  }
  .main__grid-feed {
    grid-template-columns: minmax(280px, auto) 290px;
  }
}
@media screen and (max-width: 920px) {
  .main__grid {
    grid-template-columns: 50px minmax(280px, auto);
  }
  .main__widgets,
  .header__write span,
  .profile__aside-footer,
  .setting__aside-footer {
    display: none;
  }
  .main__grid-feed {
    grid-template-columns: minmax(280px, auto);
  }
  .profile__aside {
    position: static;
    order: -1;
  }
  .setting__aside {
    order: -1;
  }
  .setting__menu .menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
  .setting__menu .menu__profile-item,
  .setting__menu .menu__divider {
    width: 100%;
    flex: 0 0 100%;
  }
  .setting__menu .menu__item {
    min-width: 38px;
    flex: 1 1 38px;
  }
  .setting__menu .menu__link {
    min-height: 44px;
    justify-content: center;
    gap: 0;
    padding-inline: 0;
  }
  .setting__menu .menu__link > span {
    display: none;
  }
}
@media screen and (max-width: 720px) {
  .channel__hero {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
  .main__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .header__inner {
    grid-template-columns: auto 1fr;
  }
  .sidebar,
  .header__nav {
    display: none;
  }
  .main__grid-full {
    grid-template-columns: minmax(0, 1fr);
  }
  .searchpage__grid,
  .searchpage__sort-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .searchpage__section--wide {
    grid-column: auto;
  }
}
@media screen and (max-width: 720px) {
  .stats__chart-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-inline: 15px;
    margin-bottom: 20px;
  }
  .hero__sort-toggle {
    position: relative;
    top: 0;
    right: 0;
    margin-top: 10px;
  }
  .feed {
    --main-gap: 10px;
  }
  .subscriptions__channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .card-body {
    --card-spacer-y: 15px;
    --card-spacer-x: 15px;
  }
  .mobile-side-panel {
    display: block;
  }
  .mobmenu {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 0;
    display: block;
    width: min(calc(100% - 32px), 240px);
    margin-inline: auto;
    pointer-events: none;
  }
  .mobmenu.is-scroll-aware {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition:
      opacity 0.2s ease,
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear;
  }
  .mobmenu.is-scroll-aware.is-hidden {
    opacity: 0;
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition-delay: 0s, 0s, 0.35s;
  }
  .mobmenu__content {
    display: grid;
    min-height: 52px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgb(15 23 42 / 4%);
    border-radius: 30px;
    background-color: rgb(255 255 255 / 94%);
    box-shadow: 0 10px 30px rgb(15 23 42 / 12%);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    pointer-events: auto;
  }
  [data-theme="dark"] .mobmenu__content {
    border-color: rgb(255 255 255 / 8%);
    background-color: rgb(27 31 39 / 94%);
    box-shadow: 0 10px 30px rgb(0 0 0 / 32%);
  }
  [data-theme="dark"] .mobmenu__link {
    color: #aab2c0;
  }
  .mobmenu__link {
    display: flex;
    min-width: 0;
    padding: 4px 2px 3px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 24px;
    appearance: none;
    background: transparent;
    color: var(--gray-500);
    font: inherit;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition:
      color 0.15s ease,
      background-color 0.15s ease,
      transform 0.15s ease;
  }
  .mobmenu__link svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  .mobmenu__link span {
    overflow: hidden;
    max-width: 100%;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobmenu__link:is(:hover, :focus-visible) {
    color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 7%, transparent);
    outline: 0;
  }
  .mobmenu__link.is-active {
    color: var(--color-primary);
  }
  .mobmenu__link:active {
    transform: scale(0.94);
  }
  .feed {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}
@media screen and (max-width: 520px) {
  .searchpage__simple {
    grid-template-columns: minmax(0, 1fr);
  }
  .searchpage__simple .btn,
  .searchpage__actions .btn {
    width: 100%;
  }
  .stats__counts {
    grid-template-columns: 1fr;
  }
  .setting__list-item,
  .user-rating__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .subscriptions__section {
    gap: 10px;
  }
  .subscriptions__users,
  .profile__content {
    grid-template-columns: 1fr;
  }
  .subscriptions__channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .channel__overview {
    grid-template-columns: 1fr;
  }
  .channel__side {
    display: grid;
    grid-template-columns: 1fr 130px;
    grid-gap: 15px;
    justify-self: start;
    width: 100%;
  }
  .channel__authors {
    margin-top: 0;
  }
  .channel__icon,
  .profile__avatar {
    width: 80px;
    height: 80px;
  }
}
@media screen and (max-width: 420px) {
  .header__logo .logo-text {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobmenu,
  .mobmenu__link {
    transition: none !important;
  }
}
@media screen and (max-width: 380px) {
  .gotop {
    display: none;
  }
  .channel__side {
    grid-template-columns: 1fr;
  }
  .channel__side .cat-subscribe-link span {
    width: 100%;
  }
}