.box-inner.full-width {
  padding: 20px 30px 14px;
}

html.profile-page-loading .profile-card,
html.profile-page-loading .nav-wrapper {
  display: none !important;
}

html.profile-page-loading .page-wrapper:not(.profile-page-loading-wrapper) {
  visibility: hidden;
  pointer-events: none;
}

html.profile-page-loading.profile-measuring .page-wrapper:not(.profile-page-loading-wrapper) {
  position: absolute;
  left: 0;
  right: 0;
  visibility: hidden;
}

html.profile-page-loading.profile-measuring .profile-card {
  display: flex !important;
}

.profile-missing-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 4px 0 0;
  text-align: left;
}

.profile-missing-panel .level-back-row {
  margin: 0 0 4px;
  line-height: 1.1;
  text-align: left;
}

.profile-missing-panel .level-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

.profile-missing-panel .level-back-link:hover {
  text-decoration: underline;
}

.profile-missing-panel .level-back-link img {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  margin-left: 0;
  rotate: -90deg;
  opacity: 0.75;
}

.profile-missing-message {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
}

/* Match the level page loading/not-found shell width. */
.profile-page-loading-wrapper,
.page-wrapper:has(.profile-missing-panel) {
  width: 92%;
  max-width: 1320px;
}

.profile-page-loading-wrapper .box-inner.single-column,
.box-inner.single-column:has(.profile-missing-panel) {
  width: 100%;
  max-width: none;
  padding: 20px 30px 14px;
}

.profile-card .profile-body > * {
  max-width: none;
}

