.profile-library {
  margin-top: 1.35rem;
}

.profile-library-tabs {
  --library-indicator-x: .3rem;
  --library-indicator-width: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.profile-library-indicator {
  position: absolute;
  z-index: 0;
  inset: .3rem auto .3rem 0;
  width: var(--library-indicator-width);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 .38rem 1rem color-mix(in srgb, var(--primary) 28%, transparent);
  transform: translateX(var(--library-indicator-x));
  transition: transform .5s cubic-bezier(.18,.9,.2,1), width .42s cubic-bezier(.18,.82,.2,1), filter .25s ease;
  pointer-events: none;
}

.profile-library-indicator.is-moving {
  filter: saturate(1.06) brightness(1.025);
}

.profile-library-tabs button {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .28s ease, text-shadow .28s ease;
}

.profile-library-tabs button.is-active {
  color: #fff;
  text-shadow: 0 1px 8px rgba(255,255,255,.22);
}

.profile-library-panel {
  gap: 1rem;
}

.profile-heading h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}

.hero-surface > .section-title:has(> .profile-heading) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.hero-surface > .section-title:has(> .profile-heading) .profile-heading,
.profile-identity-copy { min-width: 0; }

.profile-identity-copy { width: 100%; }
.profile-identity-copy > h1 { max-width: 100%; overflow-wrap: anywhere; }
.profile-identity-copy > .muted { overflow-wrap: anywhere; }
.profile-bio { max-width: 72ch; margin: .55rem 0 0; color: var(--text-muted); line-height: 1.65; overflow-wrap: anywhere; word-break: break-word; }
.profile-bio-toggle { display: none; }

.hero-surface > .section-title:has(> .profile-heading) > .quick-actions {
  width: max-content;
  max-width: 14rem;
  flex: 0 0 auto;
  align-content: start;
  justify-content: flex-end;
}

.hero-surface > .section-title:has(> .profile-heading) > .quick-actions .btn { max-width: 100%; }

@media (max-width: 700px) {
  .hero-surface > .section-title:has(> .profile-heading) { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .hero-surface > .section-title:has(> .profile-heading) .profile-heading { width: 100%; flex-direction: row; align-items: flex-start; }
  .hero-surface > .section-title:has(> .profile-heading) .profile-avatar { width: 3.75rem; height: 3.75rem; }
  .profile-identity-copy > h1 { font-size: clamp(1.55rem, 7.5vw, 2rem); line-height: 1.16; }
  .profile-bio { position: relative; max-height: 4.95em; overflow: hidden; transition: max-height .38s cubic-bezier(.2,.8,.2,1); }
  .profile-bio.is-expanded { max-height: var(--profile-bio-height, 20rem); }
  .profile-bio-toggle { align-items: center; gap: .28rem; width: max-content; margin-top: .4rem; padding: .3rem .48rem; border: 0; border-radius: .55rem; color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); font-size: .72rem; font-weight: 850; cursor: pointer; }
  .profile-bio-toggle:not([hidden]) { display: inline-flex; }
  .profile-bio-toggle svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s ease; }
  .profile-bio-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .hero-surface > .section-title:has(> .profile-heading) > .quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: none; margin: 0; }
  .hero-surface > .section-title:has(> .profile-heading) > .quick-actions .btn { width: 100%; min-width: 0; font-size: .78rem; white-space: nowrap; }
}

@media (max-width: 420px) {
  .hero-surface > .section-title:has(> .profile-heading) .profile-heading { gap: .75rem; }
  .hero-surface > .section-title:has(> .profile-heading) .profile-avatar { width: 3.25rem; height: 3.25rem; }
  .hero-surface > .section-title:has(> .profile-heading) > .quick-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .profile-bio, .profile-bio-toggle svg { transition: none; } }

.profile-origin-badge {
  width: 2rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  box-shadow: 0 .32rem .8rem color-mix(in srgb, #10182f 14%, transparent);
  vertical-align: middle;
}

.profile-origin-badge.is-world {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.profile-origin-badge svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(1.08);
}

.profile-recent-topics {
  padding-top: 2rem;
}

.profile-recent-topics-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.profile-recent-topics-head h2 {
  margin: .2rem 0 0;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  letter-spacing: -.035em;
}

.profile-recent-topics-head p {
  margin: .35rem 0 0;
  color: var(--text-muted);
  font-size: .9rem;
}

.profile-recent-topics-count {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  color: var(--primary);
  background: var(--surface-strong);
  font-size: .75rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.profile-recent-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.profile-recent-topic-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 15.5rem;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  color: var(--text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 5%, var(--surface-strong)), var(--surface-strong) 48%);
  box-shadow: 0 .65rem 1.8rem color-mix(in srgb, #10182f 7%, transparent);
  opacity: 0;
  transform: translateY(15px) scale(.985);
  animation: profile-topic-enter .48s cubic-bezier(.2,.82,.2,1) forwards;
  animation-delay: calc(var(--topic-index) * 45ms);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.profile-recent-topic-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--primary), var(--primary-2));
  opacity: .72;
  transform: scaleY(.25);
  transform-origin: bottom;
  transition: transform .25s ease, opacity .2s ease;
}

