body.profile-detail-page {
  background-color: var(--Base-bg-base);
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.profile-detail-page .profile-page {
  background-color: var(--Base-bg-base);
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.profile-detail-page .profile-page .profile-work-card,
body.profile-detail-page .profile-page .profile-work-list {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.profile-detail-page .profile-page :where(input, textarea, select) {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.profile-detail-page .profile-page :where(.btn, .dropdown-menu a, .collapse-story, .profile-comment-action) {
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-weight: 500;
}

body.profile-detail-page .profile-page .text-black {
  color: var(--Text-Neutral-primary) !important;
}

body.profile-detail-page .profile-page .text-primary {
  color: var(--Text-Brand-default) !important;
}

body.profile-detail-page .profile-page :where(.text-gray, .text-grey) {
  color: var(--Text-Neutral-tertiary) !important;
}

body.profile-detail-page .profile-page :where(.text-cherry, .text-danger) {
  color: var(--Text-Danger-default) !important;
}

body.profile-detail-page .profile-page :where(.text-green) {
  color: var(--Text-Success-default) !important;
}

body.profile-detail-page .profile-page #displayName {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-md, 28px);
  font-weight: 700;
  line-height: normal;
}

body.profile-detail-page .profile-page .modal-info-title {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-weight: 700;
}

body.profile-detail-page .profile-page :where(.section-title, .page-topic, .page-topic a) {
  color: var(--Text-Neutral-primary);
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: var(--Heading-font-size-lg, 32px);
  font-weight: 700;
  line-height: normal;
}

body.profile-detail-page .profile-page .profile-follow-trigger,
body.profile-detail-page .profile-page #totalSub,
body.profile-detail-page .profile-page #totalFollowing {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page #totalSub,
body.profile-detail-page .profile-page #totalFollowing {
  font-weight: 700;
}

body.profile-detail-page .profile-page #followerBtn .font-55,
body.profile-detail-page .profile-page #followingBtn .font-55 {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page .social a,
body.profile-detail-page .profile-page .story-stats-icon {
  color: var(--Icon-Brand-default);
}

body.profile-detail-page .profile-page .story-tab-detail,
body.profile-detail-page .profile-page .story-segment {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-lg, 16px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-lg, 24px);
}

body.profile-detail-page .profile-page .story-segment :where(p, span, a, li, blockquote, h1, h2, h3, h4, h5, h6, table, th, td) {
  font-family: inherit !important;
}

body.profile-detail-page .profile-page .story-segment a {
  color: var(--Text-Brand-default);
}

body.profile-detail-page .profile-page .nodata,
body.profile-detail-page .profile-page .table-no-data-text {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page .stats-group .small-column-auto > p:first-of-type {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.profile-detail-page .profile-page .stats-group .story-stats-text {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.profile-detail-page .profile-page .comment-row,
body.profile-detail-page .profile-page #fanboardList .comment-row {
  border-color: var(--Border-Neutral-subtle);
}

@media (min-width: 768px) {
  body.profile-detail-page .profile-page .stats-group .small-column-auto > p:first-of-type {
    font-size: var(--Body-font-size-lg, 16px);
    line-height: var(--Body-font-line-height-lg, 24px);
  }
}

body.profile-detail-page .profile-page .sub-header {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
  line-height: normal;
}

body.profile-detail-page .profile-page .sub-header.active,
body.profile-detail-page .profile-page .sub-header.active a {
  border-color: var(--Border-Brand-default);
  color: var(--Text-Brand-default);
  font-weight: 700;
}

body.profile-detail-page .profile-page .profile-works-title {
  margin: 0;
}

body.profile-detail-page .profile-page .profile-work-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.profile-detail-page .profile-page .profile-work-tabs::-webkit-scrollbar {
  display: none;
}

body.profile-detail-page .profile-page .profile-work-tabs .sub-header {
  border-bottom: 2px solid transparent;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 4px 16px;
  white-space: nowrap;
}

body.profile-detail-page .profile-page .profile-work-tabs .sub-header.active {
  border-bottom-color: var(--Border-Brand-default, #FF775F);
}

body.profile-detail-page .profile-page .profile-primary-tabs .page-topic,
body.profile-detail-page .profile-page .profile-primary-tabs .page-topic a {
  color: var(--Text-Neutral-primary, #070708);
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: var(--Heading-font-size-lg, 32px);
  font-weight: 700;
  line-height: normal;
}

body.profile-detail-page .profile-page .profile-primary-tabs .page-topic.active,
body.profile-detail-page .profile-page .profile-primary-tabs .page-topic.active a {
  color: var(--Text-Neutral-primary, #070708);
  font-weight: 700;
}

body.profile-detail-page .profile-page .profile-primary-tabs .page-topic {
  border-bottom: 3px solid transparent;
}

body.profile-detail-page .profile-page .profile-primary-tabs .page-topic.active {
  border-bottom-color: var(--Border-Brand-default, #FF775F);
}

@media (min-width: 768px) {
  body.profile-detail-page .profile-page .profile-primary-tabs {
    gap: 32px;
  }

  body.profile-detail-page .profile-page .profile-primary-tabs .page-topic {
    margin-right: 0 !important;
  }
}

body.profile-detail-page .profile-page .dropdown-menu,
body.profile-detail-page .profile-page .modal-content,
body.profile-detail-page .profile-page .donate-box {
  background-color: var(--Base-bg-base);
  border-color: var(--Border-Neutral-subtle);
  color: var(--Text-Neutral-primary);
}

body.profile-detail-page .profile-page .dropdown-menu a {
  color: var(--Text-Neutral-primary);
}

body.profile-detail-page .profile-page .dropdown-menu a:hover,
body.profile-detail-page .profile-page .dropdown-menu a:focus-visible {
  background-color: var(--Background-Brand-subtle);
  color: var(--Text-Neutral-primary);
}

body.profile-detail-page .profile-page .btn-tunwalai {
  background-color: var(--Background-Brand-default);
  border-color: var(--Border-Brand-default);
  color: var(--Base-on-color);
}

body.profile-detail-page .profile-page .profile-header :where(.btn-tunwalai, .btn-tunwalai-outline),
body.profile-detail-page .profile-page :where(#submitComment, #submit-fanboard) {
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 700;
  line-height: normal;
}

body.profile-detail-page .profile-page .btn-tunwalai:hover,
body.profile-detail-page .profile-page .btn-tunwalai:focus-visible {
  background-color: var(--Background-Brand-hover);
  border-color: var(--Border-Brand-hover);
  color: var(--Base-on-color);
}

body.profile-detail-page .profile-page .btn-tunwalai:active {
  background-color: var(--Background-Brand-active);
  border-color: var(--Border-Brand-active);
  color: var(--Base-on-color);
}

body.profile-detail-page .profile-page .btn-tunwalai-outline {
  background-color: var(--Base-bg-base);
  border-color: var(--Border-Brand-default);
  color: var(--Text-Brand-default);
}

body.profile-detail-page .profile-page .btn-tunwalai-outline:hover,
body.profile-detail-page .profile-page .btn-tunwalai-outline:focus-visible {
  background-color: var(--Background-Brand-subtle);
  border-color: var(--Border-Brand-hover);
  color: var(--Text-Brand-hover);
}

body.profile-detail-page .profile-page :where(.btn-tunwalai, .btn-tunwalai-outline):disabled,
body.profile-detail-page .profile-page :where(.btn-tunwalai, .btn-tunwalai-outline).disabled {
  background-color: var(--Background-Brand-disabled);
  border-color: var(--Border-Brand-disabled);
  color: var(--Text-Brand-on-brand-disabled);
}

body.profile-detail-page .profile-page .profile-work-card .item-description {
  min-width: 0;
}

body.profile-detail-page .profile-page .profile-work-card .item-description .content-main-text,
body.profile-detail-page .profile-page .profile-work-card--tunlist .card-body-list h3 {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page .profile-work-card .item-description .content-main-text i,
body.profile-detail-page .profile-page .profile-work-card .item-description .state-section i,
body.profile-detail-page .profile-page .profile-work-card--tunlist .card-body-list .stat-section i,
body.profile-detail-page .profile-page .profile-character-widget .character-card-chats i {
  color: var(--Icon-Brand-default);
}

body.profile-detail-page .profile-page .profile-work-card .item-description .content-sub-text,
body.profile-detail-page .profile-page .profile-work-card .content-sub-sub-text,
body.profile-detail-page .profile-page .profile-work-card--tunlist .profile-tunlist-description,
body.profile-detail-page .profile-page .profile-work-card .story-short-description,
body.profile-detail-page .profile-page .profile-work-card .ebook-short-description,
body.profile-detail-page .profile-page .profile-character-widget .character-card-quote,
body.profile-detail-page .profile-page .profile-character-widget .character-card-creator {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.profile-detail-page .profile-page .profile-work-card .item-description .content-sub-text,
body.profile-detail-page .profile-page .profile-work-card .content-sub-sub-text,
body.profile-detail-page .profile-page .profile-character-widget .character-card-creator {
  color: var(--Text-Neutral-tertiary);
}

body.profile-detail-page .profile-page .profile-work-card .story-short-description,
body.profile-detail-page .profile-page .profile-work-card .ebook-short-description,
body.profile-detail-page .profile-page .profile-work-card--tunlist .profile-tunlist-description,
body.profile-detail-page .profile-page .profile-character-widget .character-card-quote {
  color: var(--Text-Neutral-secondary);
}

body.profile-detail-page .profile-page .profile-work-card .item-description .state-section,
body.profile-detail-page .profile-page .profile-work-card--tunlist .card-body-list .stat-section {
  color: var(--Text-Brand-default);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-xs, 10px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-xs, 15px);
}

body.profile-detail-page .profile-page .profile-work-card--ebook .ebook-rating {
  color: var(--Text-Brand-default);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page .profile-work-card--ebook .ebook-price {
  color: var(--Text-Brand-default);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
  line-height: normal;
}

body.profile-detail-page .profile-page .profile-work-card--ebook .ebook-price.discount {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page .profile-character-widget .character-card-name {
  color: var(--Text-Neutral-primary);
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: var(--Heading-font-size-md, 24px);
  font-weight: 500;
  line-height: normal;
}

body.profile-detail-page .profile-page .profile-character-widget .character-card-quote {
  font-size: var(--Body-font-size-lg, 16px);
  line-height: var(--Body-font-line-height-lg, 24px);
}

body.profile-detail-page .profile-page .profile-character-widget .character-card-creator {
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page .profile-character-widget .character-card-chats {
  color: var(--Text-Brand-default);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-md, 16px);
  font-weight: 500;
  line-height: normal;
}

body.profile-detail-page .profile-page .profile-character-widget .character-story-label {
  font-size: var(--Body-font-size-lg, 16px);
  line-height: var(--Body-font-line-height-lg, 24px);
}

body.profile-detail-page .profile-page .profile-character-widget .character-story-name {
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
  line-height: normal;
}

body.profile-detail-page .profile-page .tag-promote,
body.profile-detail-page .profile-page .promote-countdown {
  background-color: var(--Background-Brand-default);
  color: var(--Base-on-color);
}

/* Flashsale badge: discount = danger, free = success (Figma Overlay Bar) */
body.profile-detail-page .profile-page .tag-flashsale {
  background-color: var(--Background-Danger-default) !important;
  color: var(--Base-on-color) !important;
  flex-shrink: 0;
  white-space: nowrap;
  width: fit-content;
  height: fit-content;
  line-height: 1;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-sm, 14px);
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 4px;
}

body.profile-detail-page .profile-page .tag-flashsale.tag-flashsale--free {
  background-color: var(--Background-Success-default) !important;
}

/* Cover overlay bar — Figma Medium: Action 16px, compact height */
body.profile-detail-page .profile-page .item-content {
  position: relative;
  display: flex;
  flex-direction: column;
}

body.profile-detail-page .profile-page .flashsale-countdown {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 4px;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-md, 16px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background-color: var(--Background-Danger-default);
  color: var(--Base-on-color);
  border-radius: 0 0 8px 8px;
}

body.profile-detail-page .profile-page .flashsale-countdown.flashsale-countdown--free {
  background-color: var(--Background-Success-default);
}

@media (max-width: 575px) {
  body.profile-detail-page .profile-page .flashsale-countdown {
    border-radius: 0 0 4px 4px;
  }
}

body.profile-detail-page .profile-page .item-overlay,
body.profile-detail-page .profile-page .btn-circle-overlay--item {
  background-color: color-mix(in srgb, var(--Text-Neutral-primary) 50%, transparent);
}

body.profile-detail-page .profile-page .profile-character-widget .character-story-label,
body.profile-detail-page .profile-page .profile-character-widget .character-story-name {
  color: var(--Base-on-color);
}

body.profile-detail-page .profile-page .profile-character-widget .character-story-label,
body.profile-detail-page .profile-page .profile-character-widget .character-card-quote,
body.profile-detail-page .profile-page .profile-character-widget .character-card-creator {
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.profile-detail-page .profile-page .profile-character-widget .character-card-chats {
  font-family: var(--Action-font-family, var(--twl-font-heading));
}

body.profile-detail-page .profile-page .comment-commenter,
body.profile-detail-page .profile-page .comment-commenter a {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page .comment-message,
body.profile-detail-page .profile-page .comment-message p {
  color: var(--Text-Neutral-secondary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page .comment-chapter,
body.profile-detail-page .profile-page .fanboard-content-date,
body.profile-detail-page .profile-page .profile-comment-date {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.profile-detail-page .profile-page .comment-reply-button,
body.profile-detail-page .profile-page .profile-comment-action {
  color: var(--Text-Brand-default);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
}

body.profile-detail-page .profile-page .profile-comment-content {
  padding-left: 14px;
}

body.profile-detail-page .profile-page #fanboardList .profile-fanboard-content {
  padding-left: 24px !important;
}

body.profile-detail-page .profile-page #fanboardList .comment-commenter,
body.profile-detail-page .profile-page #fanboardList .comment-commenter a {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 700;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page #fanboardList .comment-message {
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page #fanboardList .comment-amout {
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-md, 16px) !important;
  font-weight: 500;
  line-height: normal;
}

body.profile-detail-page .profile-page #fanboardList .fanboard-content-date {
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.profile-detail-page .profile-page .profile-comment-date {
  white-space: nowrap;
}

body.profile-detail-page .profile-page .profile-comment-editor,
body.profile-detail-page .profile-page #fanboard-message {
  background-color: var(--Base-bg-base);
  border: 1px solid var(--Border-Neutral-default);
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  line-height: var(--Body-font-line-height-md, 21px);
}

/* Storefront variants use larger typography than all-work medium cards. */
body.profile-detail-page .profile-page #store-list-data .section-title {
  font-size: var(--Title-Page-font-size-lg, 32px);
}

body.profile-detail-page .profile-page #store-list-data :is(.storefront-section--story-recommend, .storefront-section--tunlist-recommend) .card .item-description .content-main-text,
body.profile-detail-page .profile-page #store-list-data :is(.storefront-section--story-recommend, .storefront-section--tunlist-recommend) .card .item-description .content-main-text a {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-xlg, 20px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-xlg, 30px);
}

body.profile-detail-page .profile-page #store-list-data :is(.storefront-section--ebook-recommend, .storefront-section--comic-recommend) .card .item-description .content-main-text,
body.profile-detail-page .profile-page #store-list-data :is(.storefront-section--ebook-recommend, .storefront-section--comic-recommend) .card .item-description .content-main-text a {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-lg, 16px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-lg, 24px);
}

body.profile-detail-page .profile-page #store-list-data .card .item-description h3,
body.profile-detail-page .profile-page #store-list-data .card > p,
body.profile-detail-page .profile-page #store-list-data .card > p a {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page #store-list-data .card .state-section {
  font-size: var(--Body-font-size-sm, 12px);
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.profile-detail-page .profile-page #store-list-data .section-body-content-seq {
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: var(--Title-Page-font-size-lg, 32px);
  font-weight: 700;
  line-height: normal;
}

body.profile-detail-page .profile-page #store-list-data .storefront-section--rank .section-body-content > .w-100 {
  min-width: 0;
}

body.profile-detail-page .profile-page #store-list-data .storefront-section--rank h4.content-main-text,
body.profile-detail-page .profile-page #store-list-data .storefront-section--rank h4.content-main-text > a,
body.profile-detail-page .profile-page #store-list-data .storefront-section--rank h4.content-main-text > a > .one-line-text {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.profile-detail-page .profile-page #store-list-data .storefront-section--rank .section-body-content > .w-100 > p:not(.ebook-price) {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-sm, 12px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-sm, 18px);
}

body.profile-detail-page .profile-page .profile-comment-editor {
  position: relative;
  width: 100%;
}

body.profile-detail-page .profile-page #comment-message-validate,
body.profile-detail-page .profile-page #comment-input-validate {
  color: var(--Text-Danger-default) !important;
  font-family: var(--Body-font-family, var(--twl-font-body));
}

body.profile-detail-page .profile-page #comment-message-validate i,
body.profile-detail-page .profile-page #comment-input-validate i {
  color: var(--Icon-Danger-default);
}

body.profile-detail-page .profile-page .profile-fanboard-blocked-avatar {
  align-content: center;
  background-color: var(--Border-Neutral-default);
  border-radius: 50% !important;
  cursor: pointer;
  font-size: var(--Heading-font-size-md, 24px);
  height: 48px;
  left: 0;
  opacity: 0.7;
  top: 0;
  width: 48px;
  z-index: 4;
}

body.profile-detail-page .profile-page #statsModal .profile-stats-modal__label {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page #statsModal .profile-stats-modal__value {
  color: var(--Text-Neutral-primary);
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: var(--Body-font-size-xlg, 20px);
  font-weight: 700;
  line-height: var(--Body-font-line-height-xlg, 30px);
}

body.profile-detail-page .profile-page .follow-data-not-found {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-weight: 500;
  text-align: center;
}

body.profile-detail-page .profile-page #followModal .modal-content {
  background-color: var(--Base-bg-base);
  color: var(--Text-Neutral-primary);
}

