/* Paid cosmetics and earned nameplates are distinct; neither grants role or permissions. */
/* Decorative motion is local to equipped cosmetics; identity text stays still. */
body.public-profile-page:not(.auth-page-body) .main-content {
  padding-inline: var(--bbs-content-gutter, 24px) !important;
}
body.public-profile-page:not(.auth-page-body) .settings-shell,
body.public-profile-page:not(.auth-page-body) .public-profile-shell {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: 0;
  justify-self: stretch;
}
.public-profile-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.public-profile-shell > :not(.profile-ambience) {
  position: relative;
  z-index: 1;
}
.profile-ambience {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--ui-accent);
}
.public-profile-shell[data-profile-card]:not([data-profile-card='']) > .profile-ambience {
  display: block;
}
.profile-ambience::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 300px;
  right: -100px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--profile-glow), transparent 70%);
  animation: profile-aura-drift 14s ease-in-out infinite alternate;
}
.profile-constellation {
  position: absolute;
  width: min(68%, 560px);
  right: -10px;
  top: 16px;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.14;
}
.profile-constellation circle {
  fill: currentColor;
}
.public-profile-shell[data-profile-card='card_blueprint'] .profile-constellation path {
  stroke-dasharray: 6 7;
  animation: profile-circuit-flow 32s linear infinite;
}
.public-profile-shell[data-profile-card='card_twilight'] .profile-constellation {
  opacity: 0.08;
}
.profile-star {
  position: absolute;
  width: 14px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: profile-star-breathe 5s ease-in-out infinite alternate;
  opacity: 0.3;
}
.star-one {
  top: 42px;
  right: 12%;
}
.star-two {
  top: 140px;
  right: 30%;
  width: 8px;
  height: 8px;
  animation-delay: -2s;
}
.star-three {
  top: 215px;
  right: 7%;
  animation-delay: -3s;
}
.star-four {
  bottom: 45px;
  right: 18%;
  width: 9px;
  height: 9px;
  animation-delay: -1s;
}
:is(.public-profile-avatar-wrap, .discussion-avatar-frame) {
  position: relative;
  flex-shrink: 0;
  --frame-glint: #568e8e;
}
.discussion-avatar-frame {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: visible;
  border-radius: 50%;
}
.discussion-avatar-frame .discussion-post-avatar {
  display: block;
}
.discussion-author-link-avatar,
.discussion-comment-author-link {
  overflow: visible;
}
:is(.public-profile-avatar-wrap, .discussion-avatar-frame)[data-frame='frame_aurora'] {
  --frame-glint: #a179c7;
}
:is(.public-profile-avatar-wrap, .discussion-avatar-frame)[data-frame]:not(
    [data-frame='']
  )::before {
  content: '';
  position: absolute;
  inset: -5px;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(
    from 20deg,
    transparent 5%,
    var(--frame-glint) 23%,
    transparent 38%,
    #d3b56f 53%,
    transparent 70%,
    var(--frame-glint) 85%,
    transparent
  );
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: profile-orbit 20s linear infinite;
  pointer-events: none;
}
:is(.public-profile-avatar-wrap, .discussion-avatar-frame)[data-frame]:not([data-frame=''])::after {
  content: '✦';
  position: absolute;
  right: -7px;
  top: 12px;
  color: var(--frame-glint);
  font: 24px/1 serif;
  text-shadow: 0 0 12px var(--frame-glint);
  animation: profile-star-breathe 4s ease-in-out infinite alternate;
  pointer-events: none;
}
body.theme-dark
  :is(.public-profile-avatar-wrap, .discussion-avatar-frame)[data-frame='frame_orbit'] {
  --frame-glint: #8ddbd0;
}
body.theme-dark
  :is(.public-profile-avatar-wrap, .discussion-avatar-frame)[data-frame='frame_aurora'] {
  --frame-glint: #d0aff5;
}
/* The avatar link hides its text label; keep only the decorative wrapper visible. */
.discussion-author-link-avatar .discussion-avatar-frame {
  display: inline-flex;
  border-radius: 50%;
  line-height: 0;
}
.discussion-avatar-frame[data-frame]:not([data-frame=''])::before {
  inset: -4px;
  padding: 1.5px;
}
.discussion-avatar-frame[data-frame]:not([data-frame=''])::after {
  top: 0;
  right: -5px;
  font-size: 12px;
  text-shadow: 0 0 6px var(--frame-glint);
}
/* Aurora is a silk-like light curtain with a star crown, not a recoloured orbit. */
:is(.public-profile-avatar-wrap, .discussion-avatar-frame)[data-frame='frame_aurora']:not(
    [data-frame='']
  )::before {
  inset: -8px;
  padding: 6px;
  border-radius: 46% 54% 49% 51%;
  background: linear-gradient(135deg, #69d8cc, #a994e8 28%, #f2bedf 48%, #99e8e0 65%, #ac90e3);
  background-size: 260% 260%;
  opacity: 0.8;
  animation: aurora-curtain 9s ease-in-out infinite alternate;
}
:is(.public-profile-avatar-wrap, .discussion-avatar-frame)[data-frame='frame_aurora']:not(
    [data-frame='']
  )::after {
  content: '';
  inset: -17%;
  background: url('/assets/cosmetics/aurora-crown.svg') center / contain no-repeat;
  animation: aurora-starlight 6s ease-in-out infinite alternate;
  text-shadow: none;
}
.discussion-author-link-avatar
  .discussion-avatar-frame[data-frame='frame_aurora']:not([data-frame=''])::before {
  inset: -5px;
  padding: 3px;
}
@keyframes aurora-curtain {
  from {
    background-position: 0% 30%;
    border-radius: 46% 54% 49% 51%;
  }
  to {
    background-position: 100% 70%;
    border-radius: 53% 47% 51% 49%;
  }
}
@keyframes aurora-starlight {
  from {
    opacity: 0.72;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1.02);
  }
}
.cosmetic-nameplate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, #ffffff38 48%, transparent 66%);
  background-size: 300% 100%;
  animation: profile-plate-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