/* FULL WIDTH PROFILE LAYOUT */
.profile-wrapper {
  width: 96%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PROFILE CARD */
.profile-card {
  --profile-summary-height: 276px;

  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 0 30px 10px 30px;

  margin-left: -38px;
  margin-right: -38px;
}

.profile-banner {
  position: relative;
  height: 250px;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: visible;
  border: 1px solid var(--border);
  background: linear-gradient(
    to bottom,
    #7fa6c1 0%,
    #8fb3cb 50%,
    #a9c6da 100%
  );
}

.profile-banner-inner {
  position: absolute;
  inset: 0;

  border-radius: 8px;
  overflow: hidden;

  background: linear-gradient(
    to bottom,
    #7fa6c1 0%,
    #8fb3cb 50%,
    #a9c6da 100%
  );

  z-index: 1;
}

/* identity container */
.profile-identity {
  position: absolute;
  bottom: 18px;
  left: 24px;

  display: flex;
  align-items: center;
  gap: 18px;

  z-index: 2;
}

/* avatar bigger */
.profile-avatar {
  width: 88px;
  height: 88px;
  font-size: 32px;

  border-radius: 50%;
  background: #4a90c2;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: bold;

  border: 4px solid var(--role-color, white);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  overflow: hidden;
}

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

.profile-user-block {
  position: relative;
  padding: 6px 14px;

  border-radius: 10px;

  background: linear-gradient(
    rgba(255,255,255,0.88),
    rgba(235,243,250,0.88)
  );

  border: 1px solid rgba(0,0,0,0.06);

  backdrop-filter: blur(3px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 3px rgba(0,0,0,0.12);

  margin-left: -6px;
}

/* username */
.profile-name {
  font-size: 26px;
  font-weight: bold;

  color: var(--primary-dark);

  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* REMOVE meta entirely */
.profile-meta {
  display: none;
}

.profile-description {
  color: #000;
  line-height: 1.4;

  white-space: normal;
  word-break: break-word;

  background: linear-gradient(#f4f8fc, #e7eff6);
  box-shadow: inset 0 1px 0 #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;

  padding: 15px;

  min-height: 0;
  max-height: none;

  overflow-y: auto;
  overflow-x: auto;
}

.profile-stats {
  background: linear-gradient(#f4f8fc, #e7eff6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  font-size: 14px;

  box-shadow: inset 0 1px 0 #ffffff;
}

.profile-stats strong {
  color: var(--primary-dark); /* match site theme */
  font-weight: 600;
}

.profile-levels-link,
.profile-plays-link,
.profile-rates-link,
.profile-reviews-link {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.profile-levels-link:hover,
.profile-levels-link:focus-visible,
.profile-plays-link:hover,
.profile-plays-link:focus-visible,
.profile-rates-link:hover,
.profile-rates-link:focus-visible,
.profile-reviews-link:hover,
.profile-reviews-link:focus-visible {
  text-decoration: underline;
}

.profile-plays-link.is-disabled,
.profile-rates-link.is-disabled {
  color: inherit;
  cursor: text;
  font-weight: inherit;
}

.profile-plays-link.is-disabled:hover,
.profile-rates-link.is-disabled:hover {
  text-decoration: none;
}

.profile-plays-link.is-disabled *,
.profile-plays-link.is-disabled:hover *,
.profile-rates-link.is-disabled *,
.profile-rates-link.is-disabled:hover * {
  cursor: text;
}

.profile-stats div {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.profile-stats div:last-child {
  border-bottom: none;
}

.profile-comments-section {
  margin-top: 28px;
  margin-bottom: -2px;

  padding-top: 18px;
  padding-bottom: 0;

  border-top: 1px solid var(--border);
}

.profile-comments-section h2 {
  margin: 0 0 14px;
  color: #000;
  font-size: 28px;
  text-align: left;
}

.profile-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 0;
}

.profile-card.comments-loading-state {
  padding-bottom: 4px;
}

.profile-comments.comments-loading .no-comments {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment {
  border-radius: 6px;
  padding: 14px;
  font-size: 14px;
  width: 100%;
  gap: 6px;

  background: linear-gradient(#ffffff, #edf3f8);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(0,0,0,0.06);
}

.profile-body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.profile-main,
.profile-sidebar {
  display: flex;
  height: var(--profile-summary-height);
}

.profile-main {
  min-width: 0;
  position: relative;
}

.profile-main.has-description-toggle {
  flex-direction: column;
}

.profile-main.description-expanded {
  height: auto;
}

.profile-description,
.profile-stats {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.profile-main {
  flex: 1;
}

.profile-main.has-description-toggle .profile-description {
  height: 100%;
  position: relative;
}

.profile-main.description-expanded .profile-description {
  height: auto;
  min-height: var(--profile-summary-height);
}

.profile-description.is-collapsible {
  scroll-behavior: smooth;
}

.profile-description.is-scrollable {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

.profile-description.is-expanded {
  overflow: visible;
}

.profile-description-content {
  min-width: 0;
}

.profile-description-toggle,
.profile-description-collapse {
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 13px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.38;
}

.profile-description-toggle {
  right: 26px;
  bottom: 12px;
}

.profile-description-collapse {
  right: 12px;
  bottom: 12px;
}

.profile-description-toggle[hidden],
.profile-description-collapse[hidden] {
  display: none;
}

.profile-description-toggle:hover,
.profile-description-toggle:focus-visible,
.profile-description-collapse:hover,
.profile-description-collapse:focus-visible {
  opacity: 1;
}

.profile-description-toggle::before,
.profile-description-collapse::before {
  content: attr(data-tooltip);
  position: absolute;
  right: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: #4a90c2;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: opacity 0.1s ease;
}

.profile-description-toggle::after,
.profile-description-collapse::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #4a90c2 transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.profile-description-toggle:hover::before,
.profile-description-toggle:hover::after,
.profile-description-collapse:hover::before,
.profile-description-collapse:hover::after {
  opacity: 1;
}

.profile-sidebar {
  width: 320px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .profile-body {
    flex-direction: column;
  }

  .profile-main,
  .profile-sidebar {
    width: 100%;
    height: auto;
  }

  .profile-main.has-description-toggle {
    height: auto;
  }

  .profile-main.description-expanded {
    height: auto;
  }

  .profile-main.has-description-toggle .profile-description,
  .profile-main.description-expanded .profile-description,
  .profile-description {
    min-height: 160px;
    max-height: var(--profile-summary-height);
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
  }

  .profile-description.is-expanded {
    overflow-y: auto;
    overflow-x: auto;
  }

  .profile-description-toggle,
  .profile-description-collapse {
    display: none !important;
  }

  .profile-stats {
    height: auto;
  }

  .profile-music-bar {
    grid-template-columns: 1fr;
  }
}

/* COMMENT CARD */
.comment {
  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);
  border-radius: 6px;

  padding: 12px 14px;
  box-shadow: inset 0 1px 0 #ffffff;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* HEADER */
.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

/* LEFT SIDE (avatar + name) */
.comment-user {
  display: flex;
  align-items: center;
}

.comment-avatar {
  border-radius: 50%;

  background: #4a90c2;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: bold;

  border: 2px solid var(--role-color, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  overflow: hidden;
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}

.comment-username {
  color: var(--primary-dark);
}

/* BODY */
.comment-body {
  padding-left: 2px;
}

.comment-body strong,
.reply-body strong {
  color: #000;
}

.comment-body,
.reply-body {
  padding-right: 10px;
  box-sizing: border-box;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;

  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.comment.editing {
  gap: 6px;
}

.comment.editing .comment-body {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.comment.editing .comment-form-footer {
  margin-top: 8px;
  padding-bottom: 0;
  overflow: visible;
}

.comment.editing .comment-form-actions {
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.comment.editing .comment-footer {
  justify-content: flex-end;
  margin-top: 4px;
}

.comment.editing .comment-date {
  margin-left: 0;
}

.comment.editing .profile-comment-footer-actions {
  display: none;
}

/* FOOTER (date bottom right) */
.comment-footer {
  display: flex;
  align-items: flex-end;
  gap: 12px;

  font-size: 12px;
  color: #6b7c8c;
}

.comment-body,
.comment-footer {
  padding-left: 0;
}

.comment-reply-indicator {
  display: inline-block;
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-dark);

  padding: 3px 8px;
  border-radius: 6px;

  background: rgba(95,134,163,0.12);
  border: 1px solid rgba(95,134,163,0.25);

  transition: all 0.12s ease;
}

.comment-reply-indicator:hover {
  background: rgba(95,134,163,0.22);
  border-color: rgba(95,134,163,0.4);
  text-decoration: underline;
}

.profile-comment-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-comment-reactions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.profile-comment-reactions .reaction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: bold;
  line-height: normal;
  overflow: visible;
}

.profile-comment-reactions .reaction-btn img {
  width: 16px;
  height: 16px;
  opacity: 0.78;
}

.profile-comment-reactions .reaction-btn:hover img,
.profile-comment-reactions .reaction-btn.active img {
  opacity: 1;
}

.profile-comment-reactions .reaction-btn span {
  font-size: 15px;
  line-height: 1;
}

.comment-date {
  margin-left: auto;
}

.comment-actions {
  display: flex;
  gap: 10px;
}

.comment-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-btn img {
  opacity: 0.7;
  transition: all 0.15s ease;
}

/* hover = highlight */
.comment-btn:hover img {
  opacity: 1;
}

/* subtle color distinctions */
.comment-btn.staff img {
  opacity: 0.75;
}

.comment-btn.danger img {
  opacity: 0.6;
}

.comment-btn.danger:hover img {
  filter: brightness(0) saturate(100%) invert(32%) sepia(75%) saturate(500%) hue-rotate(330deg);
  opacity: 1;
}

.comment-actions .nav-item {
  position: relative;
}

.comment-actions .tooltip,
.reply-actions .tooltip {
  bottom: 140%;
  font-size: 12px;
  padding: 5px 10px;
}

.comment-actions .legacy-archive-tooltip,
.reply-actions .legacy-archive-tooltip {
  text-align: center;
}

/* button (icon only) */
.profile-actions-btn {
  background: none;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-actions-btn img {
  width: 26px;
  height: 26px;
  opacity: 0.75;
  transition: 0.15s;
}

.profile-actions-btn:hover img {
  opacity: 1;
  transform: rotate(10deg);
}

/* dropdown */
.profile-dropdown {
  position: absolute;
  right: -6px;
  top: 42px;

  z-index: 9999;

  background: linear-gradient(#f8fbff, #eef4f9);
  border: 1px solid var(--border);
  border-radius: 8px;

  min-width: 210px;
  padding: 6px 0;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 10px rgba(0,0,0,0.15);

  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.15s ease;
}

.profile-dropdown.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.profile-dropdown a {
  display: block;
  padding: 9px 16px;

  color: var(--primary-dark);
  font-weight: 600;
  font-size: 14px;

  text-decoration: none;
  transition: background 0.12s ease;
}

.profile-dropdown a:hover {
  background: rgba(47, 85, 110, 0.12);
  box-shadow: inset 3px 0 0 var(--primary);
}

.profile-dropdown a:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.dropdown-section {
  padding: 4px 0;
}

.dropdown-section:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 4px;
}

.dropdown-title {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 11px;
  font-weight: bold;
  color: #6b7c8c;

  padding: 6px 14px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dropdown-title img {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.profile-dropdown a,
.action-dropdown a,
.action-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-dropdown a i,
.action-dropdown a i,
.action-dropdown button i {
  width: 18px;
  color: currentColor;
  opacity: 0.85;
  text-align: center;
}

.profile-actions {
  position: absolute;
  top: 14px;
  right: 16px;

  display: flex;
  gap: 0;
  padding: 2px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  background: linear-gradient(
    rgba(255,255,255,0.88),
    rgba(235,243,250,0.88)
  );
  backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 3px rgba(0,0,0,0.12);
  z-index: 3;
}

.profile-actions[hidden] {
  display: none !important;
}

/* each icon container */
.action-group {
  position: relative;
}

/* icon button */
.action-btn {
  background: transparent;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 6px;
}

.action-btn img,
.action-btn i,
.action-btn svg {
  width: 21px;
  height: 21px;
  opacity: 0.75;
  transition: 0.15s;
}

.action-btn i,
.action-btn svg {
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 21px;
}

.action-btn:hover {
  background: transparent;
}

.action-btn:hover img,
.action-btn:hover i,
.action-btn:hover svg {
  opacity: 1;
}

/* dropdown */
.action-dropdown {
  position: absolute;
  right: 0;
  top: 36px;

  background: linear-gradient(#f8fbff, #eef4f9);
  border: 1px solid var(--border);
  border-radius: 8px;

  min-width: 180px;
  padding: 6px 0;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 10px rgba(0,0,0,0.15);

  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.15s ease;
}

.action-dropdown.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* items */
.action-dropdown a,
.action-dropdown button {
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: inherit;
  text-decoration: none;
}

.action-dropdown a:hover,
.action-dropdown button:hover {
  background: rgba(47, 85, 110, 0.12);
  box-shadow: inset 3px 0 0 var(--primary);
}

.action-dropdown a:not(:last-child),
.action-dropdown button:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* COMMENT INPUT BOX */
.profile-comment-form {
  margin-top: 12px;

  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);
  border-radius: 8px;

  padding: 14px;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(0,0,0,0.06);

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* TEXTAREA */
.profile-comment-form textarea {
  width: 100%;
  min-height: 95px;

  border-radius: 8px;
  border: 1px solid var(--border);

  padding: 12px;
  font-family: inherit;
  font-size: 14px;

  background: linear-gradient(#ffffff, #f5f9fd);

  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.06);

  transition: all 0.15s ease;
}

.profile-comment-form textarea:focus {
  outline: none;
  border-color: #5f86a3;

  background: #ffffff;

  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.1),
    0 0 0 2px rgba(95,134,163,0.15);
}

.profile-comment-form textarea,
.thread-reply-form textarea,
.edit-textarea {
  display: block;
  box-sizing: border-box;
  resize: none;
}

.profile-comment-form textarea[hidden],
.thread-reply-form textarea[hidden],
.edit-textarea[hidden] {
  display: none !important;
}

.content-preview {
  display: block;
  width: 100%;
  height: 96px;
  max-height: 96px;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f4f8fc, #e7eff6);
  box-shadow: inset 0 1px 0 #ffffff;
  color: #000;
  line-height: 1.45;
  word-break: break-word;
}

.content-preview.profile-description {
  min-height: 0;
  padding: 12px;
}

.content-preview em,
.description-preview-body em {
  color: #6b7c8c;
  font-style: italic;
}

.comment-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* === COMMENT FORM BUTTONS (UPGRADED) === */
.comment-form-actions .control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 36px;
  line-height: normal;
  padding: 6px 14px;
  overflow: visible;
}

.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.char-count {
  font-size: 12px;
  color: #6b7c8c;
}

.char-count.warning {
  color: #c0392b;
  font-weight: bold;
}

/* REPLIES LIST */
.comment-thread {
  margin-top: 8px;
  padding-top: 8px;

  border-top: 1px solid rgba(0,0,0,0.08);

  background: none;
  box-shadow: none;
}

.comment-thread:empty {
  display: none;
  border-top: none;
}

.comment-thread[hidden] {
  display: none !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.thread-reply-form[hidden] {
  display: none !important;
}

.thread-replies[hidden] {
  display: none !important;
}

.comment-avatar,
.reply-avatar {
  width: 48px;
  height: 48px;
  font-size: 15px;
}

.comment-username,
.reply-username {
  font-size: 15px;
  font-weight: 600;
}

.comment-btn img,
.reply-actions .comment-btn img {
  width: 22px;
  height: 22px;
}

.comment-footer,
.reply-footer {
  font-size: 12px;
  color: #6b7c8c;
}

.comment-header,
.reply-header {
  align-items: center;
}

.comment-user,
.reply-user {
  gap: 10px;
}

.reply-footer {
  text-align: right;
  margin-top: 4px;
}

/* SINGLE REPLY (mini comment card) */
.reply {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  overflow: visible;

  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0,0,0,0.05);

  margin-bottom: 8px;
}

/* reply header */
.reply-header {
  display: flex;
  justify-content: space-between;
}

.reply-actions {
  display: flex;
  gap: 8px;
}

.reply-actions .comment-btn:hover img {
  opacity: 1;
}

.reply-user {
  display: flex;
  align-items: center;
}

/* avatar */
.reply-avatar {
  border-radius: 50%;
  background: #4a90c2;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: bold;

  border: 2px solid var(--role-color, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);

  overflow: hidden;
}

.reply-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}

/* username */
.reply-username {
  color: var(--primary-dark);
}

/* body */
.reply-body {
  opacity: 1;
}

/* ===== REPLY FORM (THIS IS THE BIG FIX) ===== */

.thread-reply-form {
  margin-top: 10px;
  padding: 14px;
  overflow: visible;

  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);
  border-radius: 8px;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(0,0,0,0.06);

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* textarea */
.thread-reply-form textarea {
  font-family: var(--site-font);
  width: 100%;
  min-height: 90px;

  border-radius: 8px;
  padding: 12px;

  font-size: 14px;
  font-family: inherit;

  background: linear-gradient(#ffffff, #f5f9fd);
  border: 1px solid var(--border);

  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.06);

  transition: all 0.15s ease;
}

.thread-reply-form textarea:focus {
  outline: none;
  border-color: #5f86a3;

  background: #ffffff;

  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.1),
    0 0 0 2px rgba(95,134,163,0.15);
}

.thread-replies {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.reply-loading-box {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
}

.profile-loading-box {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-infractions-modal-content {
  width: min(860px, 94vw);
}

.profile-infraction-list {
  display: grid;
  gap: 10px;
  min-height: 0;
  max-height: calc(92vh - 176px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
}

.profile-infraction-list:has(> .profile-loading-box:only-child),
.profile-rates-modal-scope .level-rates-modal-content .rates-list:has(> .profile-loading-box:only-child) {
  gap: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.profile-infraction-card {
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(#f9fcff, #edf3f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(35, 61, 82, 0.08);
}

.profile-infraction-card.active-infraction {
  border-color: #d49a1f;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 0 2px rgba(212, 154, 31, 0.16),
    0 1px 4px rgba(35, 61, 82, 0.12);
}

.profile-infraction-card-header {
  display: grid;
  margin: 0 0 11px;
}

.profile-infraction-card-header h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}

.profile-infraction-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 0;
  padding: 0;
}

.profile-infraction-details div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d8e3ec;
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f3f8fc);
}

.profile-infraction-details dt {
  margin: 0;
  color: var(--primary-dark);
  font-size: inherit;
  font-weight: 800;
  line-height: 1.15;
}

.profile-infraction-details dd {
  margin: 3px 0 0;
  color: #263848;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.profile-infraction-issued-field dt {
  display: block;
}

.profile-infraction-issued-staff {
  color: var(--primary-dark);
  font-size: inherit;
  font-weight: inherit;
}

.profile-infraction-issued-staff a,
.profile-infraction-issued-staff-name {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.profile-infraction-issued-staff a:hover {
  text-decoration: underline;
}

.profile-infraction-message-field {
  grid-column: 1 / -1;
}

.profile-infraction-message-field dd {
  overflow: visible;
}

.profile-infraction-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.profile-infractions-pagination {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .profile-infraction-details {
    grid-template-columns: 1fr;
  }
}

.moderation-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 40, 60, 0.65);
}

.moderation-modal-content {
  width: min(760px, 94vw);
  max-height: 90vh;
  overflow: hidden auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(#f4f8fc, #e3edf6);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 30px rgba(0,0,0,0.3);
  animation: levelGuidelinesPopIn 0.18s ease;
}

.moderation-modal-header {
  padding: 14px;
  background: linear-gradient(#4a7fa3, #3b6e8f);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.moderation-form {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}

.moderation-modal-body {
  padding: 18px 22px;
}

.moderation-loading-box {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
}

.moderation-modal .staff-button {
  padding: 8px 16px;
}

.moderation-modal .staff-input {
  flex: 1;
  min-width: 220px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  font: inherit;
}

.moderation-required-note {
  margin: -2px 0 0;
  color: #617589;
  font-size: 13px;
  line-height: 1.3;
}

.moderation-field {
  display: grid;
  gap: 7px;
}

.moderation-field span,
.moderation-reasons legend,
.moderation-ban-parameters legend {
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 800;
}

.moderation-field .staff-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.moderation-duration {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(180px, 0.55fr);
  gap: 12px;
}

.required-asterisk {
  color: #c10000;
  font-weight: 800;
}

.moderation-reasons,
.moderation-ban-parameters {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.moderation-ban-parameters[hidden] {
  display: none !important;
}

.moderation-reasons[hidden] {
  display: none !important;
}

.moderation-reasons legend,
.moderation-ban-parameters legend {
  padding: 0;
  margin-bottom: 7px;
}

.moderation-reasons label,
.moderation-ban-parameters label {
  color: var(--text);
  font-size: 14px;
}

.moderation-message {
  min-height: 82px;
  resize: none;
}

.moderation-duration input:disabled {
  cursor: not-allowed;
}

.moderation-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 700px) {
  .moderation-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .moderation-modal-actions .staff-button {
    width: 100%;
  }

  .moderation-modal .staff-input {
    min-width: 0;
    width: 100%;
  }

  .moderation-modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 12px;
  }

  .moderation-form {
    padding: 16px;
  }

  .moderation-duration,
  .moderation-reasons,
  .moderation-ban-parameters {
    grid-template-columns: 1fr;
  }
}

/* footer */
.thread-form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.thread-char-count {
  font-size: 12px;
  color: #6b7c8c;
}

.thread-char-count.warning {
  color: #c0392b;
  font-weight: bold;
}

.thread-header {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 4px;
  padding-left: 46px;
}

.comment,
.reply {
  transition: box-shadow 0.12s ease;
}

.comment:hover,
.reply:hover {
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(0,0,0,0.06);
}

.comment-body,
.reply-body {
  font-size: 14px;
  line-height: 1.45;
  color: #333;
}

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

.thread-actions .control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 36px;
  overflow: visible;
  line-height: normal;
  padding: 6px 14px;
}

.edit-textarea {
  width: 100%;
  min-height: 80px;
  border-radius: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 14px;
}

.edit-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.edit-actions {
  display: flex;
  gap: 8px;
}

.comment-username,
.reply-username {
  text-decoration: none;
  color: var(--primary-dark);
}

.comment-username:hover,
.reply-username:hover {
  text-decoration: underline;
}

.send-private-comment {
  display: none;
}

.private-comment {
  border: 2px solid #000 !important;
  position: relative;
}

.private-comment::before {
  content: "PRIVATE";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  font-weight: bold;
  color: #000;
  opacity: 0.6;
}

.deleted-comment {
  border: 2px solid #c0392b !important;
  opacity: 0.65;
  position: relative;
}

.deleted-comment::before {
  content: "DELETED";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 10px;
  font-weight: bold;
  color: #c0392b;
}

/* PINNED COMMENTS */
.pinned-comment {
  border: 2px solid #d4af37 !important;
  box-shadow:
    inset 0 1px 0 #fff6cc,
    0 0 8px rgba(212,175,55,0.35);
  position: relative;
}

.pinned-badge {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #d4af37;
}

.active-pin img {
  filter:
    brightness(0)
    saturate(100%)
    invert(75%)
    sepia(53%)
    saturate(484%)
    hue-rotate(4deg)
    brightness(95%)
    contrast(89%);
  opacity: 1 !important;
}

/* LOCKED COMMENTS */
.locked-comment {
  border: 2px solid #7a7a7a !important;

  box-shadow:
    inset 0 1px 0 #f2f2f2,
    0 0 8px rgba(0,0,0,0.12);

  position: relative;
}

.locked-badge {
  position: absolute;

  top: 8px;
  right: 12px;

  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;

  color: #666;
}

.comment.linked-target:not(.pinned-comment):not(.deleted-comment):not(.private-comment):not(.locked-comment),
.reply.linked-target:not(.deleted-comment):not(.private-comment):not(.locked-comment) {
  border-color: #d49a1f;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 0 2px rgba(212,154,31,0.12);
}

.active-lock img {
  opacity: 0.75 !important;
  filter: none;
}

.locked-thread-message {
  margin-top: 10px;

  padding: 10px 12px;

  border-radius: 8px;

  background: linear-gradient(#f5f5f5, #ebebeb);

  border: 1px solid #c9c9c9;

  color: #666;
  font-size: 13px;
  font-weight: 600;

  text-align: center;

  box-shadow:
    inset 0 1px 0 #ffffff;
}

.comment-btn:disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.comment-btn:disabled img {
  opacity: 0.75;
  transform: none !important;
}

.no-comments {
  padding: 18px;
  border-radius: 8px;

  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);

  color: #6b7c8c;
  text-align: center;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(0,0,0,0.04);
}

.no-comments em {
  font-style: italic;
}

.comment-btn.obliterate img {
  opacity: 0.7;
}

.comment-btn.obliterate:hover img {
  filter:
    brightness(0)
    saturate(100%)
    invert(14%)
    sepia(96%)
    saturate(7452%)
    hue-rotate(2deg)
    brightness(92%)
    contrast(118%);
}

#profile-music {
  width: 100%;
  margin-top: 10px;
}

.profile-music-bar {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(#f7fbff, #e4eef6);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0,0,0,0.05);
}

.profile-music-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  margin-bottom: 0;
  color: var(--primary-dark);
}

.profile-music-heading i {
  flex-shrink: 0;
}

.profile-music-title {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
  padding: 2px 0 3px;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;

  color: var(--primary-dark);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: nowrap;

  transition: all 0.15s ease;
}

.profile-music-title:hover {
  color: #b00000;
  text-decoration: underline;
}

.profile-music-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.profile-music-controls button,
#music-youtube-btn {
  width: 95px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: bold;
  font-size: 14px;
}

.reply .edit-textarea {
  min-height: 96px;
}

.reply .content-preview {
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
}

.reply .comment-form-footer {
  margin-top: 10px;
  padding-bottom: 2px;
  overflow: visible;
}

.reply .comment-form-actions {
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.reply .comment-form-actions .control-btn {
  box-sizing: border-box;
  min-height: 36px;
  overflow: visible;
  line-height: normal;
  padding: 6px 14px;
}

.profile-music-player iframe {
  width: 100%;
  height: 152px;

  border: 1px solid var(--border);
  border-radius: 8px;
}

.profile-audio-player {
  display: grid;
  grid-template-columns: repeat(3, 26px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;

  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
}

.profile-audio-player button {
  width: 26px;
  height: 26px;

  font-size: 18px;
}

.music-icon-btn {
  width: 26px;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  padding: 0;
  flex-shrink: 0;
}

.profile-audio-player .music-icon-btn {
  box-sizing: border-box;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  padding: 0 !important;
}

.music-icon-btn.active-loop {
  background: linear-gradient(#bcd3e6, #9fb8c9);
  border-color: #5f86a3;

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 1px 2px rgba(0,0,0,0.08);
}

.music-icon-btn.active-loop img {
  opacity: 1;
}

.music-icon-btn.active-loop:hover {
  background: linear-gradient(#bcd3e6, #9fb8c9);
  border-color: #5f86a3;
  transform: none;
}

.music-icon-btn img {
  width: 14px;
  height: 14px;

  display: block;
  pointer-events: none;
}

.profile-audio-player .music-icon-btn img {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px;
  max-height: 14px;
}

#music-progress {
  flex: 1;
  min-width: 0;
  appearance: none;
  height: 8px;
  border-radius: 999px;
  outline: none;

  background:
    linear-gradient(
      to right,
      #d60000 0%,
      #d60000 var(--progress, 0%),
      #d8d8d8 var(--progress, 0%),
      #d8d8d8 100%
    );
}

#music-progress::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;

  border-radius: 50%;
  background: #d60000;
  border: 2px solid #fff;
  cursor: pointer;

  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

#music-progress::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d60000;
  border: 2px solid #fff;
  cursor: pointer;
}

#music-time {
  grid-column: auto;
  min-width: 92px;
  text-align: right;

  font-weight: 600;
  color: var(--primary-dark);
  font-size: 13px;
  line-height: 1;
}

#youtube-player,
#profile-audio-source {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}

/* ==========================
   BBCODE STYLES
========================== */

.profile-description strong {
  color: inherit;
  font-weight: 700;
}

.profile-description em {
  font-style: italic;
}

.profile-description u {
  text-decoration: underline;
}

.profile-description s {
  text-decoration: line-through;
}

.profile-description a {
  color: #2d5f8b;
  text-decoration: none;
  word-break: break-word;
}

.profile-description a:hover,
.profile-description a:focus-visible {
  color: #b00000;
  text-decoration: underline;
}

/* inline tags */
.profile-description strong,
.profile-description em,
.profile-description u,
.profile-description s,
.profile-description span,
.profile-description a {
  margin: 0;
  padding: 0;
}

/* image */
.bbcode-image {
  display: block;
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: 0;
}

.profile-description br + .bbcode-image,
.profile-description br + .bbcode-quote,
.profile-description br + .bbcode-code {
  margin-top: 0;
}

.bbcode-image + br,
.bbcode-quote + br,
.bbcode-code + br {
  display: none;
}

.bbcode-block {
  margin: 0;
}

/* quote */
.bbcode-quote {
  padding: 12px 14px;
  margin: 0;
  border: 1px solid var(--border);
  border-left: 4px solid #6b8ca8;
  border-radius: 8px;

  background: linear-gradient(#f8fbff, #eef4f9);

  box-shadow: inset 0 1px 0 #ffffff;

  font-style: italic;
  color: #333;
  line-height: 1.4;
}

/* code */
.bbcode-code {
  padding: 12px;
  background: #1f1f1f;
  color: white;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
  font-size: 14px;

  line-height: 1.4; /* restore readable code lines */
}

.bbcode-code code {
  margin: 0;
  padding: 0;
  font-family: inherit;
}

/* highlight */
.bbcode-highlight {
  background: rgba(255, 225, 84, 0.58);
  padding: 2px 4px;
  border-radius: 4px;
}

.profile-description .bbcode-highlight {
  padding: 2px 4px;
}

/* alignment */
.bbcode-center {
  text-align: center;
}

.bbcode-right {
  text-align: right;
}

/* horizontal rule */
.bbcode-hr {
  border: none;
  border-top: 1px solid var(--border);
}

/* spoiler */
.bbcode-spoiler {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f8fbff, #eef4f9);
  box-shadow: inset 0 1px 0 #ffffff;
  overflow: hidden;
}

.bbcode-spoiler summary {
  cursor: pointer;
  padding: 8px 14px;
  background: var(--button-bg);
  color: var(--button-text);
  font-weight: bold;
  box-shadow: var(--button-shadow);
  user-select: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.bbcode-spoiler summary:hover {
  background: var(--button-hover-bg);
  color: var(--button-hover-text);
  box-shadow: var(--button-hover-shadow);
}

.bbcode-spoiler summary:active {
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
}

.bbcode-spoiler-content {
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* youtube */
.bbcode-youtube {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}

.bbcode-youtube iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* lists */
.bbcode-list {
  padding-left: 28px;
}

.bbcode-list li {
  margin: 6px 0;
}

/* renderer error messages */
.bbcode-error {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d8b5b5;
  background: linear-gradient(#fff5f5, #ffeaea);
  color: #a32d2d;
  font-size: 14px;
  font-weight: 600;
}

.bbcode-block > * {
  margin-top: 0;
  margin-bottom: 0;
  margin: 0;
}

.bbcode-list, .bbcode-quote, .bbcode-code, .bbcode-center, .bbcode-right, .bbcode-hr, .bbcode-spoiler, .bbcode-youtube {
  margin: 0;
}

.profile-rates-modal-scope .help-modal {
  --profile-log-index-column: 58px;
  --profile-log-level-column: 463px;
  --profile-log-author-column: 180px;
  --profile-log-date-column: 152px;
  --profile-log-action-column: 44px;
  --profile-log-user-action-column: 88px;
  --profile-log-user-column: 340px;
  --profile-log-score-column: 86px;
  --profile-log-gap: 12px;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 40, 60, 0.65);
}

.profile-rates-modal-scope .help-modal.hidden {
  display: none;
}

.profile-rates-modal-scope .help-modal-content.level-rates-modal-content {
  width: min(1120px, 94vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(#f8fbff, #e7eff6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
}

.profile-rates-modal-scope #profile-plays-modal .level-rates-modal-content {
  width: min(980px, 92vw);
}

.profile-rates-modal-scope .help-modal-content.profile-user-list-modal-content {
  width: min(760px, 92vw);
}

.profile-rates-modal-scope .help-modal.profile-user-list-readonly .profile-user-list-modal-content {
  width: min(680px, 92vw);
}

.profile-rates-modal-scope .help-modal-content.legacy-avatar-modal-content {
  width: min(720px, 92vw);
}

.profile-rates-modal-scope .level-rates-modal-header {
  --level-rate-header-left-gutter: 18px;
  --level-rate-header-right-gutter: 39px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px var(--level-rate-header-right-gutter) 16px var(--level-rate-header-left-gutter);
  background: #437f9f;
  color: #ffffff;
}

.profile-rates-modal-scope .level-rates-modal-header span {
  grid-column: 1;
  justify-self: start;
  white-space: nowrap;
  font-size: 26px;
  font-weight: 800;
}

.profile-rates-modal-scope .level-rates-modal-header button {
  grid-column: 2;
  justify-self: end;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: transparent;
  cursor: pointer;
  position: relative;
}

.profile-rates-modal-scope .level-rates-modal-header button:hover {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.85);
}

.profile-rates-modal-scope .level-rates-modal-header button::before,
.profile-rates-modal-scope .level-rates-modal-header button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: center;
}

.profile-rates-modal-scope .level-rates-modal-header button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.profile-rates-modal-scope .level-rates-modal-header button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.profile-rates-modal-scope .level-rates-modal-content .help-body {
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
}

.profile-rates-modal-scope .level-rates-modal-content .rates-list {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  max-height: calc(92vh - 150px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  display: grid;
  gap: 8px;
}

.legacy-avatar-list {
  box-sizing: border-box;
  width: 100%;
  max-height: calc(92vh - 150px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 14px;
  padding-right: 4px;
}

.legacy-avatar-option {
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 12px;
  border: 1px solid rgba(95,134,163,0.24);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #edf3f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(0,0,0,0.06);
}

.legacy-avatar-option.is-current {
  border-color: #d4af37;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 0 2px rgba(212,175,55,0.18);
}

.legacy-avatar-frame {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid #414141;
  background: #4a90c2;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

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

.legacy-avatar-option figcaption {
  width: 100%;
  min-width: 0;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.profile-rates-modal-scope #profile-rates-modal .level-rates-modal-content:has(.nav-item:hover),
.profile-rates-modal-scope #profile-rates-modal .help-body:has(.nav-item:hover),
.profile-rates-modal-scope #profile-rates-list:has(.nav-item:hover) {
  overflow: visible;
}

.profile-source-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 16px;
  border-bottom: 2px solid #cfdbe6;
}

.profile-source-tabs[hidden] {
  display: none;
}

.profile-source-tab {
  appearance: none;
  background: none;
  border: 0;
  color: #5a6b78;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 7px 4px;
  position: relative;
  transition: color 0.2s ease;
}

.profile-source-tab:hover,
.profile-source-tab.active {
  color: #2b5873;
}

.profile-source-tab.active {
  cursor: default;
}

.profile-source-tab:focus-visible {
  color: #2b5873;
  outline: 2px solid rgba(67, 127, 158, 0.35);
  outline-offset: 4px;
}

.profile-source-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: transparent;
  transition: background 0.2s ease;
}

.profile-source-tab.active::after {
  background: #437f9e;
  height: 3px;
}

.profile-rates-modal-scope .profile-source-tabs {
  width: calc(100% - 6px);
  margin-right: 6px;
  margin-left: 0;
}

.profile-rates-modal-scope .rate-entry {
  display: grid;
  grid-template-columns:
    var(--profile-log-index-column)
    minmax(0, var(--profile-log-level-column))
    minmax(0, var(--profile-log-author-column))
    var(--profile-log-score-column)
    var(--profile-log-date-column)
    var(--profile-log-action-column);
  align-items: center;
  justify-content: space-between;
  justify-items: start;
  column-gap: var(--profile-log-gap);
  row-gap: 8px;
  padding: 10px 12px;
  border: 1px solid #c4d3df;
  border-radius: 8px;
  background: linear-gradient(#ffffff, #edf3f8);
  box-shadow: inset 0 1px 0 #ffffff;
}

.profile-rates-modal-scope .profile-play-entry {
  grid-template-columns:
    var(--profile-log-index-column)
    minmax(0, var(--profile-log-level-column))
    minmax(0, var(--profile-log-author-column))
    var(--profile-log-date-column);
}

.profile-rates-modal-scope .profile-rate-entry-legacy {
  grid-template-columns:
    var(--profile-log-index-column)
    minmax(0, var(--profile-log-level-column))
    minmax(0, var(--profile-log-author-column))
    var(--profile-log-score-column)
    calc(var(--profile-log-date-column) + 18px);
}

.profile-rates-modal-scope .profile-rate-entry-legacy time {
  width: calc(var(--profile-log-date-column) + 18px);
}

.profile-rates-modal-scope .profile-user-list-entry {
  grid-template-columns:
    60px
    minmax(0, 1fr)
    var(--profile-log-date-column)
    var(--profile-log-user-action-column);
  justify-content: stretch;
  column-gap: 10px;
}

.profile-rates-modal-scope .help-modal.profile-user-list-readonly .profile-user-list-entry {
  grid-template-columns:
    60px
    minmax(0, 1fr)
    var(--profile-log-date-column);
}

.profile-rates-modal-scope .rate-entry-number {
  color: #617589;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  justify-self: center;
}

.profile-rates-modal-scope .rate-entry .nav-item {
  justify-self: center;
  position: relative;
}

.profile-rates-modal-scope #profile-rates-list .nav-item:hover {
  z-index: 10002;
}

.profile-rates-modal-scope .rate-entry-spacer {
  width: 58px;
  height: 1px;
  display: block;
}

.profile-rates-modal-scope .rate-entry .tooltip {
  z-index: 10001;
}

.profile-rates-modal-scope .profile-rate-level,
.profile-rates-modal-scope .profile-rate-author,
.profile-rates-modal-scope .profile-list-user-copy {
  min-width: 0;
  max-width: 100%;
}

.profile-rates-modal-scope .profile-rate-level a,
.profile-rates-modal-scope .profile-rate-author a,
.profile-rates-modal-scope .profile-rate-level > span,
.profile-rates-modal-scope .profile-rate-author > span {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-rates-modal-scope .profile-rate-level a,
.profile-rates-modal-scope .profile-rate-level > span {
  color: var(--primary-dark);
}

.profile-rates-modal-scope .profile-rate-level a:hover,
.profile-rates-modal-scope .profile-rate-author a:hover,
.profile-rates-modal-scope .profile-list-username:hover,
.profile-rates-modal-scope .profile-rate-level a:focus-visible,
.profile-rates-modal-scope .profile-rate-author a:focus-visible,
.profile-rates-modal-scope .profile-list-username:focus-visible {
  text-decoration: underline;
}

.profile-rates-modal-scope .profile-list-user {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.profile-rates-modal-scope .profile-list-avatar {
  width: 44px;
  height: 44px;
  border: 2px solid var(--role-color, var(--primary-dark));
  border-radius: 50%;
  background: #4e98c7;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.profile-rates-modal-scope .profile-list-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-rates-modal-scope .profile-list-user-copy {
  min-width: 0;
}

.profile-rates-modal-scope .profile-list-username {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.profile-rates-modal-scope .profile-user-list-action {
  justify-self: start;
  width: 82px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: bold;
}

.profile-rates-modal-scope .profile-user-list-action:hover,
.profile-rates-modal-scope .profile-user-list-action:focus-visible {
  border-color: var(--button-hover-border);
  color: var(--button-hover-text);
}

.profile-rates-modal-scope .profile-user-list-action-spacer {
  width: 82px;
  height: 1px;
  display: block;
}

.profile-rates-modal-scope .help-modal.profile-user-list-readonly .profile-user-list-action-spacer {
  display: none;
}

.profile-rates-modal-scope .rate-entry strong {
  color: var(--primary-dark);
  width: 86px;
  text-align: left;
  justify-self: start;
  font-size: 18px;
}

.profile-rates-modal-scope .rate-entry .profile-rate-score {
  display: block;
  width: 86px;
  justify-self: start;
  align-self: center;
  text-align: left;
  margin: 0;
  padding: 0;
}

.profile-rates-modal-scope .rate-entry .profile-rate-score span {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: left;
  white-space: nowrap;
}

.profile-rates-modal-scope .rate-entry time {
  white-space: nowrap;
  color: #617589;
  font-size: 13px;
  text-align: left;
  justify-self: start;
  width: 152px;
}

.profile-rates-modal-scope .level-rates-modal-content .pagination {
  flex: 0 0 auto;
  margin: 10px 0 0;
}

@media (max-width: 760px) {
  .profile-rates-modal-scope .help-modal {
    align-items: stretch;
    padding: 10px;
  }

  .profile-rates-modal-scope .rate-entry {
    grid-template-columns: 42px minmax(0, 1fr) auto 44px;
    gap: 8px 10px;
  }

  .profile-rates-modal-scope .profile-rate-entry-legacy {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .profile-rates-modal-scope .profile-rate-entry-legacy time {
    width: auto;
  }

  .profile-rates-modal-scope .profile-rate-author,
  .profile-rates-modal-scope .rate-entry time {
    grid-column: 2 / span 2;
  }
}

.legacy-profile-page {
  --legacy-gold: #d4af37;
}

.legacy-profile-page .profile-body {
  align-items: stretch;
}

.legacy-profile-page .profile-main,
.legacy-profile-page .profile-sidebar {
  height: auto;
}

.legacy-profile-page .profile-description,
.legacy-profile-page .profile-stats {
  min-height: 0;
  max-height: none;
}

.legacy-profile-page .profile-description {
  height: 100%;
}

.legacy-profile-page .profile-stats {
  height: auto;
}

.legacy-profile-page .profile-main.has-description-toggle .profile-description,
.legacy-profile-page .profile-main.description-expanded .profile-description {
  height: 100%;
  min-height: 0;
}

.legacy-profile-page .profile-description {
  overflow: auto;
}

.legacy-profile-page .profile-stats {
  gap: 8px;
  padding: 14px;
  line-height: normal;
}

.legacy-profile-page .profile-stats div {
  padding-bottom: 4px;
}

.legacy-comment-marker:disabled {
  opacity: 1;
  cursor: default;
}

.legacy-comment-marker i {
  color: var(--legacy-gold);
  opacity: 1;
  font-size: 20px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.legacy-comment-marker svg {
  color: var(--legacy-gold);
  opacity: 1;
  font-size: 20px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.comment-btn.censor-legacy-profile-comment i {
  color: #000000;
  opacity: 0.7;
  font-size: 18px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.comment-btn.censor-legacy-profile-comment svg {
  color: #000000;
  opacity: 0.7;
  font-size: 18px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.comment-btn.censor-legacy-profile-comment.active-censor i,
.comment-btn.censor-legacy-profile-comment.active-censor svg {
  color: #cc0000;
  opacity: 0.88;
}

.comment-btn.censor-legacy-profile-comment.active-censor:disabled {
  opacity: 1;
}

.comment-btn.censor-legacy-profile-comment.active-censor:disabled i,
.comment-btn.censor-legacy-profile-comment.active-censor:disabled svg {
  color: #cc0000;
  opacity: 0.88;
  filter: none;
}

.comment-btn.censor-legacy-profile-comment:hover i,
.comment-btn.censor-legacy-profile-comment:hover svg,
.comment-btn.censor-legacy-profile-comment.active-censor:hover i,
.comment-btn.censor-legacy-profile-comment.active-censor:hover svg {
  color: #cc0000;
  opacity: 1;
  filter: none;
}

@media (max-width: 1100px) {
  .profile-music-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .profile-music-heading {
    justify-content: center;
    text-align: center;
  }

  .profile-music-title {
    flex: 0 1 auto;
    width: auto;
  }

  .profile-audio-player {
    grid-template-columns: repeat(3, 26px) minmax(120px, 1fr) max-content;
  }

  #music-time {
    min-width: 78px;
    font-size: 12px;
  }
}

@media (max-width: 1000px) {
  .profile-description .bbcode-youtube,
  .comment-body .bbcode-youtube,
  .reply-body .bbcode-youtube {
    max-width: min(100%, 420px);
  }
}

@media (max-width: 900px) {
  .page-wrapper:has(.profile-card) {
    width: min(100% - 24px, 1320px);
  }

  .box-inner.full-width:has(.profile-card) {
    align-items: stretch;
    padding-left: 14px;
    padding-right: 14px;
  }

  .box-inner.full-width:has(.profile-card) > .profile-card {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .box-inner.full-width:has(.profile-card) > .profile-card,
  .profile-content,
  .profile-comments,
  .profile-comment-form,
  .comment,
  .reply {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
  }

  .comment-body,
  .reply-body {
    width: 100%;
  }

  .comment-body .bbcode-youtube,
  .reply-body .bbcode-youtube {
    width: 100%;
    max-width: min(100%, 420px);
  }

  .profile-page-wrapper {
    width: min(100% - 24px, 1500px);
  }

  .profile-header,
  .profile-body,
  .profile-comments-section,
  .thread-header,
  .comment-header,
  .reply-header {
    min-width: 0;
  }

  .profile-music-bar {
    grid-template-columns: 1fr;
  }

  .profile-music-heading,
  .profile-music-controls {
    justify-content: center;
  }

  .profile-audio-player {
    grid-template-columns: repeat(3, 30px) minmax(0, 1fr) auto;
  }
}

@media (max-width: 640px) {
  .box-inner.full-width {
    padding: 14px;
  }

  .profile-card {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .profile-banner {
    height: 205px;
    margin-bottom: 12px;
  }

  .profile-identity {
    left: 50%;
    bottom: 16px;
    flex-direction: column;
    gap: 8px;
    transform: translateX(-50%);
    width: calc(100% - 28px);
  }

  .profile-avatar {
    width: 74px;
    height: 74px;
    font-size: 27px;
  }

  .profile-user-block {
    max-width: 100%;
    margin-left: 0;
    padding: 5px 10px;
  }

  .profile-name {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 22px;
    line-height: 1.15;
    text-align: center;
  }

  .profile-page-wrapper {
    width: calc(100% - 16px);
  }

  .profile-header {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .profile-identity {
    align-items: center;
    flex-direction: column;
  }

  .profile-actions,
  .comment-actions,
  .reply-actions,
  .thread-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .profile-stats,
  .profile-sidebar,
  .profile-main,
  .profile-description,
  .profile-comments-section {
    width: 100%;
    max-width: 100%;
  }

  .profile-main.has-description-toggle,
  .profile-main.description-expanded,
  .profile-main.has-description-toggle .profile-description,
  .profile-main.description-expanded .profile-description,
  .profile-description {
    height: auto;
    min-height: 0;
  }

  .profile-description,
  .profile-description.is-scrollable,
  .profile-description.is-expanded,
  .legacy-profile-page .profile-description {
    max-height: min(320px, 42dvh) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .comment-body,
  .reply-body {
    max-height: min(260px, 45dvh);
    overflow-y: auto;
    overflow-x: auto;
  }

  .profile-description-toggle,
  .profile-description-collapse {
    display: none !important;
  }

  .profile-comments-section {
    margin-top: 18px;
    padding-top: 16px;
  }

  .profile-comments-section h2 {
    font-size: 25px;
    text-align: left;
  }

  .profile-comment-form .comment-form-footer {
    align-items: center;
    justify-content: flex-end;
  }

  .profile-comment-form .comment-form-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 8px;
  }

  .profile-comment-form .char-count {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
  }

  .profile-comment-form .comment-form-actions .control-btn {
    width: auto;
    min-width: 74px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .profile-comment-form .preview-comment {
    flex: 0 0 auto;
  }

  .profile-comment-form .send-comment {
    flex: 0 0 auto;
  }

  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) {
    display: grid;
    grid-template-columns: 84px 136px;
    justify-content: center;
    column-gap: 10px;
    row-gap: 8px;
  }

  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) .char-count {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) .preview-comment {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) .send-comment {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .profile-comment-form .send-private-comment {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
  }

  .profile-music-bar {
    gap: 6px;
    padding: 10px;
  }

  .profile-music-heading {
    align-items: center;
    gap: 7px;
    line-height: 1.2;
  }

  .profile-music-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 2px;
    line-height: 1.4;
  }

  .profile-music-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-music-controls button,
  #music-youtube-btn {
    width: 100%;
  }

  .profile-audio-player {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    max-width: 100%;
  }

  #music-progress {
    order: 2;
    flex: 0 1 320px;
    width: min(100%, 320px);
    max-width: 100%;
  }

  #music-time {
    order: 3;
    flex: 0 0 100%;
    width: auto;
    min-width: 0;
    text-align: center;
  }

  .comment-header,
  .reply-header,
  .thread-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .comment-header,
  .reply-header {
    align-items: stretch;
  }

  .comment-actions,
  .reply-actions {
    order: 1;
    align-self: stretch;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
  }

  .pinned-comment > .comment-header .comment-actions,
  .deleted-comment > .comment-header .comment-actions,
  .private-comment > .comment-header .comment-actions,
  .locked-comment > .comment-header .comment-actions,
  .deleted-comment > .reply-header .reply-actions,
  .locked-comment > .reply-header .reply-actions {
    padding-top: 15px;
  }

  .comment-user,
  .reply-user {
    order: 2;
    align-self: flex-start;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    text-align: left;
  }

  .comment-username,
  .reply-username {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .comment-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .profile-comment-footer-actions {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .profile-comment-reactions {
    flex: 0 0 auto;
  }

  .comment-date {
    align-self: flex-end;
    margin-left: 0;
    text-align: right;
  }

  .reply-footer {
    align-self: flex-end;
    width: 100%;
    text-align: right;
  }

  .comment-meta,
  .reply-meta {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .profile-rates-modal-scope .level-rates-modal-header span {
    min-width: 0;
    font-size: 21px;
    white-space: normal;
  }

  .profile-rates-modal-scope .rate-entry,
  .profile-rates-modal-scope .profile-rate-entry-legacy {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
  }

  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) {
    row-gap: 5px;
  }

  .profile-rates-modal-scope .profile-rate-author,
  .profile-rates-modal-scope .rate-entry time,
  .profile-rates-modal-scope .rate-entry strong,
  .profile-rates-modal-scope .rate-entry .profile-rate-score {
    grid-column: 1 / -1;
    width: auto;
  }

  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) .nav-item {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) .profile-rate-score {
    grid-row: 3;
    justify-self: start;
    align-self: center;
  }

  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) .rate-entry-number,
  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) .profile-rate-level {
    grid-row: auto;
  }

  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) .rate-entry-number,
  .profile-rates-modal-scope .profile-play-entry .rate-entry-number,
  .profile-rates-modal-scope .profile-rate-entry-legacy .rate-entry-number {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }

  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) .profile-rate-level,
  .profile-rates-modal-scope .profile-play-entry .profile-rate-level,
  .profile-rates-modal-scope .profile-rate-entry-legacy .profile-rate-level {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) .profile-rate-author {
    grid-row: 4;
  }

  .profile-rates-modal-scope .profile-rate-entry:not(.profile-rate-entry-legacy) time {
    grid-row: 5;
  }

  .profile-rates-modal-scope .profile-play-entry .profile-rate-author,
  .profile-rates-modal-scope .profile-rate-entry-legacy .profile-rate-author {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .profile-rates-modal-scope .profile-play-entry time,
  .profile-rates-modal-scope .profile-rate-entry-legacy time {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .profile-rates-modal-scope .profile-rate-entry-legacy .profile-rate-score {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  .profile-rates-modal-scope .profile-rate-entry .rate-entry-spacer {
    display: none;
  }

  .profile-rates-modal-scope .profile-user-list-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 10px;
    row-gap: 6px;
  }

  .profile-rates-modal-scope .profile-user-list-entry .rate-entry-number,
  .profile-rates-modal-scope .profile-user-list-entry .profile-list-user {
    grid-row: auto;
  }

  .profile-rates-modal-scope .profile-user-list-entry .rate-entry-number {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    padding-top: 0;
    font-size: 19px;
    line-height: 1;
    text-align: left;
  }

  .profile-rates-modal-scope .profile-user-list-entry .profile-list-user {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    align-items: center;
  }

  .profile-rates-modal-scope .profile-user-list-entry time {
    grid-column: 1 / -1;
    grid-row: 3;
    width: auto;
    white-space: normal;
    margin-top: -2px;
  }

  .profile-rates-modal-scope .profile-user-list-action {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: auto;
    min-width: 92px;
    max-width: 100%;
    white-space: nowrap;
  }

  .profile-rates-modal-scope .profile-user-list-action-spacer {
    display: none;
  }
}

@media (max-width: 420px) {
  .profile-rates-modal-scope .help-modal {
    padding: 8px;
  }

  .profile-rates-modal-scope .help-modal-content.level-rates-modal-content,
  .profile-rates-modal-scope #profile-plays-modal .level-rates-modal-content,
  .profile-rates-modal-scope .help-modal-content.profile-user-list-modal-content,
  .profile-infractions-modal-content {
    width: min(100%, calc(100dvw - 16px));
  }

  .profile-rates-modal-scope .level-rates-modal-header {
    --level-rate-header-left-gutter: 14px;
    --level-rate-header-right-gutter: 14px;
    gap: 10px;
    padding: 14px;
  }

  .profile-rates-modal-scope .level-rates-modal-header span {
    font-size: 23px;
    line-height: 1.15;
  }

  .profile-rates-modal-scope .level-rates-modal-content .help-body {
    padding: 14px 12px;
  }

  .profile-source-tabs {
    gap: 18px;
    margin-bottom: 14px;
  }

  .profile-source-tab {
    font-size: 15px;
  }

  .profile-rates-modal-scope .rate-entry {
    padding: 10px 12px;
  }

  .profile-rates-modal-scope .profile-list-user {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
  }

  .profile-rates-modal-scope .profile-user-list-entry .rate-entry-number {
    padding-top: 0;
  }

  .profile-rates-modal-scope .profile-list-avatar {
    width: 42px;
    height: 42px;
  }

  .profile-infraction-list {
    max-height: calc(100dvh - 172px);
    padding-right: 3px;
  }

  .profile-infraction-card {
    padding: 12px;
  }

  .profile-infraction-card-header h3 {
    font-size: 20px;
  }

  .profile-infraction-details div {
    padding: 8px;
  }
}

@media (min-width: 480px) and (max-width: 640px) {
  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) {
    display: flex;
    justify-content: flex-end;
    width: auto;
    gap: 10px;
  }

  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) .char-count,
  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) .preview-comment,
  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) .send-comment,
  .profile-comment-form .comment-form-actions:has(.send-private-comment[style*="inline-flex"]) .send-private-comment {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
  }
}

@media (max-width: 1280px) {
  .moderation-modal,
  .profile-rates-modal-scope .help-modal {
    align-items: center !important;
    justify-content: center !important;
    width: 100dvw !important;
    padding: 10px;
  }

  .moderation-modal-content,
  .profile-rates-modal-scope .help-modal-content {
    max-height: calc(100dvh - 20px);
  }
}