body.profile-detail-page .profile-page #followModal :where(.modal-info-title, #followSubTitle, #followCount) {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-weight: 700;
}

body.profile-detail-page .profile-page #followModal .profile-follow-modal__summary {
  color: var(--Text-Neutral-primary);
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: var(--Heading-font-size-md, 24px);
  font-weight: 700;
}

body.profile-detail-page .profile-page #followList .profile-follow-item__name {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-weight: 500;
  line-height: var(--Body-font-line-height-md, 21px);
}

body.profile-detail-page .profile-page #followList .profile-follow-item__action,
body.profile-detail-page .profile-page #loadFollowDataMoreBtn {
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: var(--Action-font-size-lg, 20px);
  font-weight: 500;
  line-height: normal;
}

body.profile-detail-page .profile-page #loadFollowDataMoreBtn {
  color: var(--Text-Brand-default);
}

body.profile-detail-page .profile-page .btn-pagination {
  background-color: var(--Base-bg-base);
  border-color: var(--Border-Neutral-default);
  color: var(--Icon-Neutral-primary);
}

body.profile-detail-page .profile-page .btn-pagination:hover:not(:disabled),
body.profile-detail-page .profile-page .btn-pagination:focus-visible:not(:disabled) {
  background-color: var(--Background-Brand-subtle);
  border-color: var(--Border-Brand-default);
  color: var(--Icon-Brand-default);
}