.cosmetic-nameplate .nameplate-crest {
  box-shadow:
    inset 0 0 8px #ffffff18,
    0 0 8px #b9a1dc20;
}
@keyframes profile-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes profile-star-breathe {
  from {
    opacity: 0.22;
    transform: scale(0.85);
  }
  to {
    opacity: 0.64;
    transform: scale(1.12);
  }
}
@keyframes profile-aura-drift {
  to {
    transform: translate(-40px, 30px) scale(1.12);
  }
}
@keyframes profile-circuit-flow {
  to {
    stroke-dashoffset: -104;
  }
}
@keyframes profile-plate-sheen {
  0%,
  65% {
    background-position: 100% 0;
    opacity: 0;
  }
  75% {
    opacity: 0.55;
  }
  100% {
    background-position: 0 0;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .profile-ambience::before,
  .profile-constellation path,
  .profile-star,
  .public-profile-avatar-wrap::before,
  .public-profile-avatar-wrap::after,
  .discussion-avatar-frame::before,
  .discussion-avatar-frame::after,
  .cosmetic-nameplate::after {
    animation: none !important;
  }
}
[data-avatar-frame='frame_orbit'] {
  border: 3px solid #358d96 !important;
  outline: 2px solid #d6b366;
  outline-offset: 3px;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(55, 143, 152, 0.12);
}
[data-avatar-frame='frame_aurora'] {
  border: 3px solid #ac8cd8 !important;
  outline: 1px solid #d6c6ef;
  outline-offset: 3px;
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(141, 109, 193, 0.14);
}
.cosmetic-nameplate {
  --plate-ink: #205460;
  --plate-bg: #e4f1ee;
  --plate-edge: #7aa99f;
  --plate-accent: #956b28;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  position: relative;
  vertical-align: middle;
  margin: 0.25em 0.35em 0.25em 0;
  padding: 0.32em 0.8em 0.32em 0.38em;
  border: 1px solid var(--plate-edge);
  border-radius: 10px 18px 18px 10px;
  color: var(--plate-ink);
  background-color: var(--plate-bg);
  background-image: linear-gradient(115deg, #ffffff25, transparent 65%);
  box-shadow:
    inset 0 0 0 3px #ffffff20,
    0 2px 5px #1026260a;
  font: 600 0.84rem/1.35 var(--font-zh-ui, sans-serif);
  letter-spacing: 0.04em;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.cosmetic-nameplate .nameplate-crest {
  flex: 0 0 auto;
  width: 2.1em;
  height: 2.1em;
  padding: 2px;
  color: var(--plate-accent);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  border-radius: 50%;
  border: 1px solid var(--plate-edge);
  filter: none !important;
}
body .cosmetic-nameplate[class] .nameplate-label {
  color: var(--plate-ink) !important;
  font: inherit;
}
.cosmetic-nameplate small {
  font: 500 0.68em/1.3 var(--font-zh-ui, sans-serif);
  letter-spacing: 0.08em;
  color: var(--plate-ink);
  border-left: 1px solid var(--plate-edge);
  padding-left: 0.7em;
  white-space: nowrap;
}
body .cosmetic-nameplate[class] small {
  color: var(--plate-ink) !important;
}
.cosmetic-nameplate.plate_observer {
  --plate-bg: #eee9f7;
  --plate-ink: #55416f;
  --plate-edge: #b1a0ca;
  --plate-accent: #716095;
}
.cosmetic-nameplate.plate_fishbone_master {
  --plate-bg: #faf0d8;
  --plate-ink: #6d491a;
  --plate-edge: #c7a258;
  --plate-accent: #98621b;
}
.cosmetic-nameplate.plate_circuit_master {
  --plate-bg: #e4f1f2;
  --plate-ink: #174e5d;
  --plate-edge: #87abb0;
  --plate-accent: #8a692f;
  background-image: linear-gradient(115deg, #ffffff65, transparent 65%, #dbbb6f18);
}
body.theme-dark .cosmetic-nameplate {
  --plate-bg: #193d42;
  --plate-ink: #c6ece1;
  --plate-edge: #51887e;
  --plate-accent: #e7c880;
}
body.theme-dark .cosmetic-nameplate.plate_observer {
  --plate-bg: #322c46;
  --plate-ink: #e4d6fb;
  --plate-edge: #8975a9;
  --plate-accent: #c9b6eb;
}
body.theme-dark .cosmetic-nameplate.plate_fishbone_master {
  --plate-bg: #3c301c;
  --plate-ink: #f5dfae;
  --plate-edge: #a1854a;
  --plate-accent: #ecc779;
}
body.theme-dark .cosmetic-nameplate.plate_circuit_master {
  --plate-bg: #183943;
  --plate-ink: #d0ecee;
  --plate-edge: #638e96;
  --plate-accent: #e2c581;
  background-image: linear-gradient(115deg, #ffffff08, transparent 65%, #dbbb6f12);
}
.profile-decoration-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 20px;
  padding: 24px;
  gap: 24px;
  border: 1px solid var(--ui-line);
  color: var(--ui-text);
}
.profile-decoration-preview > div {
  min-width: 0;
  max-width: 100%;
}
.profile-decoration-preview strong {
  overflow-wrap: anywhere;
  white-space: normal;
  color: inherit;
}
.profile-decoration-preview img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 50%;
  filter: none !important;
}
.profile-decoration-preview[data-profile-card='card_blueprint'] {
  background-color: #e1eeef;
  background-image:
    linear-gradient(rgba(28, 105, 118, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 105, 118, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid #a5c7cc;
}
.profile-decoration-preview[data-profile-card='card_twilight'] {
  background:
    radial-gradient(ellipse at 95% 10%, #e5c59c80, transparent 55%),
    linear-gradient(120deg, #ece5f4, #e8edf4);
  border: 1px solid #c7b2d7;
}
body.theme-dark .profile-decoration-preview[data-profile-card='card_blueprint'] {
  background-color: #19343c;
  border-color: #3d6570;
}
body.theme-dark .profile-decoration-preview[data-profile-card='card_twilight'] {
  background:
    radial-gradient(ellipse at 95% 10%, #72594f60, transparent 55%),
    linear-gradient(120deg, #352d48, #213640);
  border-color: #655279;
}
.profile-wardrobe {
  margin-top: 26px;
  padding: 24px;
  border: 1px solid var(--ui-line);
  border-radius: 20px;
  background: var(--ui-surface);
  color: var(--ui-text);
}
.profile-ranch {
  margin-top: 24px;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-text);
}
body .profile-ranch :is(h2, h3, p, span),
body .profile-wardrobe :is(h2, h3, p) {
  color: inherit;
}
.profile-ranch h2,
.profile-wardrobe h2 {
  margin: 4px 0 12px;
  font-size: 1.4rem;
}
.profile-ranch p,
.profile-wardrobe p {
  font-size: 1rem;
  line-height: 1.7;
}
.ranch-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ranch-kicker {
  font: 600 0.7rem/1.6 system-ui;
  letter-spacing: 0.16em;
}
.ranch-intro {
  margin: 0 0 18px;
  opacity: 0.85;
}
.ranch-growth-model {
  margin: 14px 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  font: 400 0.9rem/1.8 var(--font-ui);
}
.ranch-growth-model summary {
  cursor: pointer;
  font-weight: 600;
}
.ranch-growth-model summary:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 4px;
}
#public-profile-ranch {
  scroll-margin-top: 110px;
}
.ranch-scene {
  position: relative;
  height: 340px;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background: var(--ranch-sky, linear-gradient(170deg, #edf1dc 0%, #e7ecda 38%, #f8edce 75%));
  box-shadow: none;
  isolation: isolate;
}
.ranch-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 19% 10%, #fff7d955, transparent 56%);
}
.ranch-sun {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f5d992;
  left: 17%;
  top: 31px;
  box-shadow:
    0 0 0 13px #f6dea424,
    0 0 52px 16px #fff0ba55;
}
.ranch-landscape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: none !important;
}
.ranch-clouds {
  color: #fffdf0;
  opacity: 0.72;
}
.ranch-distant {
  fill: var(--ranch-distant, #c0ccb3);
}
.ranch-hill {
  fill: var(--ranch-hill, #9caf83);
}
.ranch-hill-back {
  fill: var(--ranch-hill-back, #b0c299);
}
.ranch-meadow-light {
  fill: var(--ranch-meadow, #b8c493);
  opacity: 0.65;
}
.ranch-meadow-path {
  fill: var(--ranch-path, #d4cfaa);
  opacity: 0.52;
}
.ranch-distant-tree {
  color: var(--ranch-tree, #8fa583);
}
.ranch-meadow-marks {
  color: #738f67;
  opacity: 0.48;
}
.ranch-home {
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 75px;
  width: clamp(138px, 24%, 186px);
  pointer-events: none;
  filter: drop-shadow(0 5px 7px #46644214);
}
.ranch-hut {
  display: block;
  width: 100%;
  height: auto;
}
.ranch-owner-sign {
  position: absolute;
  right: -5px;
  bottom: -6px;
  max-width: 150px;
  padding: 5px 10px;
  border: 1px solid #a18056;
  border-radius: 5px 7px 5px 6px;
  background: repeating-linear-gradient(2deg, #dfc49b 0 8px, #d5b88b 9px 10px);
  background-color: #dfc49b;
  color: #402c1c !important;
  box-shadow:
    0 2px 0 #a18056,
    0 4px 5px #485b3920;
  text-align: center;
  overflow-wrap: anywhere;
  font: 700 12px system-ui;
}
body:not(.auth-page-body) #public-profile-ranch .ranch-owner-sign {
  color: #402c1c !important;
}
.ranch-owner-sign::after {
  content: '';
  position: absolute;
  left: 48%;
  top: 100%;
  width: 7px;
  height: 16px;
  background: #a18056;
}
.ranch-ground {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(#9aac7b00, var(--ranch-ground, #98aa7a) 38%);
  border: 0;
  pointer-events: none;
}
.ranch-wildflowers {
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  filter: none !important;
}
.ranch-bone {
  position: absolute;
  bottom: 26px;
  width: 34px;
  height: 25px;
  color: #fff5d7 !important;
  transform: rotate(-28deg);
}
.ranch-bone svg {
  width: 100%;
  height: 100%;
}
/* Original settings styles color all spans; isolate the illustration's own palette. */
body:not(.auth-page-body) .profile-ranch .ranch-bone svg {
  color: #fff5d7 !important;
}
body:not(.auth-page-body) .profile-ranch .ranch-bone.is-golden svg {
  color: #ffdb75 !important;
}
.ranch-bone.is-golden {
  color: #ffdb75 !important;
  text-shadow: 0 0 8px #e7ca56;
}
.ranch-pet-track {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  left: 12px;
  right: 12px;
  bottom: 24px;
  height: 216px;
}
[data-max-actor] {
  flex: 0 0 auto;
  width: min(216px, 100%);
  aspect-ratio: 1;
}
[data-max-actor] svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: none !important;
}
.ranch-empty {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 82px;
  z-index: 2;
  text-align: center;
  color: #244f46 !important;
}
body.theme-dark .ranch-scene {
  background: var(--ranch-sky, linear-gradient(165deg, #243941, #4b6060 64%, #7c8165));
  border-color: #a8bc9929;
  box-shadow: inset 0 1px 0 #c1d3c615;
}
body.theme-dark .ranch-scene::before {
  background: radial-gradient(ellipse at 18% 15%, #e5d9b511, transparent 55%);
}
body.theme-dark .ranch-sun {
  background: #e6dfbf;
  box-shadow:
    0 0 0 11px #eee6c00a,
    0 0 40px 7px #eee6c022;
}
body.theme-dark .ranch-clouds {
  color: #b7c6bf;
  opacity: 0.2;
}
body.theme-dark .ranch-distant {
  fill: var(--ranch-distant, #506b68);
}
body.theme-dark .ranch-hill {
  fill: var(--ranch-hill, #526e57);
}
body.theme-dark .ranch-hill-back {
  fill: var(--ranch-hill-back, #607a65);
}
body.theme-dark .ranch-meadow-light {
  fill: var(--ranch-meadow, #708362);
}
body.theme-dark .ranch-meadow-path {
  fill: var(--ranch-path, #a6a085);
  opacity: 0.26;
}
body.theme-dark .ranch-distant-tree {
  color: var(--ranch-tree, #506956);
}
body.theme-dark .ranch-meadow-marks {
  color: #a2b48b;
  opacity: 0.23;
}
body.theme-dark .ranch-ground {
  background: linear-gradient(#49614e00, var(--ranch-ground, #4c654e) 45%);
}
body.theme-dark .ranch-home {
  filter: brightness(0.85) saturate(0.82) drop-shadow(0 5px 8px #152c3140);
}
body.theme-dark .ranch-window {
  fill: #f8d88b;
  filter: drop-shadow(0 0 5px #ffe6a590);
}
body.theme-dark .ranch-wildflowers {
  opacity: 0.85;
}
body.theme-dark .ranch-empty {
  color: #e4f2e6 !important;
}
.ranch-owner-controls,
.extra-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.ranch-wool {
  --wool-bg: #fffaf0;
  --wool-line: #dfcaa4;
  --wool-ink: #614828;
  --wool-fill: #b88636;
  margin-top: 22px;
  padding: clamp(18px, 3vw, 28px);
  border: 0;
  border-radius: 24px;
  background: color-mix(in srgb, var(--wool-bg) 65%, transparent);
  color: var(--wool-ink);
}
body.theme-dark .ranch-wool {
  --wool-bg: #292a2e;
  --wool-line: #66553d;
  --wool-ink: #f0dcc0;
  --wool-fill: #e0b86e;
}
.ranch-wool-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.ranch-wool-art {
  width: 110px;
  height: 68px;
  flex: 0 0 auto;
}
.ranch-wool h3 {
  margin: 4px 0;
  font-size: 1.2rem;
}
.ranch-wool-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 0 20px;
  font-size: 0.86rem;
}
.ranch-wool-progress progress {
  flex: 1 1 90px;
  min-width: 70px;
  height: 9px;
  appearance: none;
  border: 0;
  border-radius: 12px;
  background: var(--ui-surface-soft);
  accent-color: var(--wool-fill);
}
.ranch-wool-progress progress::-webkit-progress-bar {
  background: var(--ui-surface-soft);
  border-radius: 12px;
}
.ranch-wool-progress progress::-webkit-progress-value {
  background: var(--wool-fill);
  border-radius: 12px;
}
.ranch-wool-progress progress::-moz-progress-bar {
  background: var(--wool-fill);
  border-radius: 12px;
}
.ranch-wool-stages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ranch-wool-stages > div {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.ranch-wool-stages > div + div {
  padding-left: 18px;
  border-left: 1px solid color-mix(in srgb, var(--wool-line) 55%, transparent);
}
.ranch-wool-stages strong {
  font: 650 1.8rem/1.4 var(--font-zh-ui, sans-serif);
  color: var(--wool-ink);
}
.ranch-wool-stages small {
  font-size: 0.84rem;
  font-weight: 400;
}
body .profile-ranch .ranch-wool-stages button {
  background: var(--wool-bg);
  border-color: var(--wool-line);
  color: var(--wool-ink);
}
.ranch-wool-tool a {
  color: var(--wool-ink) !important;
  font-weight: 650;
  text-underline-offset: 4px;
}
.profile-ranch .ranch-wool-note {
  font-size: 0.85rem;
  margin-bottom: 0;
  opacity: 0.85;
}
.ranch-wool-rest {
  border-left: 3px solid var(--wool-fill);
  padding: 8px 14px;
  background: var(--ui-surface);
  border-radius: 4px 12px 12px 4px;
}
.ranch-wool-rest small {
  display: block;
  font-size: 0.8rem;
  opacity: 0.8;
}
@media (max-width: 520px) {
  .ranch-wool-stages {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ranch-wool-stages > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--wool-line) 55%, transparent);
  }
  .ranch-wool-art {
    width: 76px;
  }
  .ranch-wool h3 {
    font-size: 1.05rem;
  }
}
body :is(.profile-ranch, .profile-wardrobe) button {
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface-soft);
  color: var(--ui-text);
  font: 600 0.9rem/1.5 var(--font-zh-ui, sans-serif);
  cursor: pointer;
}
body :is(.profile-ranch, .profile-wardrobe) button:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
body :is(.profile-ranch, .profile-wardrobe) button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
body .profile-ranch button {
  border-color: transparent;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-surface-soft) 65%, transparent);
}
body .profile-ranch .ranch-wool-stages button {
  border-color: transparent;
  background: color-mix(in srgb, var(--wool-line) 22%, transparent);
}
body .profile-ranch [data-ranch-pause] {
  background: transparent;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 500;
}
body .profile-ranch button:not(:disabled):hover {
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface));
}
body .profile-wardrobe button[aria-pressed='true'] {
  border-color: var(--ui-accent);
  box-shadow: inset 0 0 0 1px var(--ui-accent);
}
.ranch-rules {
  margin-top: 16px;
  line-height: 1.7;
}
.wardrobe-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
  margin: 18px 0;
}
.wardrobe-slots section {
  padding: 14px;
  background: var(--ui-surface-soft);
  border-radius: 12px;
}
.wardrobe-slots button {
  margin: 4px 4px 4px 0;
}
.profile-extras-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, 1fr);
  align-items: start;
  gap: 28px;
  margin-bottom: 28px;
}
.settings-form .profile-extras-top {
  grid-template-columns: minmax(0, 1fr);
}
.profile-extras-top > .profile-ranch {
  margin-top: 0;
  min-width: 0;
  padding: 18px;
}
.profile-extras-top .ranch-scene {
  height: 320px;
}
.profile-extras-top .ranch-intro,
.profile-extras-top .ranch-inventory {
  font-size: 0.88rem;
  margin: 10px 0;
}
.profile-extras-top .ranch-heading h2 {
  font-size: 1.2rem;
}
.profile-extras-top .ranch-owner-controls {
  margin-top: 10px;
  gap: 8px;
}
.profile-extras-top .ranch-rules {
  margin-top: 10px;
  font-size: 0.88rem;
}
#profile-extras-message:empty {
  margin: 0;
}
.profile-additions {
  margin-top: 28px;
}
.profile-additions > h2 {
  color: var(--ui-text);
  font-size: 1.4rem;
}
.profile-collectibles figure {
  display: inline-grid;
  justify-items: center;
  gap: 12px;
  margin: 12px;
  padding: 18px;
  max-width: 100%;
  background: var(--ui-surface-soft);
  border-radius: 14px;
  color: var(--ui-text);
}
.profile-collectibles img {
  width: 80px;
  height: 80px;
  filter: none !important;
}
@media (max-width: 1200px) {
  .profile-extras-top {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .profile-ranch {
    padding: 20px 0 0;
  }
  .profile-wardrobe {
    padding: 16px;
  }
  .ranch-scene {
    height: 300px;
  }
  .profile-extras-top .ranch-scene {
    height: 300px;
  }
  .ranch-home {
    right: 3%;
    bottom: 87px;
    width: 142px;
  }
  .profile-decoration-preview {
    padding: 20px 14px;
  }
}
@media (max-width: 1100px) {
  /* Allow the final product action to scroll above the guide launcher and the
     mobile navigation, without changing the guide's position on other pages. */
  body.economy-page:is(.electromagnetic-page, .inventory-page):not(.auth-page-body) .main-content {
    padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Public owner's skin, independent of the visitor's own equipped card.
   Only colors/textures change: existing typography and layout stay intact. */
body[data-public-profile-theme='card_blueprint'] {
  background: #eaf2f1 !important;
}
body[data-public-profile-theme='card_twilight'] {
  background: #f0ebf4 !important;
}
body.theme-dark[data-public-profile-theme='card_blueprint'] {
  background: #10282f !important;
}
body.theme-dark[data-public-profile-theme='card_twilight'] {
  background: #201c2d !important;
}
.public-profile-shell[data-profile-card='card_blueprint'] {
  --ui-text: #214c55;
  --ui-text-muted: #4a6b71;
  --ui-surface: #f1f8f6;
  --ui-surface-soft: #dcece8;
  --ui-surface-raised: #edf5f3;
  --ui-line: #afccc7;
  --ui-accent: #226b72;
  --profile-grid: #427d8110;
  --profile-glow: #b1dacf44;
  --ranch-sky: linear-gradient(#d8eeef, #ecf5e6);
  --ranch-hill: #6caaa0;
  --ranch-hill-back: #a0c9bd;
  --ranch-ground: #537f76;
  --ranch-grass: #84b8a1;
  --ranch-distant: #c0d9cc;
  --ranch-tree: #76a496;
  --ranch-meadow: #a4c4a0;
  --ranch-path: #d0d8b6;
}
.public-profile-shell[data-profile-card='card_twilight'] {
  --ui-text: #4d3b60;
  --ui-text-muted: #6e5b7c;
  --ui-surface: #f8f3fa;
  --ui-surface-soft: #eae0ef;
  --ui-surface-raised: #f4edf7;
  --ui-line: #cbb7d7;
  --ui-accent: #73518c;
  --profile-grid: transparent;
  --profile-glow: #ebc79760;
  --ranch-sky: linear-gradient(#dad3f0, #f3ddcb);
  --ranch-hill: #a39cba;
  --ranch-hill-back: #c4b7d4;
  --ranch-ground: #7f7896;
  --ranch-grass: #b3a6c2;
  --ranch-distant: #d7cad2;
  --ranch-tree: #a397af;
  --ranch-meadow: #b3adc0;
  --ranch-path: #ddd1c0;
}
body.theme-dark .public-profile-shell[data-profile-card='card_blueprint'] {
  --ui-text: #cde7e3;
  --ui-text-muted: #aac8c5;
  --ui-surface: #162e36;
  --ui-surface-soft: #213e47;
  --ui-surface-raised: #1b343c;
  --ui-line: #3e6870;
  --ui-accent: #a8d9d4;
  --profile-grid: #96c8c310;
  --profile-glow: #375f7733;
  --ranch-sky: linear-gradient(#153643, #31616a);
  --ranch-hill: #345e60;
  --ranch-hill-back: #4a7d7a;
  --ranch-ground: #294846;
  --ranch-grass: #547f73;
  --ranch-distant: #426968;
  --ranch-tree: #365853;
  --ranch-meadow: #577e64;
  --ranch-path: #93a39c;
}
body.theme-dark .public-profile-shell[data-profile-card='card_twilight'] {
  --ui-text: #e8ddef;
  --ui-text-muted: #c7b9d4;
  --ui-surface: #2d263c;
  --ui-surface-soft: #40344e;
  --ui-surface-raised: #352d45;
  --ui-line: #695677;
  --ui-accent: #dac1ed;
  --profile-grid: transparent;
  --profile-glow: #c0804933;
  --ranch-sky: linear-gradient(#2a2744, #655065);
  --ranch-hill: #58536e;
  --ranch-hill-back: #77708a;
  --ranch-ground: #423c52;
  --ranch-grass: #79708c;
  --ranch-distant: #74677b;
  --ranch-tree: #655e79;
  --ranch-meadow: #817687;
  --ranch-path: #b0a19b;
}
body:not(.auth-page-body) .public-profile-shell[data-profile-card]:not([data-profile-card='']) {
  background-color: var(--ui-surface) !important;
  background-image:
    radial-gradient(ellipse at 95% 0%, var(--profile-glow), transparent 45%),
    linear-gradient(var(--profile-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--profile-grid) 1px, transparent 1px) !important;
  background-size:
    100% 100%,
    32px 32px,
    32px 32px !important;
  color: var(--ui-text);
  border: 1px solid var(--ui-line) !important;
}
.public-profile-shell[data-profile-card]:not([data-profile-card='']) .ranch-scene {
  background: var(--ranch-sky);
}
.public-profile-shell[data-profile-card]:not([data-profile-card='']) .ranch-hill {
  background: var(--ranch-hill);
}
.public-profile-shell[data-profile-card]:not([data-profile-card='']) .ranch-hill-back {
  background: var(--ranch-hill-back);
}
.public-profile-shell[data-profile-card]:not([data-profile-card='']) .ranch-ground {
  background: linear-gradient(transparent, var(--ranch-ground) 45%);
}
body.theme-dark .public-profile-shell[data-profile-card]:not([data-profile-card='']) .ranch-sun {
  box-shadow: none;
  background: #f3ddaf;
}
.profile-public-link {
  display: inline-block;
  margin: 12px 0 0 16px;
}

/* Keep the website with identity details; reserve the complete lower row for the bio. */
.public-profile-website-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 12px;
  max-width: 100%;
}
.public-profile-website-row[hidden],
.profile-activity[hidden],
.public-profile-meta [hidden] {
  display: none !important;
}

/* Quiet identity / activity hierarchy; keep equipped cosmetics and ranch intact. */
body.public-profile-page:not(.auth-page-body) .settings-shell {
  max-width: 1080px;
  margin-inline: auto;
}
body.public-profile-page:not(.auth-page-body) .settings-header {
  margin-bottom: 12px;
}
body.public-profile-page:not(.auth-page-body) .settings-header h1 {
  font-size: 14px;
  color: var(--ui-muted);
  font-weight: 500;
}
body.public-profile-page:not(.auth-page-body) .public-profile-shell {
  padding: clamp(18px, 3vw, 32px);
  gap: 22px;
}
body.public-profile-page:not(.auth-page-body) .public-profile-header {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  text-align: left;
}
body.public-profile-page:not(.auth-page-body) .public-profile-copy {
  gap: 8px;
  min-width: 0;
}
body.public-profile-page:not(.auth-page-body) .public-profile-copy h2 {
  font-size: clamp(24px, 4vw, 32px);
  overflow-wrap: anywhere;
}
body.public-profile-page:not(.auth-page-body) .public-profile-avatar-wrap {
  width: 88px;
  height: 88px;
}
body.public-profile-page:not(.auth-page-body) .public-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
body.public-profile-page:not(.auth-page-body) .public-profile-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.public-profile-page:not(.auth-page-body) .public-profile-stat strong {
  font-size: 23px;
  order: -1;
}
body.public-profile-page:not(.auth-page-body) .public-profile-field {
  gap: 6px;
}
body.public-profile-page:not(.auth-page-body) .public-profile-field > span {
  display: none;
}
body.public-profile-page:not(.auth-page-body) .public-profile-field p {
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.7;
}
#public-profile-message:empty {
  display: none;
}
.profile-activity {
  min-width: 0;
  max-width: 100%;
  border-top: 1px solid var(--ui-line);
  padding-top: 22px;
  font-family: var(--font-ui);
}
.profile-activity-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
.profile-wardrobe-disclosure:not(:has(#public-profile-wardrobe:not([hidden]))) {
  display: none;
}
.profile-wardrobe-disclosure > summary {
  padding-block: 12px;
  color: var(--ui-muted);
  font: 14px/1.5 var(--font-ui);
  cursor: pointer;
}
.profile-wardrobe-disclosure .profile-wardrobe {
  margin-top: 10px;
}
.profile-activity-heading h3 {
  margin: 0;
  font-size: 17px;
}
.profile-activity-heading span {
  color: var(--ui-muted);
  font-size: 12px;
}
.profile-heat-scroll {
  --heat-cell: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.profile-heatmap,
.profile-heat-months {
  display: grid;
  grid-template-columns: repeat(var(--heat-columns), var(--heat-cell));
  gap: 4px;
  width: max-content;
}
.profile-heatmap {
  grid-template-rows: repeat(7, var(--heat-cell));
  grid-auto-flow: column;
}
.profile-heatmap button,
.profile-activity-legend i {
  border: 1px solid rgb(100 130 120 / 15%);
  border-radius: 3px;
  padding: 0;
  min-width: 0;
  background: var(--heat-color);
}
.profile-heatmap button {
  width: 100%;
  height: var(--heat-cell);
  aspect-ratio: 1;
  box-sizing: border-box;
  cursor: pointer;
}
.profile-heatmap button:focus-visible {
  outline: 2px solid var(--ui-text);
  outline-offset: 1px;
}
.profile-heat-months {
  height: 22px;
  color: var(--ui-muted);
  font-size: 11px;
  white-space: nowrap;
}
.profile-activity [data-level='0'] {
  --heat-color: var(--ui-surface-soft, #ebedf0);
}
.profile-activity [data-level='1'] {
  --heat-color: #9be9a8;
}
.profile-activity [data-level='2'] {
  --heat-color: #40c463;
}
.profile-activity [data-level='3'] {
  --heat-color: #30a14e;
}
.profile-activity [data-level='4'] {
  --heat-color: #216e39;
}
.profile-activity-detail {
  min-height: 20px;
  margin: 10px 0 6px;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.6;
}
.profile-activity-legend {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ui-muted);
  font-size: 11px;
}
.profile-activity-legend small {
  font-size: inherit;
}
.profile-activity-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.profile-activity-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
}
@media (max-width: 600px) {
  body.public-profile-page:not(.auth-page-body) .main-content {
    padding-inline: 16px !important;
  }
  body.public-profile-page:not(.auth-page-body) .public-profile-shell {
    padding: 16px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 20px;
  }
  body.public-profile-page:not(.auth-page-body) .public-profile-header {
    gap: 14px;
  }
  body.public-profile-page:not(.auth-page-body) .public-profile-avatar-wrap {
    width: 64px;
    height: 64px;
    padding: 5px;
  }
  body.public-profile-page:not(.auth-page-body) .public-profile-meta {
    font-size: 12px;
    gap: 4px 8px;
  }
  body.public-profile-page:not(.auth-page-body) .public-profile-copy h2 {
    font-size: 23px;
  }
  .public-profile-website-row {
    font-size: 13px;
    margin-top: 2px;
  }
  .profile-activity {
    padding-top: 18px;
  }
}
.public-profile-website-row > p {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
.public-profile-website-row a {
  color: var(--ui-accent);
  overflow-wrap: anywhere;
}
body:not(.auth-page-body) .public-profile-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
#public-profile-bio {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A fixed-size three-category counter replaces quantity-sized scene decorations. */
.ranch-bone-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-block: 14px;
}
.ranch-bone-count {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui-text);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ranch-bone-count + .ranch-bone-count {
  border-left: 1px solid var(--ui-line);
}
.ranch-bone-count svg {
  width: 42px;
  height: 28px;
  color: #906319;
}
.ranch-bone-count.is-hard svg {
  color: #626d7c;
}
.ranch-bone-count.is-ordinary svg {
  color: #7c7969;
}
body.theme-dark .ranch-bone-count.is-golden svg {
  color: #f1cc75;
}
body.theme-dark .ranch-bone-count.is-hard svg {
  color: #becce0;
}
body.theme-dark .ranch-bone-count.is-ordinary svg {
  color: #e0dcc9;
}
.ranch-bone-count span {
  font-size: 0.85em;
}
.ranch-satiety {
  color: var(--ui-text);
}

/* Storefront samples reuse the equipped cosmetic selectors above. The stage is
   presentation only; it never changes the visitor's equipped items or theme. */
body .shop-cosmetic-preview,
body .shop-ranch-preview {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 30px 12px 14px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 35%, #ffffffc9, transparent 70%), #eeeae2;
}
body.theme-dark .shop-cosmetic-preview,
body.theme-dark .shop-ranch-preview {
  background: radial-gradient(ellipse at 50% 35%, #57756844, transparent 75%), #26312f;
}
body .shop-cosmetic-preview .shop-preview-caption,
body .shop-ranch-preview .shop-preview-caption {
  align-self: flex-start;
  color: var(--ui-text-muted, #667875) !important;
  font: 600 9px/1.4 var(--font-zh-ui, sans-serif);
  letter-spacing: 0.05em;
}
body .shop-cosmetic-preview .shop-preview-footnote,
body .shop-ranch-preview .shop-preview-footnote {
  color: var(--ui-text-muted, #667875) !important;
  font: 400 10px/1.5 var(--font-zh-ui, sans-serif);
  text-align: center;
}
body .shop-cosmetic-preview .public-profile-avatar-wrap {
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  padding: 6px;
  box-sizing: border-box;
  margin: 9px 0;
}
body .shop-cosmetic-preview img.public-profile-avatar {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  border-radius: 50%;
  filter: none !important;
}
body .shop-cosmetic-preview .shop-preview-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body .shop-cosmetic-preview .shop-preview-identity img {
  flex: 0 0 42px;
  width: 42px !important;
  height: 42px !important;
}
body .shop-cosmetic-preview .shop-preview-identity strong {
  display: block;
  color: var(--ui-text) !important;
  font: 700 15px/1.5 var(--font-zh-ui, sans-serif);
}
body .shop-cosmetic-preview .shop-preview-identity span {
  display: block;
  color: var(--ui-text-muted) !important;
  font: 400 10px/1.5 var(--font-zh-ui, sans-serif);
}
body .shop-cosmetic-preview .cosmetic-nameplate {
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
}
body .shop-cosmetic-preview .cosmetic-nameplate .nameplate-label,
body .shop-cosmetic-preview .cosmetic-nameplate small {
  color: var(--plate-ink) !important;
}
body .shop-cosmetic-preview.is-theme {
  padding: 0;
  background: none;
}
body .shop-cosmetic-preview .shop-preview-profile {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 30px 13px 14px;
  box-sizing: border-box;
  border-radius: inherit;
}
body .shop-cosmetic-preview .profile-constellation {
  width: 100%;
  top: 15%;
}
body .shop-cosmetic-preview .shop-preview-profile-note {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--ui-line);
  border-radius: 9px;
  background: var(--ui-surface-raised);
}
body .shop-cosmetic-preview .shop-preview-profile-note strong {
  color: var(--ui-text) !important;
  font: 600 10px/1.5 var(--font-zh-ui, sans-serif);
}
body .shop-cosmetic-preview .shop-preview-profile-note span,
body .shop-cosmetic-preview .shop-preview-profile-stats span {
  color: var(--ui-text-muted) !important;
  font: 400 9px/1.5 var(--font-zh-ui, sans-serif);
}
body .shop-cosmetic-preview .shop-preview-profile-stats {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--ui-line);
}
body .shop-cosmetic-preview .shop-preview-profile-stats > span {
  display: grid;
  gap: 2px;
}
body .shop-ranch-preview {
  background: radial-gradient(ellipse at 45% 30%, #fff5d899, transparent 65%), #e9efdf;
}
body.theme-dark .shop-ranch-preview {
  background: radial-gradient(ellipse at 45% 30%, #78988433, transparent 65%), #293b32;
}
body .shop-ranch-pet {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 0;
  width: min(100%, 230px);
  min-width: 0;
  min-height: 0;
}
body .shop-ranch-pet > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: none !important;
}
body .shop-inspect-image:has(.shop-cosmetic-preview, .shop-ranch-preview) {
  overflow: hidden;
}
body .shop-inspect-image .shop-ranch-preview {
  gap: 6px;
  padding: 16px;
}
body .shop-inspect-image .shop-ranch-preview .shop-preview-footnote {
  display: none;
}
body .inventory-item-image .shop-cosmetic-preview,
body .inventory-item-image .shop-ranch-preview,
body .inventory-item-image .shop-preview-profile {
  gap: 8px;
  padding: 14px;
}
body .inventory-item-image .shop-preview-caption,
body .inventory-item-image .shop-preview-footnote,
body .inventory-item-image .shop-preview-profile-note,
body .inventory-item-image .shop-preview-profile-stats,
body .inventory-item-image .shop-preview-identity span {
  display: none;
}
body .inventory-item-image .shop-cosmetic-preview.is-theme {
  padding: 0;
}
body .inventory-item-image .public-profile-avatar-wrap {
  width: 62px;
  height: 62px;
  margin: 0;
}
body .inventory-item-image .shop-cosmetic-preview.is-nameplate {
  padding: 8px;
}
body .inventory-item-image .shop-cosmetic-preview .cosmetic-nameplate {
  font-size: 9px;
}
body .inventory-item-image .shop-ranch-pet {
  max-width: 160px;
}
body.electromagnetic-page .shop-item-image {
  container-type: inline-size;
}
body.electromagnetic-page .shop-item-image .shop-preview-footnote,
body.electromagnetic-page .shop-item-image .shop-preview-profile-stats {
  display: none;
}
body.electromagnetic-page .shop-item-image .shop-cosmetic-preview,
body.electromagnetic-page .shop-item-image .shop-ranch-preview,
body.electromagnetic-page .shop-item-image .shop-preview-profile {
  gap: 8px;
  padding: 26px 10px 10px;
}
body.electromagnetic-page .shop-item-image .shop-cosmetic-preview.is-theme {
  padding: 0;
}
body.electromagnetic-page .shop-item-image .public-profile-avatar-wrap {
  width: clamp(56px, 42cqw, 100px);
  height: auto;
  aspect-ratio: 1;
  margin: 7px 0;
}
body.electromagnetic-page .shop-item-image .shop-preview-identity img {
  flex-basis: clamp(28px, 20cqw, 42px);
  width: clamp(28px, 20cqw, 42px) !important;
  height: clamp(28px, 20cqw, 42px) !important;
}
body.electromagnetic-page .shop-item-image .cosmetic-nameplate {
  font-size: clamp(8px, 5cqw, 12px);
}
body.electromagnetic-page .shop-item-image .shop-preview-profile-note {
  padding: 6px 8px;
}
body.electromagnetic-page .shop-category-nav .shop-category-sample {
  display: block;
  grid-row: span 2;
  width: 46px;
  height: 46px;
}
body.electromagnetic-page :is(.shop-category-sample, .shop-hero-art) .shop-preview-caption,
body.electromagnetic-page :is(.shop-category-sample, .shop-hero-art) .shop-preview-footnote {
  display: none;
}
body.electromagnetic-page :is(.shop-category-sample, .shop-hero-art) .shop-cosmetic-preview,
body.electromagnetic-page :is(.shop-category-sample, .shop-hero-art) .shop-ranch-preview {
  gap: 0;
  padding: 8px;
  background: transparent;
  overflow: visible;
}
body.electromagnetic-page :is(.shop-category-sample, .shop-hero-art) .public-profile-avatar-wrap {
  width: 75%;
  height: auto;
  aspect-ratio: 1;
  padding: 2px;
  margin: 0;
}
body.electromagnetic-page .shop-category-sample .shop-cosmetic-preview {
  padding: 2px;
}
body.electromagnetic-page .shop-category-sample .shop-ranch-preview {
  padding: 0;
}
@media (max-width: 600px) {
  body.electromagnetic-page .shop-category-nav .shop-category-sample {
    grid-row: 1;
    width: 36px;
    height: 36px;
  }
}
#public-profile-wardrobe {
  scroll-margin-top: calc(var(--desktop-header-height, 100px) + 16px);
}