.profile-recent-topic-link {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

.profile-recent-topic-card > :not(.profile-recent-topic-link) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.profile-recent-topic-card:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--primary) 13%, transparent);
  transform: translateY(-5px);
}

.profile-recent-topic-card:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.profile-recent-topic-top,
.profile-recent-topic-footer,
.profile-recent-topic-flags {
  display: flex;
  align-items: center;
}

.profile-recent-topic-top {
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .9rem;
}

.profile-recent-topic-category {
  min-width: 0;
  overflow: hidden;
  padding: .32rem .55rem;
  border-radius: .58rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: .67rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-recent-topic-arrow {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: .65rem;
  color: var(--text-muted);
  background: var(--surface-strong);
  transition: color .2s ease, transform .2s ease;
}

.profile-recent-topic-arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-recent-topic-card:hover .profile-recent-topic-arrow {
  color: var(--primary);
  transform: rotate(5deg) translate(1px,-1px);
}

.profile-recent-topic-card > strong {
  display: block;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-recent-topic-excerpt {
  display: -webkit-box;
  min-height: 3.9em;
  margin-top: .5rem;
  overflow: hidden;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 3.9em;
  transition: max-height .38s cubic-bezier(.2,.82,.2,1);
}

.profile-recent-topic-excerpt.is-expanded {
  display: block;
  max-height: var(--excerpt-expanded-height, 30rem);
  -webkit-line-clamp: unset;
}

.profile-recent-topic-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .45rem;
  padding: .28rem .48rem;
  border: 0;
  border-radius: .48rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  font-size: .66rem;
  font-weight: 850;
  cursor: pointer;
  pointer-events: auto !important;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.profile-recent-topic-more[hidden] { display: none; }
.profile-recent-topic-more:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); transform: translateY(-1px); }
.profile-recent-topic-more svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.profile-recent-topic-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.profile-recent-topic-flags {
  min-height: 1.65rem;
  gap: .35rem;
  margin-top: auto;
  padding-top: .8rem;
}

