.microblogPage {
  width: min(calc(100% - 8px), 1260px);
  margin: 4px auto;
  color: #d7d7da;
}

.microblogHero {
  display: flex;
  min-height: 0;
  box-sizing: border-box;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 83% 15%, rgba(207, 47, 137, 0.26), transparent 34%),
    linear-gradient(135deg, #302d31, #211f22 68%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
}

.microblogHero__eyebrow,
.microblogSectionHeading span,
.publishedTimeline__heading span {
  color: #df57a4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.microblogHero__eyebrow i {
  margin-right: 4px;
}

.microblogHero h1 {
  margin: 4px 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 850;
  line-height: 1;
}

.microblogHero p {
  margin: 0;
  color: #aaa8ae;
  font-size: 14px;
}

.microblogHero__movies {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 800;
}

.microblogHero__movies:hover {
  border-color: #cf2f89;
  color: #fff;
  background: rgba(207, 47, 137, 0.18);
  text-decoration: none;
}

.microblogLayout {
  display: grid;
  grid-template-columns: minmax(0, 690px) minmax(390px, 1fr);
  gap: 4px;
  align-items: start;
  justify-content: center;
  margin-top: 4px;
}

.microblogFeedColumn,
.publishedTimeline {
  min-width: 0;
}

.microblogSectionHeading,
.publishedTimeline__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 4px;
}

.microblogSectionHeading h2,
.publishedTimeline__heading h2 {
  margin: 0;
  color: #f3f3f4;
  font-size: 20px;
  font-weight: 800;
}

.microblogSectionHeading > i,
.publishedTimeline__heading > i {
  color: #555158;
  font-size: 22px;
}

.microblogSectionHeading__add {
  margin-left: auto;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #cf2f89;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.microblogFeedColumn > .col-md-12 {
  float: none;
  width: 100%;
  padding: 0;
}

.microblogFeedColumn #microblog {
  padding-top: 0;
}

.microblogFeedColumn #microblog .root {
  margin: 0 0 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: #29282b;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.16);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.microblogFeedColumn #microblog .root:hover {
  border-color: rgba(207, 47, 137, 0.36);
  transform: translateY(-1px);
}

.microblogFeedColumn #microblog .post {
  background: #29282b;
}

.microblogFeedColumn #microblog .post header {
  display: flex;
  min-height: 48px;
  box-sizing: border-box;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: #302f32;
}

.microblogFeedColumn #microblog .post header.parent {
  background: linear-gradient(105deg, rgba(207, 47, 137, 0.12), #302f32 48%);
}

.microblogFeedColumn #microblog header .date,
.microblogFeedColumn #microblog header .ip {
  padding: 0;
  color: #929097;
  font-size: 11px;
}

.microblogFeedColumn #microblog header .nickname {
  display: inline-flex;
  height: auto;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 0;
  color: #df57a4;
  font-size: 12px;
}

.microblogFeedColumn #microblog header .nickname.premium {
  color: #e4b257;
}

.microblogFeedColumn #microblog header .rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 0;
}

.microblogFeedColumn #microblog .rank .vote,
.microblogFeedColumn #microblog .rank .unvote {
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  color: #a4c969;
  background: rgba(255, 255, 255, 0.035);
  line-height: 23px;
}

.microblogFeedColumn #microblog .rank .unvote {
  color: #df7272;
}

.microblogFeedColumn #microblog .rank .rate {
  min-width: 24px;
  color: #d8d7da;
  font-size: 12px;
  text-align: center;
}

.microblogFeedColumn #microblog article {
  padding: 4px;
}

.microblogFeedColumn #microblog article .content {
  color: #dedde0;
  font-size: 13px;
  letter-spacing: 0.01em;
  line-height: 1.68;
}

.microblogFeedColumn #microblog article .description {
  margin-top: 4px;
  padding: 4px;
  border-radius: 8px;
  color: #aaa7ad;
  background: rgba(255, 255, 255, 0.035);
}