body.profile-detail-page .profile-page .btn-pagination:disabled {
  background-color: var(--Background-Neutral-secondary);
  border-color: var(--Border-Neutral-subtle);
  color: var(--Icon-Neutral-disabled);
}

/* Comment editor (wysibb) — match chapter Quill visual */
body.profile-detail-page .profile-page .wysibb,
body.profile-detail-page #commentReplyModal .wysibb {
  border: 1px solid var(--Border-Neutral-default, #cacbce);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--Base-bg-base, #fff);
}

body.profile-detail-page .profile-page .wysibb .wysibb-toolbar,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar {
  border-bottom: 1px solid var(--Border-Neutral-default, #cacbce);
  padding: 8px 16px !important;
  min-height: 36px;
  background-color: var(--Base-bg-base, #fff);
  /* default theme reserves 60px for modeSwitch on the right */
  padding-right: 16px !important;
}

/* hide [BBCODE] mode switch — our toolbar flex was un-hiding it */
body.profile-detail-page .profile-page .wysibb .wysibb-toolbar .modeSwitch,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar .modeSwitch {
  display: none !important;
}

body.profile-detail-page .profile-page .wysibb .wysibb-toolbar .wysibb-toolbar-container:not(.modeSwitch),
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar .wysibb-toolbar-container:not(.modeSwitch) {
  border-right: none;
  display: inline-flex;
  align-items: center;
}

body.profile-detail-page .profile-page .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn {
  margin-left: 0 !important;
  margin-right: 4px !important;
  height: 28px;
  min-width: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 4px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.profile-detail-page .profile-page .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:last-child,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:last-child {
  padding-right: 4px !important;
  margin-right: 0 !important;
}

body.profile-detail-page .profile-page .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn .btn-inner,
body.profile-detail-page .profile-page .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn .wbb-toolbar,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn .btn-inner,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn .wbb-toolbar {
  font-size: 20px !important;
  line-height: 1 !important;
  height: auto;
  min-width: auto;
  margin: 0 !important;
}

/* hide hotkey tooltips that render as "B(ct" garbage */
body.profile-detail-page .profile-page .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-tooltip,
body.profile-detail-page .profile-page .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:hover span.btn-tooltip,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn span.btn-tooltip,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:hover span.btn-tooltip {
  display: none !important;
}

body.profile-detail-page .profile-page .wysibb .wysibb-text,
body.profile-detail-page #commentReplyModal .wysibb .wysibb-text {
  padding: 16px !important;
  margin: 0 !important;
  min-height: 93px;
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px) !important;
  line-height: var(--Body-font-line-height-md, 21px);
  color: var(--Text-Neutral-primary, #070708);
  background-color: var(--Base-bg-base, #fff);
}

body.profile-detail-page .profile-page .wysibb-text-editor,
body.profile-detail-page #commentReplyModal .wysibb-text-editor {
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px) !important;
  line-height: var(--Body-font-line-height-md, 21px);
  color: var(--Text-Neutral-primary, #070708);
}

body.profile-detail-page #commentReplyModal [contenteditable=true]:empty:not(:focus):before {
  content: "แสดงความคิดเห็นเลย...";
  color: var(--Text-Neutral-tertiary, #6d7078);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: var(--Body-font-size-md, 14px);
  font-style: normal;
  line-height: var(--Body-font-line-height-md, 21px);
}

/* Emotion/sticker picker — 4 cols like chapter sticker modal */
body.profile-detail-page #dialog-modal-show-emotions .emotion-ui {
  margin: 0;
  padding: 24px 40px 0;
}

body.profile-detail-page #dialog-modal-show-emotions .emotion-ui ul {
  display: grid;
  grid-template-columns: repeat(4, 87px);
  gap: 20px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 0 24px;
  float: none;
}