.profile-recent-topic-flags span {
  max-width: 100%;
  overflow: hidden;
  padding: .22rem .42rem;
  border-radius: .48rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  font-size: .62rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-recent-topic-flags .is-solved { color: #168859; background: color-mix(in srgb, #1aad6b 11%, transparent); }
.profile-recent-topic-flags .is-locked { color: #d6465f; background: color-mix(in srgb, #e34d65 10%, transparent); }

.profile-recent-topic-footer {
  justify-content: space-between;
  gap: .65rem;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .67rem;
  white-space: nowrap;
}

.profile-recent-topic-footer span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-recent-topic-footer b { color: var(--text); }

.profile-recent-topics-empty {
  padding: 2rem;
  border: 1px dashed var(--border);
  border-radius: 1rem;
  color: var(--text-muted);
  background: var(--surface);
  text-align: center;
}

@keyframes profile-topic-enter {
  to { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .profile-recent-topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .profile-recent-topics-head { align-items: flex-start; flex-direction: column; }
  .profile-recent-topics-grid { grid-template-columns: 1fr; }
  .profile-recent-topic-card { min-height: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-recent-topic-card { opacity: 1; transform: none; animation: none; transition: none; }
  .profile-recent-topic-arrow { transition: none; }
  .profile-recent-topic-excerpt,.profile-recent-topic-more,.profile-recent-topic-more svg { transition: none; }
}

#profile-settings-dialog { z-index: 310; padding: 1rem; background: rgba(5,8,20,.58); backdrop-filter: blur(12px); }
.profile-settings-shell { width: min(100%, 760px); max-height: min(88vh, 820px); overflow: hidden; border: 1px solid var(--border); border-radius: 1.5rem; color: var(--text); background: var(--surface-strong); box-shadow: 0 2rem 6rem rgba(6,10,28,.3); transform: translateY(18px) scale(.97); transition: transform .3s cubic-bezier(.2,.85,.2,1); }
#profile-settings-dialog.is-visible .profile-settings-shell { transform: none; }
.profile-settings-shell-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--border); background: linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface-strong)),var(--surface-strong)); }
.profile-settings-shell-head small,.profile-settings-detail header small { color: var(--primary); font-size: .66rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.profile-settings-shell-head h2 { margin: .15rem 0 0; font-size: 1.55rem; letter-spacing: -.035em; }
.profile-settings-shell-head p { margin: .3rem 0 0; color: var(--text-muted); font-size: .8rem; }
.profile-settings-shell-head>button,.profile-settings-detail header>button { display: grid; width: 2.45rem; height: 2.45rem; flex: 0 0 2.45rem; place-items: center; border: 1px solid var(--border); border-radius: .8rem; color: var(--text-muted); background: var(--surface-muted); cursor: pointer; transition: color .18s ease, background .18s ease, transform .25s ease; }
.profile-settings-shell-head>button:hover { color: var(--text); transform: rotate(7deg); }
.profile-settings-shell svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.profile-settings-stage { position: relative; min-height: min(64vh, 600px); overflow: hidden; }
.profile-settings-home,.profile-settings-detail-layer { position: absolute; inset: 0; overflow-y: auto; padding: 1rem 1.15rem 1.3rem; scrollbar-width: thin; transition: opacity .2s ease, visibility 0s linear .2s; }
.profile-settings-home { display: grid; align-content: start; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.profile-settings-detail-layer { opacity: 0; visibility: hidden; pointer-events: none; }
.profile-settings-shell.is-detail .profile-settings-home { opacity: 0; visibility: hidden; pointer-events: none; }
.profile-settings-shell.is-detail .profile-settings-detail-layer { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: .06s,0s; }
.profile-settings-group { min-width: 0; padding: .7rem; border: 1px solid var(--border); border-radius: 1rem; background: color-mix(in srgb,var(--surface-muted) 58%,var(--surface-strong)); }
.profile-settings-group h3 { display: flex; align-items: center; gap: .45rem; margin: .15rem .25rem .65rem; font-size: .78rem; }
.profile-settings-group h3 svg { color: var(--primary); }
.profile-settings-item { display: grid; grid-template-columns: 2.15rem minmax(0,1fr) auto; align-items: center; gap: .55rem; width: 100%; padding: .57rem .5rem; border: 0; border-radius: .75rem; color: var(--text); background: transparent; text-align: left; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.profile-settings-item:hover,.profile-settings-item:focus-visible { background: color-mix(in srgb,var(--primary) 10%,var(--surface)); transform: translateX(3px); outline: none; }
.profile-settings-item-icon { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: .68rem; color: var(--primary); background: color-mix(in srgb,var(--primary) 9%,var(--surface-strong)); }
.profile-settings-item>span:nth-child(2) { min-width: 0; display: flex; align-items: center; gap: .35rem; }
.profile-settings-item strong { overflow: hidden; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-settings-item>i { display: grid; color: var(--text-muted); transition: transform .18s ease; }
.profile-settings-item:hover>i { color: var(--primary); transform: translateX(2px); }
.profile-settings-premium { display: inline-grid!important; width: 1rem; height: 1rem; flex: 0 0 1rem; color: #eab308; filter: drop-shadow(0 2px 4px rgba(234,179,8,.25)); }
.profile-settings-premium svg { width: 1rem; height: 1rem; fill: #facc15; stroke: #ca8a04; }
.profile-settings-detail { min-height: 100%; animation: profile-settings-panel-in .24s ease-out both; }
.profile-settings-detail[hidden] { display: none; }
.profile-settings-detail header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.profile-settings-detail header h3 { margin: .1rem 0 0; font-size: 1.2rem; }
.profile-settings-detail header>button:hover { color: var(--primary); transform: translateX(-2px); }
.profile-settings-detail-body { width: min(100%, 560px); margin: 0 auto; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: color-mix(in srgb,var(--surface-muted) 45%,var(--surface-strong)); }
.profile-settings-detail-form { display: grid; gap: .85rem; }
.profile-settings-detail-form label { display: grid; gap: .4rem; font-size: .76rem; font-weight: 800; }
.profile-settings-detail-form input,.profile-settings-detail-form textarea { border-radius: .8rem; font-size: .86rem; }
.profile-settings-detail-form .btn { justify-self: end; min-width: 8.5rem; justify-content: center; }
.profile-settings-avatar-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; padding: .25rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface-muted); }
.profile-settings-avatar-modes button { padding: .52rem; border: 0; border-radius: .6rem; color: var(--text-muted); background: transparent; font-size: .73rem; font-weight: 800; cursor: pointer; }
.profile-settings-avatar-modes button.is-active { color: #fff; background: linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow: 0 .4rem 1rem color-mix(in srgb,var(--primary) 20%,transparent); }
.profile-settings-locked,.profile-settings-coming-soon { display: grid; justify-items: center; min-height: 13rem; place-content: center; gap: .55rem; text-align: center; }
.profile-settings-locked>.profile-settings-premium { width: 2.6rem!important; height: 2.6rem; }
.profile-settings-locked>.profile-settings-premium svg { width: 2.6rem; height: 2.6rem; }
.profile-settings-locked strong { font-size: 1.05rem; }
.profile-settings-locked p,.profile-settings-detail-copy { color: var(--text-muted); font-size: .8rem; }
.profile-settings-coming-soon>svg { width: 2.7rem; height: 2.7rem; color: var(--primary); }
.profile-settings-coming-soon span { padding: .3rem .6rem; border-radius: 99px; color: var(--primary); background: color-mix(in srgb,var(--primary) 10%,transparent); font-size: .68rem; font-weight: 850; }
.profile-settings-switch-row { display: flex!important; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface-strong); cursor: pointer; }
.profile-settings-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.profile-settings-switch-row>i { position: relative; width: 2.65rem; height: 1.45rem; flex: 0 0 2.65rem; border-radius: 99px; background: color-mix(in srgb,var(--text-muted) 25%,var(--surface-muted)); transition: background .25s ease; }
.profile-settings-switch-row>i::after { content: ""; position: absolute; top: .18rem; left: .18rem; width: 1.09rem; height: 1.09rem; border-radius: 50%; background: #fff; box-shadow: 0 .15rem .45rem rgba(0,0,0,.2); transition: transform .28s cubic-bezier(.2,.85,.2,1); }
.profile-settings-switch-row input:checked+i { background: linear-gradient(135deg,var(--primary),var(--primary-2)); }
.profile-settings-switch-row input:checked+i::after { transform: translateX(1.2rem); }
@keyframes profile-settings-panel-in { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: none; } }
html[data-theme="dark"] .profile-settings-shell { box-shadow: 0 2.2rem 7rem rgba(0,0,0,.62); }
@media(max-width:800px){.profile-settings-home{grid-template-columns:1fr 1fr}.profile-settings-group:last-child{grid-column:1/-1}.profile-settings-stage{min-height:68vh}}
@media(max-width:560px){#profile-settings-dialog{align-items:end;padding:0}.profile-settings-shell{width:100%;max-height:92dvh;border-radius:1.35rem 1.35rem 0 0}.profile-settings-shell-head{padding:1rem}.profile-settings-shell-head p{display:none}.profile-settings-home{grid-template-columns:1fr;padding:.75rem}.profile-settings-group:last-child{grid-column:auto}.profile-settings-stage{min-height:75dvh}.profile-settings-detail-layer{padding:.8rem}.profile-settings-detail-body{padding:.8rem}.profile-settings-detail-form .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.profile-settings-shell,.profile-settings-home,.profile-settings-detail-layer,.profile-settings-detail,.profile-settings-item,.profile-settings-switch-row>i,.profile-settings-switch-row>i::after{transition:none;animation:none}}

.chat-nav-button .chat-unread-badge {
  position: absolute;
  z-index: 4;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--surface-strong);
  border-radius: 99px;
  color: #fff;
  background: #ef4444;
  box-shadow: 0 4px 11px rgba(239,68,68,.35);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.chat-nav-button .chat-unread-badge[hidden] { display: none; }
.chat-tabs button[data-chat-tab="private"] { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.chat-private-tab-badge { display: inline-grid; min-width: 1.05rem; height: 1.05rem; place-items: center; padding: 0 .28rem; border-radius: 99px; color: #fff; background: #ef4444; box-shadow: 0 3px 8px rgba(239,68,68,.25); font-size: .58rem; font-style: normal; font-weight: 900; line-height: 1; }
.chat-private-tab-badge[hidden] { display: none; }
.chat-tabs button.is-active .chat-private-tab-badge { color: var(--chat-purple); background: #fff; box-shadow: 0 3px 9px rgba(17,24,39,.18); }

#profile-settings-dialog,
.profile-settings-shell,
.profile-settings-stage,
.profile-settings-home,
.profile-settings-detail-layer,
.profile-settings-detail,
.profile-settings-detail-body {
  max-width: 100%;
  overflow-x: hidden;
}

.profile-settings-detail-body,
.profile-settings-detail-form,
.profile-settings-detail-form label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-settings-home::-webkit-scrollbar:horizontal,
.profile-settings-detail-layer::-webkit-scrollbar:horizontal {
  height: 0;
  display: none;
}

body:has(#profile-settings-dialog.is-visible) { overflow-x: hidden !important; }

.moderation-button { transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.moderation-button.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--primary),var(--primary-2)); box-shadow: 0 .45rem 1.2rem color-mix(in srgb,var(--primary) 24%,transparent); }
.moderation-button.is-interaction-pending { min-width: 3.2rem; }

.profile-settings-field-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .55rem;
  padding: .55rem .7rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: .7rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.45;
}

.profile-settings-field-hint strong { flex: 0 0 auto; color: var(--primary); font-variant-numeric: tabular-nums; }