.microblogFeedColumn #microblog .post .options {
  min-height: 34px;
  height: auto;
  padding: 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.microblogFeedColumn #microblog .post .options .option {
  padding: 4px;
  color: #9d9aa1;
  font-size: 11px;
  font-weight: 700;
}

.microblogFeedColumn #microblog .post .options .answer {
  color: #df57a4;
}

.microblogFeedColumn #microblog .children {
  margin: 4px;
  padding-left: 4px;
  border-left: 2px solid rgba(207, 47, 137, 0.25);
}

.microblogFeedColumn #microblog .children .post {
  margin: 4px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  background: #252427;
}

.microblogFeedColumn #microblog .children .post .content {
  margin: 0;
  padding: 4px;
}

.microblogFeedColumn #microblog-add {
  display: none;
  margin: 0;
}

.microblogFeedColumn #microblog-add .button {
  padding: 4px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #cf2f89;
  font-size: 12px;
  font-weight: 800;
}

.microblogFeedColumn .articlePagination {
  margin-top: 4px;
}

.publishedTimeline {
  position: relative;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background: rgba(37, 36, 39, 0.78);
  box-shadow: 0 9px 28px rgba(0, 0, 0, 0.14);
}

@media (min-width: 1051px) {
  .publishedTimeline.is-height-synced {
    overflow: hidden;
  }

  .publishedTimeline.is-height-clipped::after {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    height: 54px;
    content: "";
    background: linear-gradient(transparent, rgba(37, 36, 39, 0.98));
    pointer-events: none;
  }
}

.publishedTimeline__stream {
  position: relative;
  padding-left: 4px;
}

.publishedTimeline__stream::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  content: "";
  background: linear-gradient(#cf2f89, rgba(207, 47, 137, 0.08));
}

.publishedTimelinePost {
  position: relative;
  margin-bottom: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #2b2a2d;
}

.publishedTimelinePost__dot {
  position: absolute;
  top: 4px;
  left: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid #232225;
  border-radius: 50%;
  background: #df57a4;
  box-shadow: 0 0 0 2px rgba(207, 47, 137, 0.3);
}

.publishedTimelinePost__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  color: #8e8b92;
  font-size: 10px;
}

.publishedTimelinePost__meta time {
  margin-right: auto;
}

.publishedTimelinePost__meta time strong {
  color: #c8c6cb;
}

.publishedTimelinePost__badge {
  padding: 3px 4px;
  border-radius: 999px;
  color: #e5e4e6;
  background: #49464d;
  font-size: 9px;
  font-weight: 900;
}

.publishedTimelinePost__badge.is-vip {
  color: #2e2617;
  background: #e0b257;
}

.publishedTimelinePost__image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1c1b1e;
}

.publishedTimelinePost__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.publishedTimelinePost:hover .publishedTimelinePost__image img {
  transform: scale(1.025);
}

.publishedTimelinePost__image > span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 4px;
  border-radius: 6px;
  color: #fff;
  background: rgba(18, 17, 20, 0.82);
  font-size: 10px;
  font-weight: 800;
}

.publishedTimelinePost__body {
  padding: 4px;
}

.publishedTimelinePost__producer {
  color: #df57a4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.publishedTimelinePost h3 {
  margin: 4px 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.publishedTimelinePost h3 a {
  color: #f0eff1;
}

.publishedTimelinePost h3 a:hover {
  color: #df57a4;
  text-decoration: none;
}

.publishedTimelinePost__actors,
.publishedTimelinePost__description {
  margin: 0 0 4px;
  color: #aaa8ae;
  font-size: 11px;
  line-height: 1.45;
}

.publishedTimelinePost__actors i {
  margin-right: 4px;
  color: #77737b;
}

.publishedTimelinePost__actors a {
  color: #d5d3d8;
  text-decoration: underline;
  text-decoration-color: rgba(223, 87, 164, 0.45);
  text-underline-offset: 2px;
}

.publishedTimelinePost__actors a:hover {
  color: #df57a4;
}

.publishedTimelinePost__description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.publishedTimelinePost__details {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 0.55fr) minmax(0, 0.55fr);
  gap: 2px;
  margin: 4px 0 0;
}