body.profile-detail-page #dialog-modal-show-emotions .emotion-ui li {
  display: flex;
  float: none;
  margin: 0;
  width: 87px;
  height: 87px;
  justify-content: center;
  align-items: center;
}

body.profile-detail-page #dialog-modal-show-emotions .emotion-ui li img {
  width: 87px !important;
  height: 87px !important;
  max-width: 87px;
  max-height: 87px;
  padding: 0 !important;
  object-fit: contain;
  cursor: pointer;
}

@media (max-width: 576px) {
  body.profile-detail-page #dialog-modal-show-emotions .emotion-ui {
    padding: 16px 16px 0;
  }

  body.profile-detail-page #dialog-modal-show-emotions .emotion-ui ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body.profile-detail-page #dialog-modal-show-emotions .emotion-ui li {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  body.profile-detail-page #dialog-modal-show-emotions .emotion-ui li img {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
  }
}

@media (max-width: 767.98px) {
  body.profile-detail-page .profile-page #displayName,
  body.profile-detail-page .profile-page .section-title,
  body.profile-detail-page .profile-page .page-topic,
  body.profile-detail-page .profile-page .page-topic a {
    font-size: var(--Title-Page-font-size-md, 28px);
  }

  body.profile-detail-page .profile-page .profile-primary-tabs .page-topic,
  body.profile-detail-page .profile-page .profile-primary-tabs .page-topic a {
    font-size: var(--Action-font-size-lg, 20px);
  }

  body.profile-detail-page .profile-page #store-list-data .section-title {
    font-size: var(--Title-Page-font-size-md, 28px);
  }
}

@media (max-width: 320px) {
  body.profile-detail-page .profile-page .sub-header,
  body.profile-detail-page .profile-page .profile-primary-tabs .page-topic,
  body.profile-detail-page .profile-page .profile-primary-tabs .page-topic a {
    font-size: var(--Action-font-size-md, 16px);
  }
}