.publishedTimelinePost__details div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: 20px;
  column-gap: 2px;
  align-items: center;
  min-width: 0;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022));
}

.publishedTimelinePost__details dt {
  display: contents;
}

.publishedTimelinePost__details dt i {
  display: inline-grid;
  grid-row: 1;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 7px;
  color: #f4d9e9;
  background: rgba(207, 47, 137, 0.18);
  font-size: 8px;
}

.publishedTimelinePost__details .is-quality dt i {
  color: #f5ddb1;
  background: rgba(224, 178, 87, 0.17);
}

.publishedTimelinePost__details .is-resolution dt i {
  color: #cde3ee;
  background: rgba(90, 158, 191, 0.16);
}

.publishedTimelinePost__details .is-views dt i {
  color: #d4c9ef;
  background: rgba(132, 99, 191, 0.17);
}

.publishedTimelinePost__details .is-plays dt i {
  color: #cbe5cf;
  background: rgba(91, 156, 103, 0.17);
}

.publishedTimelinePost__details .is-rating dt i {
  color: #dbeabf;
  background: rgba(139, 177, 78, 0.17);
}

.publishedTimelinePost__details dt span,
.publishedTimelinePost__details dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publishedTimelinePost__details dt span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.publishedTimelinePost__details dd {
  align-self: center;
  margin: 0;
  color: #d8d6da;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
}

/* Compact spacing for legacy microblog elements rendered inside the refreshed view. */
.microblogPage h1,
.microblogPage h2,
.microblogPage h3 {
  padding: 0;
}

.microblogPage a:not(.microblogHero__movies):not(.publishedTimelinePost__image) {
  padding: 0;
}

.microblogPage input,
.microblogPage select,
.microblogPage textarea,
.microblogPage button {
  margin: 0;
  padding: 4px;
}

.microblogFeedColumn #microblog header .nickname sup {
  margin: 0;
}

.microblogFeedColumn #microblog header .nickname .decoration {
  display: inline-flex;
  order: -1;
  align-items: center;
  margin: 0;
}

.microblogFeedColumn #microblog header .nickname .decoration .icon {
  display: inline-block;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.microblogFeedColumn #microblog article.restricted .info,
.microblogFeedColumn #microblog .edit,
.microblogFeedColumn #microblog .post .modify,
.microblogFeedColumn #microblog .post article .activity,
.microblogFeedColumn #microblog .edit .content {
  padding: 4px;
}

.microblogFeedColumn #microblog article.restricted .info a,
.microblogFeedColumn #microblog .edit,
.microblogFeedColumn #microblog .post .edit,
.microblogFeedColumn #microblog .edit .nickname,
.microblogFeedColumn #microblog .edit .menu,
.microblogFeedColumn #microblog .edit .file,
.microblogFeedColumn #microblog .edit .tag-buttons,
.microblogFeedColumn #microblog .edit .tag-buttons .tag,
.microblogFeedColumn #microblog .post article .activity span,
.microblogFeedColumn #microblog .back-index,
.microblogFeedColumn .msg,
.microblogFeedColumn .pagination,
.microblogFeedColumn .paginationWrap {
  margin: 4px;
}

.microblogFeedColumn #microblog .edit .nickname,
.microblogFeedColumn #microblog .edit .menu .button,
.microblogFeedColumn #microblog .edit .tag-buttons .tag,
.microblogFeedColumn #microblog .post article .activity span,
.microblogFeedColumn #microblog .more .button,
.microblogFeedColumn .msg,
.microblogFeedColumn .pagination > li > a,
.microblogFeedColumn .pagination > li > span {
  padding: 4px;
}

.microblogFeedColumn #microblog article .date-move {
  padding-bottom: 4px;
}

.microblogFeedColumn #microblog article .content img {
  margin: 4px 4px 0 0;
}

.microblogFeedColumn #microblog .edit .menu {
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: center;
  flex-wrap: wrap;
  float: none;
  gap: 4px;
  margin: 4px 0 0;
  padding: 0;
}

.microblogFeedColumn #microblog .edit {
  box-sizing: border-box;
  height: auto !important;
  margin: 4px 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: #29282b;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.16);
}

.microblogFeedColumn #microblog .edit .content {
  box-sizing: border-box;
  min-height: 76px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  outline: none;
  color: #ecebed;
  background: #211f22;
  font-size: 13px;
  line-height: 1.5;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.microblogFeedColumn #microblog .edit .content:focus {
  border-color: rgba(207, 47, 137, 0.65);
  box-shadow: inset 0 0 0 1px rgba(207, 47, 137, 0.18);
}

.microblogFeedColumn #microblog .edit .content:empty::before {
  color: #77747b;
  content: attr(data-placeholder);
  pointer-events: none;
}

.microblogFeedColumn #microblog .edit .menu .button {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  float: none;
  margin: 0;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #d8d6da;
  background: rgba(255, 255, 255, 0.055);
  font-size: 11px;
  font-weight: 700;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.microblogFeedColumn #microblog .edit .menu .button i {
  width: 14px;
  color: #df57a4;
  text-align: center;
}

.microblogFeedColumn #microblog .edit .menu .button.url span,
.microblogFeedColumn #microblog .edit .menu .button.image span,
.microblogFeedColumn #microblog .edit .menu .button.upload span,
.microblogFeedColumn #microblog .edit .menu .button.cancel span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.microblogFeedColumn #microblog .edit .menu .button:hover {
  border-color: rgba(207, 47, 137, 0.45);
  color: #fff;
  background: rgba(207, 47, 137, 0.12);
}

.microblogFeedColumn #microblog .edit .menu .separator {
  flex: 1 1 8px;
  width: auto;
}

.microblogFeedColumn #microblog .edit .menu .button.cancel,
.microblogFeedColumn #microblog .edit .menu .button.cancel i {
  color: #aaa7ad;
}

.microblogFeedColumn #microblog .edit .menu .button.submit {
  flex-basis: auto;
  width: auto;
  border-color: transparent;
  color: #fff;
  background: #cf2f89;
}

.microblogFeedColumn #microblog .edit .menu .button.submit i {
  color: #fff;
}

.microblogFeedColumn #microblog .edit .tag-buttons:empty {
  display: none;
}

@media (max-width: 1050px) {
  .microblogLayout {
    grid-template-columns: minmax(0, 720px);
  }

  .publishedTimeline {
    height: auto !important;
    margin-top: 4px;
    overflow: visible;
  }

  .publishedTimelinePost:nth-child(n + 9) {
    display: none;
  }
}

@media (max-width: 640px) {
  .microblogPage {
    width: min(calc(100% - 8px), 1260px);
    margin: 4px auto;
  }

  .microblogHero {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
  }

  .microblogHero__movies {
    align-self: stretch;
    justify-content: center;
  }

  .microblogLayout {
    gap: 4px;
    margin-top: 4px;
  }

  .microblogFeedColumn #microblog .post header {
    flex-wrap: wrap;
  }

  .microblogFeedColumn #microblog header .rank {
    width: 100%;
    margin: 4px 0 0;
  }

  .microblogFeedColumn #microblog .children {
    margin: 4px;
  }

  .publishedTimeline {
    padding: 4px;
  }

  .publishedTimeline__stream {
    padding-left: 4px;
  }

  .publishedTimelinePost__dot {
    left: -4px;
  }

  .publishedTimelinePost__details div {
    grid-template-columns: 14px minmax(0, 1fr);
    grid-template-rows: 18px;
    column-gap: 1px;
    padding: 2px;
    border-radius: 5px;
  }

  .publishedTimelinePost__details dt i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    font-size: 7px;
  }

  .publishedTimelinePost__details dd {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .microblogFeedColumn #microblog .root,
  .publishedTimelinePost__image img {
    transition: none;
  }
}