:root {
  --bg: #f4f7fb;
  --paper: #ffffff;
  --paper-soft: #f8fbff;
  --paper-glass: rgba(255, 255, 255, 0.78);
  --ink: #162331;
  --muted: #647386;
  --line: #d9e2ee;
  --line-strong: #bfd1e6;
  --teal: #00a9a5;
  --blue: #2f6fed;
  --coral: #ff615f;
  --amber: #ffc83d;
  --green: #55b86b;
  --violet: #7657d9;
  --shadow: 0 18px 42px rgba(22, 35, 49, 0.12);
  --shadow-soft: 0 10px 24px rgba(22, 35, 49, 0.08);
  --shadow-hover: 0 22px 48px rgba(22, 35, 49, 0.16);
  --radius: 8px;
}

/* Home hero polish */
body[data-active-view="home"] .command-center {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: clamp(34px, 5vw, 76px);
  min-height: 340px;
  padding-top: 30px;
  padding-bottom: 30px;
}

body[data-active-view="home"] .command-copy {
  position: relative;
  padding: 28px 30px 30px;
  border: 1px solid rgba(105, 218, 222, 0.2);
  border-left: 4px solid #38d7d0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 0 0, rgba(45, 203, 199, 0.14), transparent 42%),
    linear-gradient(110deg, rgba(5, 25, 38, 0.78), rgba(8, 28, 42, 0.42));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(5px);
}

body[data-active-view="home"] .command-copy::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 15px;
  width: 54px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #38d7d0 0 34%, #5f8fe9 34% 66%, #e9b65f 66%);
  opacity: 0.7;
}

body[data-active-view="home"] .command-copy h1 {
  margin-top: 12px;
  max-width: 760px;
  letter-spacing: -0.035em;
}

body[data-active-view="home"] .command-copy > p {
  max-width: 680px;
  line-height: 1.6;
}

body[data-active-view="home"] .quick-actions {
  margin-top: 22px;
}

body[data-active-view="home"] .quick-actions > button {
  min-height: 50px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

body[data-active-view="home"] .command-scene {
  min-height: 270px;
  opacity: 1;
  border: 1px solid rgba(103, 222, 224, 0.58);
  border-radius: 12px;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 210, 112, 0.24), transparent 28%),
    linear-gradient(180deg, rgba(27, 105, 132, 0.96), rgba(39, 125, 121, 0.9));
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.25),
    inset 0 0 0 5px rgba(5, 36, 50, 0.28),
    inset 0 -8px 0 rgba(2, 24, 34, 0.22);
  transform: perspective(900px) rotateY(-2deg);
}

body[data-active-view="home"] .command-scene::before {
  left: 7%;
  right: 7%;
  bottom: 38px;
  height: 112px;
  border-color: rgba(57, 51, 34, 0.24);
  background:
    linear-gradient(90deg, rgba(76, 57, 29, 0.12) 1px, transparent 1px) 0 0 / 38px 100%,
    linear-gradient(180deg, #ffe9a9, #ddb86c);
  box-shadow: 0 14px 24px rgba(3, 25, 35, 0.22);
}

.scene-heading {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #eaffff;
  font-size: 0.7rem;
  font-weight: 900;
}

.scene-heading > span,
.scene-heading > strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(151, 237, 232, 0.25);
  border-radius: 6px;
  background: rgba(4, 31, 43, 0.56);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
}

.scene-heading svg,
.scene-caption svg {
  width: 14px;
  height: 14px;
}

.scene-heading .live-pulse {
  width: 7px;
  height: 7px;
}

.scene-speech {
  position: absolute;
  z-index: 6;
  top: 55px;
  left: 20%;
  padding: 7px 10px;
  color: #17313d;
  border: 2px solid rgba(12, 42, 54, 0.72);
  border-radius: 7px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 950;
  box-shadow: 0 6px 0 rgba(3, 29, 40, 0.18);
}

.scene-speech::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -8px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(12, 42, 54, 0.72);
  border-bottom: 2px solid rgba(12, 42, 54, 0.72);
  background: #fff;
  transform: rotate(45deg);
}

body[data-active-view="home"] .scene-avatar {
  width: 118px;
  filter: drop-shadow(0 14px 8px rgba(8, 31, 35, 0.3));
}

body[data-active-view="home"] .scene-avatar.one {
  left: 8%;
  bottom: 45px;
}

body[data-active-view="home"] .scene-avatar.two {
  right: 7%;
  bottom: 43px;
}

body[data-active-view="home"] .scene-avatar.three {
  width: 108px;
  left: 39%;
  bottom: 72px;
}

.scene-caption {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #dff9f7;
  border: 1px solid rgba(139, 231, 222, 0.22);
  border-radius: 6px;
  background: rgba(4, 31, 43, 0.68);
  font-size: 0.68rem;
  font-weight: 850;
}

@media (max-width: 1040px) {
  body[data-active-view="home"] .command-center {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 18px;
  }
}

@media (max-width: 680px) {
  body[data-active-view="home"] .command-copy {
    padding: 22px 20px 24px;
    border-left-width: 3px;
  }

  body[data-active-view="home"] .command-copy::after {
    display: none;
  }
}

#profileSearchForm {
  display: grid;
  grid-template-columns: minmax(170px, 205px) minmax(230px, 1fr) auto;
  align-items: center;
  width: min(660px, 100%);
}

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

#profileSearchForm .profile-hotel-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.profile-hotel-trigger {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  font-size: 0.82rem;
  font-weight: 850;
  text-align: left;
}

.profile-hotel-trigger img,
.profile-hotel-menu img {
  width: 21px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(36, 60, 73, 0.16);
}

.profile-hotel-trigger svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
  transition: transform 150ms ease;
}

.profile-hotel-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.profile-hotel-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  width: min(285px, 86vw);
  max-height: 330px;
  display: grid;
  gap: 3px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid rgba(52, 102, 126, 0.46);
  border-radius: 8px;
  background: #f6fbfd;
  box-shadow: 0 18px 36px rgba(13, 38, 52, 0.24);
}

.profile-hotel-menu[hidden] {
  display: none;
}

.profile-hotel-menu button {
  min-height: 40px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  color: #385262;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
}

.profile-hotel-menu button:hover,
.profile-hotel-menu button.is-selected {
  color: #087a79;
  background: rgba(23, 143, 139, 0.12);
}

.profile-hotel-menu button > svg {
  width: 17px;
  height: 17px;
  color: #199a96;
}

#profileSearchForm #habboUsername {
  min-width: 0;
  width: 100%;
}

#profileSearchForm button:disabled {
  cursor: wait;
  filter: saturate(0.65);
  opacity: 0.72;
}

html[data-theme="dark"] .profile-hotel-trigger {
  color: #e7f0f4;
  border-color: #31536a;
  background: #0b1d2a;
}

html[data-theme="dark"] .profile-hotel-menu {
  border-color: #31536a;
  background: #122231;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .profile-hotel-menu button {
  color: #dbe7ec;
}

html[data-theme="dark"] .profile-hotel-menu button:hover,
html[data-theme="dark"] .profile-hotel-menu button.is-selected {
  color: #89e1da;
  background: #193b50;
}

@media (max-width: 820px) {
  #profileSearchForm {
    grid-template-columns: 1fr;
    width: 100%;
  }

  #profileSearchForm button {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  background:
    linear-gradient(180deg, rgba(245, 251, 255, 0.72), rgba(255, 247, 226, 0.78)),
    linear-gradient(90deg, rgba(47, 111, 237, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(0, 169, 165, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    url("assets/habbosal-city-bg.webp") center top / cover no-repeat fixed,
    #eef7ff;
}

body.modal-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 0.96;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
  line-height: 1.1;
}

h3 {
  line-height: 1.18;
}

svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.container {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

.top-strip {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 12px, transparent 12px 24px) 0 0 / 24px 100%,
    linear-gradient(90deg, #172331, #394c84 48%, #006e75);
  border-bottom: 4px solid var(--amber);
}

.strip-inner {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.strip-inner p {
  margin: 0;
  font-weight: 800;
}

.strip-actions,
.quick-actions,
.toolbar,
.reward-row,
.meta-row,
.meta-chips,
.pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.primary-button,
.ghost-button,
.icon-button,
.icon-text-button,
.nav-choice,
.tab,
.segment,
.text-link {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 850;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.primary-button:hover,
.ghost-button:hover,
.icon-button:hover,
.icon-text-button:hover,
.nav-choice:hover,
.segment:hover {
  transform: translateY(-1px);
}

.primary-button {
  padding: 0 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  box-shadow: 0 6px 0 #0a597e, 0 14px 24px rgba(47, 111, 237, 0.18);
}

.primary-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #0a597e;
}

.ghost-button,
.icon-text-button {
  padding: 0 14px;
  color: #223247;
  background: linear-gradient(180deg, #fff, #eef8ff);
  border: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 rgba(47, 111, 237, 0.08);
}

.icon-text-button.compact {
  min-height: 30px;
  padding: 0 10px;
}

.icon-button {
  width: 42px;
  min-width: 42px;
  padding: 0;
  color: #213041;
  background: #fff;
  border: 1px solid var(--line);
}

.primary-button.large,
.ghost-button.large {
  min-height: 48px;
}

.primary-button.full,
.ghost-button.full {
  width: 100%;
}

.text-link {
  min-height: 30px;
  padding: 0 8px;
  color: var(--blue);
  background: transparent;
}

.site-header {
  position: relative;
  z-index: 30;
  overflow: visible;
  padding: 28px 0 34px;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.76), transparent 24%),
    radial-gradient(circle at 84% 6%, rgba(255, 223, 131, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 247, 226, 0.2));
  border-bottom: 1px solid rgba(22, 35, 49, 0.1);
}

.nav-shell {
  position: relative;
  z-index: 5;
  width: min(1500px, calc(100% - 36px));
  display: grid;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 206, 90, 0.12) 1px, transparent 1px) 0 0 / 92px 100%,
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 225, 0.94));
  border: 3px solid #d99b2c;
  border-radius: 8px;
  box-shadow:
    0 8px 0 rgba(170, 105, 19, 0.24),
    0 24px 60px rgba(48, 76, 104, 0.18);
  backdrop-filter: blur(12px);
}

.nav-shell::before {
  content: "H   H   H   H   H   H   H   H   H   H";
  position: absolute;
  inset: 24px -20px auto;
  color: rgba(255, 200, 61, 0.24);
  font-size: clamp(1.4rem, 3.2vw, 2.5rem);
  font-weight: 950;
  text-align: center;
  word-spacing: clamp(26px, 6vw, 92px);
  pointer-events: none;
}

.nav-logo-row {
  position: relative;
  min-height: 96px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 14px;
  padding: 10px 20px 8px;
  border-bottom: 3px solid #d99b2c;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}

.nav-brand {
  grid-column: 2;
  justify-content: center;
  align-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  filter: drop-shadow(0 14px 0 rgba(22, 35, 49, 0.08));
}

.brand-logo {
  display: block;
  width: clamp(300px, 30vw, 430px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.nav-links {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  justify-content: center;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 233, 0.98));
}

.nav-choice {
  position: relative;
  min-width: 0;
  min-height: 96px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 8px 10px;
  color: #173047;
  background: transparent;
  border-radius: 0;
  border-right: 1px solid rgba(217, 155, 44, 0.22);
  font-size: clamp(0.82rem, 1.08vw, 1rem);
  line-height: 1.06;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.75);
}

.nav-choice:last-child {
  border-right: 0;
}

.nav-choice span {
  max-width: 112px;
  min-height: 30px;
  display: grid;
  place-items: center;
  text-transform: uppercase;
}

.nav-art-icon {
  width: clamp(62px, 4.8vw, 76px);
  height: 68px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 8px 0 rgba(22, 35, 49, 0.08));
  transition: transform 140ms ease, filter 140ms ease;
}

.nav-choice.is-active,
.nav-choice.is-menu-open,
.nav-choice:hover {
  color: #035f71;
  background:
    linear-gradient(180deg, rgba(204, 255, 229, 0.76), rgba(235, 255, 241, 0.78));
  box-shadow:
    inset 0 -6px 0 rgba(0, 169, 165, 0.2),
    inset 0 0 0 1px rgba(0, 169, 165, 0.16);
}

.nav-choice.is-active .nav-art-icon,
.nav-choice.is-menu-open .nav-art-icon,
.nav-choice:hover .nav-art-icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 0 rgba(0, 135, 131, 0.12));
}

.fan-subnav {
  position: absolute;
  z-index: 20;
  top: var(--fan-subnav-top, 100%);
  left: var(--fan-subnav-left, 0);
  width: 320px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(29, 105, 125, 0.28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(237, 252, 250, 0.98), rgba(224, 243, 248, 0.98));
}

.fan-subnav[hidden] {
  display: none;
}

.fan-subnav.is-open {
  animation: fan-subnav-reveal 220ms ease-out;
  box-shadow: 0 16px 28px rgba(8, 33, 51, 0.16);
}

@keyframes fan-subnav-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fan-subnav-choice {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  color: #29465a;
  border: 1px solid rgba(48, 105, 135, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.fan-subnav-choice > svg {
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 1px solid rgba(0, 169, 165, 0.2);
  border-radius: 7px;
  color: #087d7d;
  background: #e7f9f6;
}

.fan-subnav-choice span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.fan-subnav-choice strong,
.fan-subnav-choice small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fan-subnav-choice strong {
  color: inherit;
  font-size: 0.82rem;
}

.fan-subnav-choice small {
  color: #718797;
  font-size: 0.69rem;
  font-weight: 700;
}

.fan-subnav-choice:hover,
.fan-subnav-choice.is-active {
  color: #075f68;
  border-color: rgba(0, 169, 165, 0.42);
  background: #fff;
  transform: translateY(-1px);
}

.fan-subnav-choice.is-active {
  box-shadow: inset 0 -3px 0 #16b9ae, 0 7px 16px rgba(23, 83, 104, 0.1);
}

.fan-tool-panels {
  display: grid;
}

.fan-tool-panel {
  display: none;
}

.fan-tool-panel.is-active {
  display: block;
  animation: fan-tool-reveal 180ms ease-out;
}

@keyframes fan-tool-reveal {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-user {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.nav-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  padding: 2px;
  background: #edf7ff;
}

.nav-user strong,
.nav-user small {
  display: block;
  text-align: left;
  line-height: 1.1;
}

.nav-user small {
  color: var(--muted);
  font-size: 0.76rem;
}

.nav-toggle {
  display: none;
  margin-left: auto;
}

.command-center {
  position: relative;
  z-index: 1;
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
  align-items: center;
  gap: 40px;
  padding-top: 36px;
}

.command-copy p {
  max-width: 620px;
  color: #435265;
  font-size: 1.05rem;
}

.eyebrow {
  color: #007675;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.command-scene {
  position: relative;
  min-height: 320px;
  background:
    linear-gradient(30deg, rgba(255, 255, 255, 0.22) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.22) 87.5%) 0 0 / 44px 44px,
    linear-gradient(150deg, rgba(255, 255, 255, 0.18) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.18) 87.5%) 0 0 / 44px 44px,
    linear-gradient(180deg, #39d0db, #9af0b4 55%, #ffd465);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 -8px 0 rgba(22, 35, 49, 0.08);
  overflow: hidden;
}

.command-scene::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 10%;
  bottom: 32px;
  height: 92px;
  transform: skewX(-28deg);
  background:
    linear-gradient(90deg, rgba(22, 35, 49, 0.08) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(#fff4c5, #ffe19b);
  border: 3px solid rgba(22, 35, 49, 0.12);
  border-radius: 6px;
}

.scene-avatar {
  position: absolute;
  z-index: 2;
  width: 124px;
  filter: drop-shadow(0 14px 12px rgba(22, 35, 49, 0.18));
}

.scene-avatar.one {
  left: 7%;
  bottom: 52px;
}

.scene-avatar.two {
  right: 8%;
  bottom: 50px;
}

.scene-avatar.three {
  width: 112px;
  left: 42%;
  bottom: 82px;
}

.iso-tile {
  position: absolute;
  border: 3px solid rgba(22, 35, 49, 0.1);
  border-radius: 6px;
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.08);
}

.iso-tile.a {
  width: 72px;
  height: 54px;
  top: 40px;
  right: 18%;
  background: linear-gradient(135deg, var(--coral), #ff8a57);
}

.iso-tile.b {
  width: 92px;
  height: 62px;
  top: 58px;
  left: 14%;
  background: linear-gradient(135deg, var(--blue), #43c6ff);
}

.iso-tile.c {
  width: 62px;
  height: 62px;
  top: 96px;
  right: 38%;
  background: linear-gradient(135deg, var(--amber), #ff9a3d);
}

.app-shell {
  position: relative;
  z-index: 1;
  padding: 28px 0 46px;
}

.view-panel {
  display: none;
}

.view-panel.is-active {
  display: block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card,
.section-block,
.article-card,
.badge-item,
.furni-card,
.team-card,
.user-card,
.partner-card,
.shop-grid article,
.profile-card,
.profile-mini {
  border-radius: var(--radius);
  border: 1px solid rgba(217, 226, 238, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 251, 255, 0.86)),
    var(--paper-glass);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.stat-card {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  border-top: 4px solid var(--teal);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.stat-card:nth-child(2) { border-top-color: var(--blue); }
.stat-card:nth-child(3) { border-top-color: var(--coral); }
.stat-card:nth-child(4) { border-top-color: var(--amber); }
.stat-card:nth-child(5) { border-top-color: var(--violet); }
.stat-card:nth-child(6) { border-top-color: var(--green); }

.stat-card svg {
  color: var(--teal);
}

.stat-card:hover,
.article-card:hover,
.furni-card:hover,
.team-card:hover,
.user-card:hover,
.partner-card:hover,
.profile-mini:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 111, 237, 0.28);
  box-shadow: var(--shadow-hover);
}

.stat-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.stat-card strong {
  font-size: 1.35rem;
}

.dashboard-layout,
.two-column,
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 20px;
  align-items: start;
}

body[data-active-view="home"] .app-shell {
  width: min(1740px, calc(100% - 40px));
}

.view-panel[data-view-panel="home"] .dashboard-layout {
  grid-template-columns: 460px minmax(0, 1fr) 330px;
  gap: 24px;
}

.home-left-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.home-badge-rail .section-heading {
  align-items: flex-start;
}

.home-badge-rail .section-heading h2 {
  font-size: 1.45rem;
}

.home-carousel-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-carousel-controls .icon-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
}

.home-carousel-controls .icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

.home-carousel-page-status {
  display: block;
  margin-top: 11px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
}

.home-badge-rail .compact-grid.badge-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.home-badge-rail .badge-item.is-compact {
  min-height: 132px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 6px;
  padding: 9px 10px;
  text-align: center;
}

.home-badge-rail .badge-item.is-compact .badge-art {
  grid-row: auto;
}

.home-badge-rail .badge-item.is-compact strong,
.home-badge-rail .badge-item.is-compact span {
  width: 100%;
}

.home-badge-rail .badge-item.is-compact span {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-comments-section {
  padding: 16px;
}

.chat-panel .chat-message-content header strong {
  flex: 1 1 90px;
  min-width: 0;
}

.chat-panel .chat-role {
  max-width: 100%;
}

.chat-panel .chat-message-content time {
  flex: 0 0 auto;
}

.home-comments-section .section-heading {
  margin-bottom: 12px;
}

#homeComments {
  display: grid;
  gap: 9px;
  min-height: 306px;
}

#homeComments .home-comment-card {
  min-height: 96px;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  overflow: hidden;
  padding: 10px;
  border-color: rgba(47, 111, 237, 0.22);
  background:
    radial-gradient(circle at 18% 110%, rgba(47, 111, 237, 0.16), transparent 42%),
    linear-gradient(145deg, #ffffff, #eef7ff);
  box-shadow: inset 0 -22px 34px rgba(47, 111, 237, 0.08);
}

#homeComments .comment-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

#homeComments .comment-avatar img {
  width: 62px;
  height: 62px;
  transform: translateY(6px);
}

#homeComments .comment-copy {
  min-width: 0;
  gap: 4px;
}

#homeComments .home-comment-topline {
  display: flex;
  align-items: center;
  gap: 8px;
}

#homeComments .comment-copy strong {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
}

#homeComments .comment-row p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#homeComments .comment-row span {
  font-size: 0.7rem;
}

#homeComments .comment-row-meta {
  align-items: flex-end;
}

#homeComments .comment-row-meta span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#homeComments .home-comment-card > .moderation-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

#homeComments .home-comment-card:has(> .moderation-delete) .home-comment-topline {
  padding-right: 36px;
}

.home-comments-section .home-carousel-page-status {
  margin-top: 9px;
}

.main-stack,
.side-stack {
  display: grid;
  gap: 18px;
}

.section-block {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.section-block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--teal), var(--amber), var(--coral), var(--blue), var(--violet));
}

.section-block::after {
  content: "";
  position: absolute;
  inset: 5px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  pointer-events: none;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-note {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
}

.admin-command .panel-note {
  color: #b9cfe6;
}

.section-heading.compact {
  align-items: center;
}

.spotlight-article {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr);
  gap: 0;
  overflow: hidden;
  border-radius: 7px;
  background:
    linear-gradient(135deg, #0c283e, #124d5c);
  border: 1px solid rgba(15, 82, 96, 0.44);
  box-shadow: 0 18px 38px rgba(15, 42, 62, 0.18);
}

.spotlight-art {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0, 169, 165, 0.22), rgba(255, 208, 92, 0.2)),
    #e9f6fa;
}

.spotlight-art img {
  width: 100%;
  height: 330px;
  object-fit: cover;
}

.spotlight-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 60%, rgba(12, 40, 62, 0.52)),
    linear-gradient(0deg, rgba(8, 27, 42, 0.24), transparent 45%);
}

.spotlight-index {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 2.7rem;
  font-weight: 1000;
  line-height: 1;
}

.spotlight-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 28px;
  color: #fff;
}

.spotlight-topline,
.spotlight-footer,
.spotlight-actions,
.article-byline,
.article-card-footer,
.article-metrics,
.article-detail-meta {
  display: flex;
  align-items: center;
}

.spotlight-topline {
  justify-content: space-between;
  gap: 12px;
}

.spotlight-topline > span:last-child,
.spotlight-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #b8d6df;
  font-size: 0.76rem;
  font-weight: 850;
}

.spotlight-topline svg,
.spotlight-actions svg {
  width: 15px;
  height: 15px;
}

.spotlight-copy h3 {
  margin: 24px 0 10px;
  color: #fff;
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1.05;
}

.spotlight-copy > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #c8dce4;
  font-size: 0.96rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.spotlight-footer {
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 24px;
}

.spotlight-author {
  display: flex;
  align-items: center;
  gap: 9px;
}

.author-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 222, 129, 0.34);
  border-radius: 6px;
  color: #ffe18a;
  background: rgba(255, 255, 255, 0.08);
}

.spotlight-author small,
.spotlight-author strong {
  display: block;
  line-height: 1.15;
}

.spotlight-author small {
  color: #90b2c1;
  font-size: 0.65rem;
}

.spotlight-author strong {
  color: #fff;
  font-size: 0.82rem;
}

.spotlight-actions {
  gap: 10px;
}

.spotlight-actions .primary-button {
  min-height: 42px;
  margin-left: 3px;
}

.article-strip,
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.article-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-card {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-color: rgba(184, 204, 223, 0.84);
  background: #fff;
  box-shadow: 0 13px 28px rgba(18, 47, 68, 0.09);
  overflow: hidden;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.article-card.compact {
  min-height: 360px;
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 148, 146, 0.44);
  box-shadow: 0 20px 38px rgba(18, 47, 68, 0.15);
}

.article-card-media {
  position: relative;
  width: 100%;
  height: 190px;
  flex: 0 0 190px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(184, 204, 223, 0.6);
  background: #dfeff5;
}

.article-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
  background: #edf7ff;
}

.article-card:hover .article-card-cover {
  transform: scale(1.035);
}

.article-card-media .pill {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
}

.article-read-cue {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 6px;
  color: #fff;
  background: rgba(9, 35, 53, 0.7);
}

.article-card-body {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
}

.article-byline {
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.article-byline span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-byline svg,
.article-metrics svg {
  width: 14px;
  height: 14px;
}

.article-card h3 {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  color: #142b3f;
  font-size: 1.08rem;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.article-card-footer {
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(204, 218, 232, 0.7);
}

.article-metrics {
  gap: 9px;
}

.article-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.article-open-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  color: #087c7b;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 950;
}

.article-open-button svg {
  width: 15px;
  transition: transform 150ms ease;
}

.article-open-button:hover svg {
  transform: translateX(3px);
}

.pill {
  width: max-content;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: #fff;
  border-radius: 6px;
  border: 1px solid rgba(255, 233, 166, 0.36);
  background: linear-gradient(135deg, #007e83, #255c9e);
  box-shadow: 0 5px 12px rgba(10, 46, 67, 0.2);
  font-size: 0.76rem;
  font-weight: 950;
}

.news-archive {
  padding: 24px;
}

.news-archive .news-toolbar {
  align-items: center;
  margin-bottom: 14px;
}

.news-archive .search-box {
  min-width: min(360px, 100%);
  border-color: rgba(14, 113, 120, 0.24);
  background: #f7fbfd;
  box-shadow: inset 0 1px 3px rgba(23, 58, 80, 0.05);
}

.news-archive .segment-row {
  display: flex;
  gap: 7px;
  margin-bottom: 20px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid rgba(188, 207, 224, 0.72);
  border-radius: 7px;
  background: #eef5f8;
}

.news-archive .segment {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid transparent;
  background: transparent;
}

.news-archive .segment.is-active {
  color: #fff;
  border-color: rgba(255, 220, 127, 0.38);
  background: linear-gradient(135deg, #087d7e, #285d9b);
  box-shadow: 0 6px 14px rgba(20, 76, 104, 0.18);
}

.badge-grid,
.furni-grid,
.team-grid,
.user-grid,
.partner-grid,
.shop-grid,
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.view-panel[data-view-panel="hotel"] .badge-grid {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px;
}

.compact-grid.badge-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.compact-grid.furni-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.badge-item {
  min-height: 184px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 7px;
  padding: 16px 12px 14px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.98)),
    var(--paper);
  box-shadow: inset 0 -4px 0 rgba(47, 111, 237, 0.08), 0 10px 22px rgba(22, 35, 49, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.badge-item:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 111, 237, 0.46);
  box-shadow: inset 0 -4px 0 rgba(0, 169, 165, 0.14), 0 18px 32px rgba(22, 35, 49, 0.11);
}

.badge-item.is-compact {
  min-height: 112px;
  gap: 6px;
  padding: 12px 8px;
}

.badge-art {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f3f8ff;
  border: 1px solid rgba(217, 226, 238, 0.95);
}

.badge-item img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  image-rendering: pixelated;
}

.badge-item.is-compact .badge-art {
  width: 52px;
  height: 52px;
  background: transparent;
  border: 0;
}

.badge-item.is-compact img {
  width: 46px;
  height: 46px;
}

.badge-art.is-missing::before {
  content: "?";
  color: var(--muted);
  font-weight: 950;
}

.badge-item strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-item span,
.furni-card span,
.furni-card em,
.team-card span,
.user-card span,
.partner-card span,
.shop-grid span {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.badge-item p {
  display: -webkit-box;
  min-height: 34px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.badge-item em {
  max-width: 100%;
  padding: 3px 8px;
  overflow: hidden;
  color: #1a5a8f;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: #eaf5ff;
}

.archive-summary {
  color: #307093;
  font-size: 0.92rem;
}

.check-control.is-disabled {
  opacity: 0.48;
}

.furni-card {
  min-height: 158px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px;
}

.furni-icon-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
  margin-bottom: auto;
  align-self: flex-start;
  padding: 6px;
  border-radius: 7px;
  background: #f3f8ff;
  border: 1px solid var(--line);
}

.pixel-furni {
  width: 62px;
  height: 54px;
  margin-bottom: auto;
  border: 3px solid rgba(22, 35, 49, 0.14);
  border-radius: 6px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, var(--blue) 50%, #1f4faa 50%);
}

.pixel-furni.rare { background: linear-gradient(#5be39d 0 42%, #0d8875 42%); }
.pixel-furni.ltd { background: linear-gradient(135deg, #ffe169 50%, #b77b00 50%); }
.pixel-furni.classic { background: linear-gradient(#ff8f80 60%, #c9473d 60%); }
.pixel-furni.nft { background: linear-gradient(135deg, #a47dff 50%, #422a96 50%); }
.pixel-furni.clothing { background: linear-gradient(90deg, #fff 0 25%, #ff6195 25% 70%, #2f6fed 70%); }
.pixel-furni.room { background: linear-gradient(#ffe7a6 50%, #00a9a5 50%); }
.pixel-furni.ducket { background: linear-gradient(135deg, #ffc83d 50%, #ff8e2e 50%); }

.price-list,
.price-table,
.comment-list,
.leader-list {
  display: grid;
  gap: 9px;
}

.home-ranking-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: -4px 0 12px;
}

.home-ranking-tabs .segment {
  min-height: 36px;
  justify-content: center;
  padding-inline: 8px;
  font-size: 0.78rem;
}

html[data-theme="pixel"] .home-ranking-tabs {
  padding: 4px;
  border: 1px solid #9b9e8f;
  border-radius: 3px;
  background: #ded4ba;
}

html[data-theme="pixel"] .home-ranking-tabs .segment.is-active {
  color: #2d3d3f;
  border-color: #886a25;
  background: #dfb94d;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .home-ranking-tabs {
  border-color: #657d81;
  background: #29434c;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .home-ranking-tabs .segment.is-active {
  color: #2f3d39;
  background: #d5b65b;
}

/* Home community room: full-width Habbo-style social scene */
body[data-active-view="home"] .command-center {
  width: min(1180px, calc(100% - 40px));
  min-height: 410px;
  display: block;
  padding: 26px 0 32px;
}

body[data-active-view="home"] .command-scene {
  width: 100%;
  min-height: 390px;
  opacity: 1;
  border: 3px solid #375860;
  border-radius: 5px;
  background: #d8c99f;
  box-shadow:
    7px 7px 0 rgba(27, 51, 57, 0.38),
    inset 0 0 0 3px rgba(255, 246, 207, 0.4);
  transform: none;
}

body[data-active-view="home"] .command-scene::before {
  z-index: 2;
  inset: auto 3% 22px;
  height: 185px;
  transform: perspective(560px) rotateX(51deg);
  transform-origin: bottom;
  border: 3px solid #826f49;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(101, 78, 42, 0.22) 2px, transparent 2px) 0 0 / 58px 100%,
    linear-gradient(rgba(101, 78, 42, 0.14) 2px, transparent 2px) 0 0 / 100% 43px,
    linear-gradient(180deg, #f2d999, #c99c56);
  box-shadow: 0 13px 18px rgba(48, 39, 23, 0.24);
}

body[data-active-view="home"] .command-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 34px 34px;
}

.scene-room-wall {
  position: absolute;
  z-index: 1;
  inset: 0 0 138px;
  overflow: hidden;
  border-bottom: 8px solid #816b43;
  background:
    linear-gradient(90deg, rgba(124, 92, 47, 0.12) 2px, transparent 2px) 0 0 / 76px 100%,
    linear-gradient(180deg, #dccb9f, #c6b384);
  box-shadow: inset 0 -8px 0 #a58d5b;
}

.scene-window {
  position: absolute;
  top: 48px;
  left: 50%;
  width: 38%;
  height: 125px;
  overflow: hidden;
  border: 7px solid #5d4d36;
  background:
    linear-gradient(rgba(19, 55, 70, 0.12), rgba(19, 55, 70, 0.12)),
    url("assets/habbosal-city-bg.webp") center 39% / 760px auto;
  box-shadow:
    inset 0 0 0 3px #b99b62,
    5px 5px 0 rgba(67, 54, 35, 0.22);
}

.scene-window::before,
.scene-window::after {
  content: "";
  position: absolute;
  z-index: 1;
  background: #66543a;
}

.scene-window::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 5px;
}

.scene-window::after {
  right: 0;
  bottom: 48%;
  left: 0;
  height: 5px;
}

.scene-wall-light {
  position: absolute;
  top: 70px;
  width: 22px;
  height: 55px;
  border: 3px solid #6f5c3c;
  background: linear-gradient(90deg, #d9ad38, #fff0a0, #d9ad38);
  box-shadow: 0 0 18px rgba(255, 211, 88, 0.52);
}

.scene-wall-light::after {
  content: "";
  position: absolute;
  top: 52px;
  left: 7px;
  width: 3px;
  height: 30px;
  background: #69563b;
}

.scene-wall-light.left {
  left: 24%;
}

.scene-wall-light.right {
  right: 24%;
}

.scene-display {
  position: absolute;
  bottom: -116px;
  width: 118px;
  height: 146px;
  display: grid;
  place-items: center;
  padding: 10px 10px 30px;
  border: 3px solid #5a4d39;
  background: linear-gradient(145deg, #f1e7c9, #c8b782);
  box-shadow: 5px 5px 0 rgba(56, 46, 31, 0.25);
}

.scene-display::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid rgba(121, 92, 35, 0.28);
  background: rgba(255, 250, 218, 0.25);
}

.scene-display img {
  position: relative;
  z-index: 1;
  max-width: 58px;
  max-height: 58px;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 rgba(51, 42, 29, 0.22));
}

.scene-display span {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 7px;
  left: 8px;
  padding: 4px;
  color: #fff0ad;
  border: 2px solid #51452f;
  background: #735d2f;
  font-size: 0.62rem;
  font-weight: 1000;
  text-align: center;
}

.scene-display-rare {
  left: 7%;
}

.scene-display-ltd {
  right: 7%;
}

body[data-active-view="home"] .scene-avatar {
  z-index: 5;
  width: 154px;
  filter: drop-shadow(0 14px 7px rgba(55, 42, 25, 0.32));
}

body[data-active-view="home"] .scene-avatar.one {
  left: 20%;
  bottom: 42px;
}

body[data-active-view="home"] .scene-avatar.two {
  right: 20%;
  bottom: 42px;
}

body[data-active-view="home"] .scene-avatar.three {
  width: 146px;
  left: calc(50% - 73px);
  bottom: 68px;
}

body[data-active-view="home"] .scene-speech {
  top: 80px;
  left: 27%;
}

body[data-active-view="home"] .scene-heading {
  top: 18px;
  right: 22px;
  left: 22px;
}

body[data-active-view="home"] .scene-caption {
  right: 50%;
  bottom: 14px;
  transform: translateX(50%);
}

html[data-theme="pixel"][data-pixel-tone="dark"] .scene-room-wall {
  border-bottom-color: #59635d;
  background:
    linear-gradient(90deg, rgba(227, 235, 218, 0.04) 2px, transparent 2px) 0 0 / 76px 100%,
    linear-gradient(180deg, #4e625e, #3f554f);
  box-shadow: inset 0 -8px 0 #6f7668;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .command-scene {
  border-color: #789092;
  background: #435853;
}

@media (max-width: 1040px) {
  body[data-active-view="home"] .command-center {
    width: min(760px, calc(100% - 28px));
    min-height: 340px;
    padding: 18px 0 26px;
  }

  body[data-active-view="home"] .command-scene {
    display: block;
    min-height: 320px;
  }

  body[data-active-view="home"] .scene-avatar {
    width: 124px;
  }

  body[data-active-view="home"] .scene-avatar.one {
    left: 15%;
  }

  body[data-active-view="home"] .scene-avatar.two {
    right: 15%;
  }

  body[data-active-view="home"] .scene-avatar.three {
    width: 118px;
    left: calc(50% - 59px);
  }
}

@media (max-width: 620px) {
  body[data-active-view="home"] .command-center {
    width: min(100% - 20px, 430px);
    min-height: 285px;
  }

  body[data-active-view="home"] .command-scene {
    min-height: 265px;
  }

  .scene-room-wall {
    bottom: 104px;
  }

  .scene-window {
    top: 48px;
    width: 48%;
    height: 88px;
  }

  .scene-wall-light {
    display: none;
  }

  .scene-display {
    width: 78px;
    height: 108px;
    bottom: -88px;
  }

  .scene-display img {
    max-width: 42px;
    max-height: 42px;
  }

  body[data-active-view="home"] .scene-avatar {
    width: 92px;
    bottom: 34px;
  }

  body[data-active-view="home"] .scene-avatar.one {
    left: 8%;
  }

  body[data-active-view="home"] .scene-avatar.two {
    right: 8%;
  }

  body[data-active-view="home"] .scene-avatar.three {
    width: 88px;
    left: calc(50% - 44px);
    bottom: 55px;
  }

  body[data-active-view="home"] .scene-speech,
  body[data-active-view="home"] .scene-caption {
    display: none;
  }

  body[data-active-view="home"] .scene-heading {
    top: 10px;
    right: 10px;
    left: 10px;
  }
}

/* Full article community sidebar: rating and compact comments */
.article-page-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(286px, 338px);
  column-gap: 28px;
  align-items: start;
}

#articleDetail {
  display: contents;
}

.article-page .article-detail-hero {
  grid-column: 1 / -1;
}

.article-main-column {
  min-width: 0;
  grid-column: 1;
}

.article-page .article-main-column .article-detail-meta,
.article-page .article-main-column .article-detail-lead,
.article-page .article-main-column .article-body {
  width: 100%;
}

.article-community-sidebar {
  min-width: 0;
  grid-column: 2;
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.article-rating-card,
.article-comments-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-elevated, var(--paper));
  box-shadow: 0 7px 18px rgba(14, 42, 55, 0.07);
}

.article-rating-card {
  padding: 18px;
}

.article-rating-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 9px;
}

.article-rating-summary > strong {
  min-width: 64px;
  color: var(--ink);
  font-size: 2.25rem;
  line-height: 1;
}

.article-rating-summary > div > span,
.article-rating-hint {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.article-rating-average-stars,
.article-rating-buttons {
  display: flex;
  align-items: center;
  gap: 3px;
}

.article-rating-average-stars svg {
  width: 17px;
  height: 17px;
  color: #aab3b3;
}

.article-rating-average-stars svg.is-active {
  color: #e5a928;
  fill: currentColor;
}

.article-rating-buttons {
  gap: 5px;
  margin-top: 15px;
}

.article-rating-buttons button {
  width: 38px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #87999b;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.article-rating-buttons button svg {
  width: 20px;
}

.article-rating-buttons button:hover,
.article-rating-buttons button:focus-visible,
.article-rating-buttons button.is-active {
  color: #d99a16;
  border-color: #d7aa48;
  background: rgba(229, 169, 40, 0.12);
  outline: none;
}

.article-rating-buttons button.is-active svg {
  fill: currentColor;
}

.article-rating-buttons button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.article-rating-hint {
  min-height: 1em;
  margin: 9px 0 0;
}

.article-comments-panel {
  padding: 16px;
}

.article-page .article-comments-panel .article-comments-heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 12px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.article-page .article-comments-panel .article-comments-heading h3 {
  font-size: 1rem;
}

.article-comment-count {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.article-side-comments {
  max-height: 560px;
  display: grid;
  gap: 9px;
  margin: 12px -5px 14px 0;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.article-side-comment {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

.article-side-comment .comment-avatar {
  width: 42px;
  height: 42px;
}

.article-side-comment .comment-copy {
  min-width: 0;
}

.article-side-comment .comment-copy > strong {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-side-comment .comment-copy > p {
  margin: 4px 0 8px;
  color: var(--ink-soft, var(--ink));
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.article-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.article-comment-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.article-comment-actions > span svg {
  width: 12px;
}

.comment-like-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
}

.comment-like-button svg {
  width: 13px;
  height: 13px;
}

.comment-like-button:hover,
.comment-like-button.is-liked {
  color: #cf4f69;
  border-color: rgba(207, 79, 105, 0.48);
  background: rgba(207, 79, 105, 0.09);
}

.comment-like-button.is-liked svg {
  fill: currentColor;
}

.article-side-comment .moderation-delete-button {
  position: absolute;
  top: 7px;
  right: 7px;
}

.article-page .article-comments-panel .article-page-comment-form,
.article-page .article-comments-panel #commentStatus {
  width: 100%;
}

.article-page .article-comments-panel .article-page-comment-form {
  margin-top: 0;
  padding: 12px;
  box-shadow: none;
}

.article-page .article-comments-panel .article-page-comment-form textarea {
  min-height: 78px;
  resize: vertical;
}

.article-page .article-comments-panel .article-page-comment-form .primary-button {
  width: 100%;
  justify-content: center;
}

html[data-theme="pixel"] .article-rating-card,
html[data-theme="pixel"] .article-comments-panel {
  border: 2px solid #657a79;
  border-radius: 3px;
  background: #f1e7cf;
  box-shadow: 3px 3px 0 rgba(44, 65, 67, 0.22);
}

html[data-theme="pixel"] .article-side-comment,
html[data-theme="pixel"] .article-page .article-comments-panel .article-page-comment-form {
  border: 1px solid #9daaa3;
  border-radius: 2px;
  background: #faf6e8;
}

html[data-theme="pixel"] .article-rating-buttons button {
  border-radius: 2px;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .article-rating-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .article-comments-panel {
  border-color: #789092;
  background: #344d55;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .article-side-comment,
html[data-theme="pixel"][data-pixel-tone="dark"] .article-page .article-comments-panel .article-page-comment-form {
  border-color: #6f8588;
  background: #3c565d;
}

@media (max-width: 900px) {
  .article-page-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-main-column,
  .article-community-sidebar {
    grid-column: 1;
  }

  .article-community-sidebar {
    margin-top: 0;
  }

  .article-side-comments {
    max-height: none;
  }
}

@media (max-width: 620px) {
  .article-page-card {
    padding-right: 16px;
    padding-bottom: 18px;
    padding-left: 16px;
  }

  .article-page .article-detail-hero {
    min-height: 300px;
    margin-right: -16px;
    margin-left: -16px;
  }

  .article-page .article-detail-overlay {
    right: 20px;
    bottom: 22px;
    left: 20px;
  }

  .article-rating-buttons button {
    flex: 1;
  }
}

.price-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(90deg, #fff, #f2fffc);
  box-shadow: inset 4px 0 0 rgba(0, 169, 165, 0.28);
}

.price-row-visual {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(0, 169, 165, 0.2);
  border-radius: 6px;
  background: #edf7ff;
}

.price-row-visual img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  image-rendering: pixelated;
}

.price-row-visual img.is-icon-fallback {
  padding: 6px;
}

.price-row-visual .pixel-furni {
  width: 36px;
  height: 32px;
  margin: 0;
  border-width: 2px;
}

.price-row-copy {
  min-width: 0;
}

.price-row strong,
.price-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-row b {
  color: #213041;
  font-size: 0.82rem;
  white-space: nowrap;
}

.price-row em {
  justify-self: end;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 950;
}

.price-row em.up { color: #087c54; }
.price-row em.down { color: #c54046; }
.price-row em.new { color: var(--blue); }

.price-board {
  overflow: visible;
  color: #fff;
  border-color: rgba(29, 93, 190, 0.72);
  background:
    linear-gradient(180deg, rgba(11, 4, 28, 0.96), rgba(5, 2, 16, 0.98)),
    #070313;
  box-shadow: 0 22px 54px rgba(5, 2, 16, 0.28);
}

.price-board::before {
  display: none;
}

.price-search-panel,
.price-collections-head,
.price-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.price-search-panel {
  align-items: flex-end;
  margin-bottom: 28px;
}

.price-search-panel h2,
.price-collections-head h3,
.price-results-head h3 {
  color: #fff;
}

.price-search-box {
  flex: 1;
  max-width: none;
  min-width: min(520px, 100%);
}

.price-search-box svg {
  left: auto;
  right: 18px;
  top: 18px;
}

.price-search-box input {
  min-height: 58px;
  padding: 0 54px 0 18px;
  color: #172331;
  border: 3px solid #d7d7d7;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #f5f5f5;
}

.price-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.price-collections-head {
  margin: 8px 0 14px;
}

.price-collections-head h3,
.price-results-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
}

.price-collections-head svg {
  color: var(--amber);
}

.price-board .select-control {
  color: #fff;
  border-color: rgba(29, 93, 190, 0.75);
  background: #120735;
}

.price-collections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  max-height: 150px;
  overflow: auto;
  padding: 0 6px 10px 0;
  margin-bottom: 30px;
}

.price-collection-card {
  position: relative;
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #fff;
  border: 2px solid rgba(29, 93, 190, 0.78);
  border-radius: 8px;
  background: #120735;
  box-shadow: inset 0 0 0 1px rgba(70, 121, 255, 0.16);
}

.price-collection-card.is-active,
.price-collection-card:hover {
  border-color: #245dff;
  background: #18094a;
}

.collection-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--amber);
  background: #05020f;
}

.price-collection-card strong {
  overflow: hidden;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-collection-card em {
  min-width: 32px;
  padding: 3px 7px;
  color: #fff;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
  text-align: center;
  border: 1px solid #0d56bd;
  border-radius: 8px;
  background: #070313;
}

.price-results-head {
  margin: 4px 0 18px;
}

.price-results-head strong {
  color: #9fc6db;
  font-size: 0.94rem;
}

.price-board .price-table {
  grid-template-columns: repeat(3, minmax(270px, 1fr));
  gap: 30px;
}

.price-card {
  position: relative;
  min-height: 326px;
  overflow: hidden;
  color: #172331;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background-color: #fbfcff;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(64, 196, 137, 0.1), transparent 32%),
    linear-gradient(30deg, rgba(38, 47, 61, 0.09) 1px, transparent 1px),
    linear-gradient(150deg, rgba(38, 47, 61, 0.09) 1px, transparent 1px);
  background-position: 0 0, 0 0;
  background-size: 64px 36px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  cursor: pointer;
}

.price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.36);
}

.price-card:focus-visible,
.price-row:focus-visible,
.furni-card:focus-visible {
  outline: 3px solid rgba(32, 198, 167, 0.7);
  outline-offset: 3px;
}

.price-card-tag {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 40px);
}

.price-card-tag img,
.price-card-tag .pixel-furni {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  image-rendering: pixelated;
  padding: 4px;
  border-radius: 7px;
  background: rgba(22, 35, 49, 0.16);
}

.price-card-tag strong {
  max-width: 210px;
  padding: 7px 14px;
  overflow: hidden;
  color: #fff;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 4px;
  background: rgba(119, 124, 131, 0.52);
}

.price-card-stage {
  position: absolute;
  inset: 56px 18px 72px;
  display: grid;
  place-items: center;
}

.price-furni-image {
  max-width: min(280px, 88%);
  max-height: 206px;
  object-fit: contain;
  image-rendering: pixelated;
  transform: scale(1.28);
  transform-origin: center;
  filter: drop-shadow(0 16px 8px rgba(0, 0, 0, 0.2));
}

.price-furni-image.is-icon-fallback {
  width: 122px;
  height: 122px;
  max-width: none;
  max-height: none;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(28, 41, 56, 0.08);
  transform: scale(1.45);
}

.price-card-stage .pixel-furni {
  width: 118px;
  height: 104px;
  margin: 0;
  border-radius: 12px;
  transform: scale(1.15);
}

.price-card-value {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 9px 16px;
  color: #fff;
  border-radius: 8px;
  background: rgba(44, 190, 107, 0.9);
}

.price-card.down .price-card-value {
  background: rgba(239, 68, 68, 0.9);
}

.price-card.new .price-card-value {
  background: rgba(47, 111, 237, 0.9);
}

.price-card-value b {
  font-size: 1.28rem;
  line-height: 1;
}

.price-card-value em {
  padding: 5px 8px;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 950;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.14);
}

.comment-row {
  position: relative;
  min-height: 82px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 9px 12px 9px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.comment-row.is-profile-link,
.furni-comment.is-profile-link {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.comment-row.is-profile-link:hover,
.comment-row.is-profile-link:focus-visible,
.furni-comment.is-profile-link:hover,
.furni-comment.is-profile-link:focus-visible {
  border-color: rgba(21, 179, 166, 0.72);
  outline: none;
  background: #f4fffc;
  box-shadow: 0 10px 24px rgba(16, 112, 111, 0.12);
  transform: translateY(-2px);
}

.comment-row.is-profile-link:hover .comment-avatar,
.comment-row.is-profile-link:focus-visible .comment-avatar,
.furni-comment.is-profile-link:hover > img,
.furni-comment.is-profile-link:focus-visible > img {
  border-color: rgba(21, 179, 166, 0.65);
  box-shadow: 0 0 0 3px rgba(21, 179, 166, 0.1);
}

.comment-avatar {
  width: 58px;
  height: 62px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(49, 199, 179, 0.16), rgba(67, 116, 224, 0.14)),
    #eef8fc;
}

.comment-avatar img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  transform: translateY(7px);
  image-rendering: auto;
}

.comment-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.comment-copy strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.comment-profile-cue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #078f86;
  font-size: 0.67rem;
  font-weight: 900;
}

.comment-profile-cue svg {
  width: 13px;
  height: 13px;
}

.comment-row p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
}

.comment-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.comment-row span svg {
  width: 13px;
  height: 13px;
}

.leader-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(90deg, #fff, #fff8df);
}

.leader-row > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #553b00;
  background: var(--amber);
  font-weight: 950;
}

.leader-row img {
  width: 38px;
  height: 38px;
  padding: 2px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  border-radius: 6px;
  background: #edf7ff;
}

.leader-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 850;
}

.new-member-list {
  display: grid;
  gap: 9px;
}

.home-new-members {
  border-color: rgba(24, 190, 181, 0.34);
  background:
    radial-gradient(circle at 92% 8%, rgba(107, 84, 230, 0.16), transparent 30%),
    radial-gradient(circle at 8% 96%, rgba(31, 210, 187, 0.16), transparent 34%),
    linear-gradient(150deg, rgba(8, 28, 42, 0.98), rgba(12, 33, 49, 0.96));
  box-shadow: inset 0 1px 0 rgba(105, 244, 226, 0.16), 0 22px 46px rgba(2, 10, 18, 0.2);
}

.home-new-members::after {
  content: "";
  position: absolute;
  inset: auto 14px 12px 14px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(31, 210, 187, 0.36), rgba(93, 131, 255, 0.42), transparent);
  opacity: 0.8;
}

.new-member-row {
  min-height: 86px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 11px 12px;
  border: 1px solid rgba(64, 113, 145, 0.62);
  border-radius: var(--radius);
  color: #eaf4fb;
  background:
    radial-gradient(circle at 90% 20%, rgba(66, 115, 218, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(11, 31, 45, 0.92), rgba(9, 26, 39, 0.96));
  box-shadow: inset 4px 0 0 rgba(31, 210, 187, 0.26), inset 0 -18px 36px rgba(44, 89, 172, 0.08);
}

.new-member-row.is-profile-link {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.new-member-row.is-profile-link:hover,
.new-member-row.is-profile-link:focus-visible {
  border-color: rgba(21, 179, 166, 0.72);
  outline: none;
  box-shadow: inset 4px 0 0 rgba(31, 210, 187, 0.38), 0 10px 24px rgba(16, 112, 111, 0.12);
  transform: translateY(-2px);
}

.new-member-row img {
  width: 54px;
  height: 54px;
  padding: 2px;
  object-fit: contain;
  image-rendering: auto;
  border: 1px solid rgba(58, 190, 178, 0.38);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(13, 56, 72, 0.95), rgba(8, 24, 36, 0.98));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.new-member-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.new-member-row strong,
.new-member-row small {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-member-row small {
  color: #9eb4c2;
  font-size: 0.78rem;
  font-weight: 800;
}

.new-member-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9eb4c2;
  font-size: 0.72rem;
  font-weight: 850;
}

.new-member-row span svg {
  width: 13px;
  height: 13px;
}

.new-member-role {
  max-width: 128px;
  justify-self: end;
  background: rgba(8, 24, 36, 0.52);
}

.home-new-members .home-carousel-page-status {
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

.auth-tabs,
.segment-row,
.community-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tab,
.segment {
  min-height: 36px;
  padding: 0 12px;
  color: #405168;
  background: #f2f7fd;
  border: 1px solid var(--line);
}

.tab.is-active,
.segment.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: transparent;
}

.auth-link-button {
  justify-self: center;
  min-height: auto;
  padding: 2px 4px;
  color: var(--teal);
  background: transparent;
  border: 0;
  font-weight: 900;
  cursor: pointer;
}

.auth-link-button:hover {
  color: var(--blue);
  text-decoration: underline;
}

.auth-form,
.form-grid {
  display: none;
  gap: 12px;
}

.auth-form.is-active,
.form-grid {
  display: grid;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid .full-field {
  grid-column: 1 / -1;
}

label {
  display: grid;
  gap: 6px;
  color: #34465c;
  font-size: 0.88rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--ink);
  background: linear-gradient(180deg, #fff, #f8fbff);
  border: 1px solid #cad7e5;
  border-radius: var(--radius);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.inline-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.inline-form input,
.inline-form select {
  min-width: 230px;
  flex: 1;
}

.search-box {
  position: relative;
  min-width: min(280px, 100%);
}

.search-box svg {
  position: absolute;
  left: 12px;
  top: 12px;
  color: var(--muted);
}

.search-box input {
  padding-left: 40px;
}

.select-control {
  width: auto;
  min-width: 170px;
}

.check-control {
  min-height: 42px;
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.check-control input {
  width: 16px;
  min-height: 16px;
}

.status-line,
.status-panel,
.empty-state {
  margin: 12px 0 0;
  color: var(--muted);
}

.status-panel {
  min-height: 56px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #f7fbff;
}

.is-error {
  color: #b4232a !important;
}

.toast-stack {
  position: fixed;
  z-index: 10000;
  top: 22px;
  right: 22px;
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(7, 20, 34, 0.28);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(-12px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast-message.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-message.is-leaving {
  opacity: 0;
  transform: translateX(18px) scale(0.98);
}

.toast-success {
  background: linear-gradient(135deg, #0f8a58, #17a96d);
}

.toast-error {
  background: linear-gradient(135deg, #b4232a, #d43b43);
}

.toast-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.toast-icon svg,
.toast-close svg {
  width: 20px;
  height: 20px;
}

.toast-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.toast-copy strong {
  color: inherit;
  font-size: 0.92rem;
}

.toast-copy small {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
}

.toast-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 640px) {
  .toast-stack {
    top: 12px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

.verification-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7fbff;
}

.verification-panel[hidden] {
  display: none;
}

code {
  width: max-content;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: #e8eef6;
  overflow-wrap: anywhere;
}

.chat-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 255, 247, 0.94));
}

.online-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #16764e;
  font-size: 0.8rem;
  font-weight: 900;
}

.online-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #21ba69;
}

.chat-log {
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  padding-right: 4px;
}

.chat-message {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(0, 169, 165, 0.18);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.9rem;
}

.is-profile-link {
  cursor: pointer;
}

.chat-message.is-profile-link {
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.chat-message.is-profile-link:hover,
.chat-message.is-profile-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0, 169, 165, 0.52);
  box-shadow: 0 9px 20px rgba(22, 35, 49, 0.1);
  outline: none;
}

.chat-message.is-profile-link .chat-avatar,
.chat-message.is-profile-link header strong {
  cursor: pointer;
}

.chat-avatar {
  width: 42px;
  height: 42px;
  padding: 2px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  border: 1px solid rgba(0, 169, 165, 0.2);
  border-radius: 7px;
  background: #edf7ff;
}

.chat-message-content {
  min-width: 0;
}

.chat-message-content header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chat-message-content header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-content header span {
  color: var(--teal);
  font-size: 0.62rem;
  font-weight: 900;
}

.role-chip {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.role-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 3px var(--role-glow, rgba(55, 200, 186, 0.72)))
    drop-shadow(0 0 8px var(--role-glow-soft, rgba(55, 200, 186, 0.28)));
  animation: role-badge-glow 2.4s ease-in-out infinite;
}

.role-chip[data-role="kurucu"],
.role-icon[data-role="kurucu"] {
  --role-glow: rgba(255, 207, 69, 0.95);
  --role-glow-soft: rgba(255, 184, 34, 0.48);
}

.role-chip[data-role="yonetici"],
.role-icon[data-role="yonetici"] {
  --role-glow: rgba(255, 92, 104, 0.92);
  --role-glow-soft: rgba(228, 52, 69, 0.42);
}

.role-chip[data-role="moderator"],
.role-icon[data-role="moderator"] {
  --role-glow: rgba(255, 63, 143, 0.95);
  --role-glow-soft: rgba(101, 74, 232, 0.48);
}

.role-chip[data-role="mimar"],
.role-chip[data-role="bas_mimar"],
.role-chip[data-role="bas_haberci"],
.role-chip[data-role="haberci"],
.role-icon[data-role="mimar"],
.role-icon[data-role="bas_mimar"],
.role-icon[data-role="bas_haberci"],
.role-icon[data-role="haberci"] {
  --role-glow: rgba(255, 211, 85, 0.9);
  --role-glow-soft: rgba(205, 142, 35, 0.4);
}

.role-chip[data-role="oyun_destek"],
.role-chip[data-role="bas_oyun_destek"],
.role-icon[data-role="oyun_destek"] {
  --role-glow: rgba(91, 198, 255, 0.92);
  --role-glow-soft: rgba(44, 139, 218, 0.42);
}

.role-icon[data-role="bas_oyun_destek"] {
  --role-glow: rgba(91, 198, 255, 0.98);
  --role-glow-soft: rgba(44, 139, 218, 0.5);
}

.role-chip[data-role="mobinator"],
.role-chip[data-role="bas_duzenekci"],
.role-icon[data-role="mobinator"],
.role-icon[data-role="bas_duzenekci"] {
  --role-glow: rgba(55, 224, 186, 0.95);
  --role-glow-soft: rgba(24, 151, 128, 0.46);
}

.role-chip[data-role="developer"],
.role-icon[data-role="developer"] {
  --role-glow: rgba(175, 142, 255, 0.95);
  --role-glow-soft: rgba(115, 83, 225, 0.42);
}

@keyframes role-badge-glow {
  0%,
  100% {
    filter:
      drop-shadow(0 0 3px var(--role-glow, rgba(55, 200, 186, 0.72)))
      drop-shadow(0 0 7px var(--role-glow-soft, rgba(55, 200, 186, 0.28)));
  }
  50% {
    filter:
      drop-shadow(0 0 5px var(--role-glow, rgba(55, 200, 186, 0.9)))
      drop-shadow(0 0 12px var(--role-glow-soft, rgba(55, 200, 186, 0.42)));
  }
}

.chat-role {
  min-width: 0;
  color: var(--teal);
}

.chat-role-line {
  display: flex;
  min-width: 0;
  margin-top: 3px;
}

.chat-role .role-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.chat-role > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-role-line .chat-role > span {
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

.chat-message-content time {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.61rem;
  white-space: nowrap;
}

.chat-message-content p {
  margin: 3px 0 0;
  color: #43566a;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.moderation-delete {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  align-self: center;
  padding: 0;
  color: #b4232a;
  background: rgba(180, 35, 42, 0.08);
  border: 1px solid rgba(180, 35, 42, 0.2);
  border-radius: 8px;
}

.moderation-delete:hover {
  color: #fff;
  background: #c72f37;
  border-color: #c72f37;
}

.moderation-delete:disabled {
  opacity: 0.55;
  cursor: wait;
}

.moderation-delete svg {
  width: 15px;
  height: 15px;
}

.chat-message > .moderation-delete {
  position: absolute;
  top: 6px;
  right: 6px;
}

.chat-message:has(> .moderation-delete) .chat-message-content header {
  padding-right: 32px;
}

.chat-message:has(> .moderation-delete) .chat-role-line {
  padding-right: 32px;
}

.chat-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.news-toolbar {
  align-items: center;
}

.profile-panel {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 14px;
}

.profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
}

.profile-tabs .segment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.profile-tabs .segment em {
  min-width: 24px;
  min-height: 21px;
  display: inline-grid;
  place-items: center;
  padding: 2px 6px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper-soft);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 900;
}

.profile-tabs .segment.is-active em {
  color: #075f5d;
  border-color: rgba(19, 163, 149, 0.25);
  background: rgba(255, 255, 255, 0.72);
}

.profile-data-panel {
  display: none;
}

.profile-data-panel.is-active {
  display: block;
}

.profile-wardrobe {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(0, 169, 165, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(237, 255, 250, 0.92), rgba(255, 249, 220, 0.92));
}

.selected-badges-showcase {
  display: grid;
  gap: 13px;
  margin: 16px 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(229, 174, 37, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(105deg, rgba(255, 218, 93, 0.16), rgba(37, 183, 172, 0.08) 58%, rgba(67, 126, 230, 0.08)),
    var(--paper);
  box-shadow: var(--shadow-soft);
}

.selected-badges-heading,
.profile-resource-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.selected-badges-heading h3,
.profile-resource-heading h3 {
  margin: 2px 0 0;
}

.selected-badges-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.selected-badge-card {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(221, 179, 54, 0.36);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.76);
}

.selected-badge-order {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  color: #5e4711;
  border: 1px solid rgba(191, 141, 26, 0.34);
  border-radius: 50%;
  background: #ffe58e;
  font-size: 0.62rem;
  font-weight: 950;
}

.selected-badge-art {
  width: 62px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(240, 248, 255, 0.88);
}

.selected-badge-art img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: pixelated;
}

.selected-badge-art.is-missing::before {
  content: "?";
  color: var(--muted);
  font-weight: 950;
}

.selected-badge-card > div:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.selected-badge-card strong,
.selected-badge-card span,
.selected-badge-card p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-badge-card strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

.selected-badge-card > div:last-child > span {
  color: #39708e;
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
}

.selected-badge-card p {
  display: -webkit-box;
  margin: 0;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profile-resource-heading {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-soft);
}

.profile-resource-heading > span {
  color: var(--teal);
  font-size: 0.76rem;
  font-weight: 900;
}

.worn-clothing-grid,
.site-wardrobe-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 8px;
}

.site-wardrobe-preview {
  width: 100%;
  margin-top: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.clothing-catalog {
  margin-top: 20px;
}

.clothing-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 210px 180px;
  gap: 10px;
  margin-bottom: 16px;
}

.clothing-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.clothing-card {
  position: relative;
  min-width: 0;
  min-height: 196px;
  display: grid;
  grid-template-rows: 132px auto auto;
  gap: 4px;
  align-content: start;
  padding: 8px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(180deg, #fff, #f5faff);
  box-shadow: var(--shadow-soft);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.clothing-card:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: var(--shadow-hover);
}

.clothing-card-image {
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(47, 111, 237, 0.06) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(0, 169, 165, 0.06) 1px, transparent 1px) 0 0 / 18px 18px,
    #eef8ff;
}

.clothing-card-image img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  image-rendering: auto;
}

.clothing-card strong,
.clothing-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clothing-card small {
  color: var(--muted);
  font-size: 0.72rem;
}

.clothing-card em {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 5px;
  color: #704300;
  border-radius: 4px;
  background: var(--amber);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
}

.clothing-card.is-compact {
  min-height: 154px;
  grid-template-rows: 92px auto auto;
  padding: 7px;
}

.clothing-card.is-compact .clothing-card-image img {
  height: 92px;
}

.clothing-card.is-compact strong {
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.clothing-card.is-compact small {
  font-size: 0.64rem;
}

.clothing-card-nft {
  position: absolute;
  left: 11px;
  top: 11px;
  padding: 3px 6px;
  color: #47245c;
  border: 1px solid rgba(147, 75, 177, 0.25);
  border-radius: 4px;
  background: linear-gradient(135deg, #ffe676, #dfa8f3);
  font-size: 0.6rem;
  font-weight: 1000;
  box-shadow: 0 4px 10px rgba(68, 32, 85, 0.16);
}

.clothing-card.is-nft {
  border-color: rgba(160, 92, 190, 0.38);
}

.avatar-fitting-room {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.avatar-fitting-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.avatar-fitting-heading h3 {
  margin: 3px 0 4px;
  font-size: 1.12rem;
}

.avatar-fitting-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

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

.avatar-fitting-actions button {
  min-height: 38px;
}

.avatar-worn-strip {
  display: flex;
  gap: 9px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid rgba(0, 169, 165, 0.2);
  border-radius: 7px;
  background: #f0faf9;
}

.avatar-worn-strip > span {
  min-width: 210px;
  min-height: 68px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  padding: 6px 7px 6px 6px;
  border: 1px solid rgba(55, 107, 139, 0.17);
  border-radius: 6px;
  background: #fff;
}

.avatar-worn-thumb {
  width: 52px;
  height: 54px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 1px solid rgba(55, 107, 139, 0.15);
  border-radius: 5px;
  background: #edf8fc;
}

.avatar-worn-thumb img {
  width: 100%;
  height: 54px;
  object-fit: contain;
  object-position: center bottom;
}

.avatar-worn-thumb svg {
  width: 18px;
  color: var(--teal);
  animation: worn-spin 850ms linear infinite;
}

@keyframes worn-spin {
  to { transform: rotate(360deg); }
}

.avatar-worn-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.avatar-worn-strip b {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.74rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-worn-strip > span.is-nft b {
  color: #744391;
}

.avatar-worn-strip > span.is-nft {
  border-color: rgba(160, 92, 190, 0.35);
  background: linear-gradient(135deg, #fff, #fbf3ff);
}

.avatar-worn-strip .avatar-worn-copy small {
  color: var(--teal);
  overflow: hidden;
  font-size: 0.63rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-worn-strip button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.avatar-worn-strip button:hover {
  color: #fff;
  background: var(--coral);
}

.avatar-worn-strip button svg {
  width: 13px;
  height: 13px;
}

.avatar-clothing-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.avatar-clothing-types button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.avatar-clothing-types button > svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  color: var(--teal);
  border-radius: 6px;
  background: rgba(0, 169, 165, 0.1);
}

.avatar-clothing-types button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.avatar-clothing-types button:hover,
.avatar-clothing-types button.is-active {
  color: #087c76;
  border-color: rgba(0, 169, 165, 0.42);
  background: #e9faf6;
  transform: translateY(-1px);
}

.avatar-clothing-types button.is-active {
  box-shadow: inset 0 -3px 0 var(--teal), 0 7px 15px rgba(22, 93, 106, 0.1);
}

.avatar-clothing-types small {
  font-size: 0.66rem;
}

.avatar-clothing-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 190px;
  gap: 10px;
}

.avatar-clothing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.avatar-clothing-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(67, 116, 145, 0.16);
  border-radius: 7px;
  background: rgba(231, 246, 250, 0.65);
}

.avatar-clothing-results-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.avatar-clothing-results-head svg {
  width: 16px;
  color: var(--teal);
}

.avatar-clothing-results-head strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.avatar-clothing-card {
  position: relative;
  min-width: 0;
  min-height: 330px;
  display: grid;
  grid-template-rows: 228px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f5faff);
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.avatar-clothing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 169, 165, 0.52);
  box-shadow: var(--shadow-hover);
}

.avatar-clothing-art {
  position: relative;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(47, 111, 237, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgba(0, 169, 165, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
    #edf8fc;
}

.avatar-clothing-art img {
  width: 100%;
  height: 218px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}

.avatar-clothing-try {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  opacity: 0;
  color: #fff;
  border-radius: 6px;
  background: rgba(7, 91, 103, 0.92);
  font-size: 0.72rem;
  font-weight: 900;
  transform: translate(-50%, 8px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.avatar-clothing-try svg {
  width: 15px;
  height: 15px;
}

.avatar-clothing-nft {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  color: #261640;
  border: 1px solid rgba(255, 239, 153, 0.74);
  border-radius: 5px;
  background: linear-gradient(135deg, #ffe76c, #ef9cff 65%, #7be9e0);
  font-size: 0.66rem;
  font-weight: 1000;
  box-shadow: 0 5px 14px rgba(40, 17, 70, 0.22);
}

.avatar-clothing-nft svg {
  width: 14px;
  height: 14px;
}

.avatar-clothing-card.is-nft {
  border-color: rgba(202, 134, 236, 0.52);
}

.avatar-clothing-card.is-nft .avatar-clothing-art {
  background:
    linear-gradient(90deg, rgba(217, 151, 246, 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgba(80, 220, 208, 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    #f4f1ff;
}

.avatar-clothing-card:hover .avatar-clothing-try,
.avatar-clothing-card:focus-visible .avatar-clothing-try {
  opacity: 1;
  transform: translate(-50%, 0);
}

.avatar-clothing-info {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 13px;
}

.avatar-clothing-info > small {
  color: var(--teal);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.avatar-clothing-info > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-clothing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.avatar-clothing-tags b {
  padding: 3px 5px;
  color: #50697b;
  border-radius: 4px;
  background: #eaf1f5;
  font-size: 0.61rem;
  font-weight: 850;
}

.avatar-clothing-tags b.is-hc {
  color: #704300;
  background: #ffe28a;
}

.avatar-clothing-tags b.is-nft {
  color: #5a2874;
  background: #f2d9ff;
}

.avatar-clothing-grid .avatar-clothing-card.is-selected {
  border-color: var(--teal);
  background: linear-gradient(180deg, #eafff9, #eff8ff);
  box-shadow: 0 0 0 2px rgba(0, 169, 165, 0.17), var(--shadow-soft);
}

.avatar-clothing-grid .avatar-clothing-card.is-selected::after {
  content: "SECILI";
  position: absolute;
  right: 9px;
  top: 9px;
  padding: 5px 7px;
  color: #fff;
  border-radius: 4px;
  background: var(--teal);
  font-size: 0.64rem;
  font-weight: 950;
  box-shadow: 0 5px 12px rgba(0, 85, 82, 0.22);
}

.profile-resource-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.profile-badge-item {
  position: relative;
  min-height: 196px;
}

.profile-badge-item.is-selected-badge {
  border-color: rgba(226, 178, 36, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 242, 188, 0.54), rgba(246, 250, 255, 0.98)),
    var(--paper);
  box-shadow: inset 0 -4px 0 rgba(229, 176, 29, 0.18), 0 12px 24px rgba(22, 35, 49, 0.08);
}

.selected-badge-label {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: #6f5000 !important;
  border: 1px solid rgba(199, 147, 20, 0.35);
  border-radius: 5px;
  background: #ffe28a;
  font-size: 0.6rem !important;
  font-weight: 950 !important;
}

.selected-badge-label svg {
  width: 12px;
  height: 12px;
}

#profileFriends {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

#profileFriends .profile-friend-card {
  position: relative;
  min-height: 96px;
  grid-template-columns: 64px minmax(0, 1fr) 20px;
  align-items: center;
  align-content: center;
  cursor: pointer;
}

#profileFriends .profile-friend-card > img {
  width: 62px;
  height: 62px;
}

#profileFriends .profile-friend-card > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#profileFriends .profile-friend-card strong,
#profileFriends .profile-friend-card p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profileFriends .profile-friend-card p {
  margin: 0;
}

#profileFriends .profile-friend-card span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
}

#profileFriends .profile-friend-card span svg {
  width: 11px;
  height: 11px;
}

#profileFriends .profile-friend-card span.is-online {
  color: #0b9b70;
}

.profile-friend-open {
  width: 17px;
  color: var(--muted);
  transition: color 150ms ease, transform 150ms ease;
}

#profileFriends .profile-friend-card:hover .profile-friend-open {
  color: var(--teal);
  transform: translate(2px, -2px);
}

.profile-card,
.profile-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.profile-card img {
  width: 112px;
  height: 112px;
  padding: 4px;
  border-radius: var(--radius);
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  background: #edf7ff;
}

.meta-chips span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 6px;
  background: #eef7ff;
  color: #415166;
  font-size: 0.82rem;
  font-weight: 800;
}

.avatar-builder {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.avatar-builder > img {
  width: 160px;
  min-height: 220px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgba(0, 169, 165, 0.16) 25%, transparent 25%) 0 0 / 22px 22px,
    #fff8df;
}

.profile-mini {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.site-profile-avatar {
  width: 92px;
  height: 118px;
  object-fit: contain;
  object-position: center bottom;
  grid-row: span 4;
  align-self: end;
  filter: drop-shadow(0 8px 8px rgba(22, 35, 49, 0.14));
}

.profile-mini:has(.site-profile-avatar) {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
}

.profile-mini:has(.site-profile-avatar) .site-wardrobe-preview {
  grid-column: 1 / -1;
}

.profile-mini span {
  color: var(--blue);
  font-weight: 900;
}

.profile-cosmetic-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-cosmetic-line span,
.profile-cosmetic-line small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 6px;
  color: #27415d;
  background: rgba(231, 244, 255, 0.76);
  font-size: 0.74rem;
  font-weight: 900;
}

.profile-cosmetic-line svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
}

.has-profile-glow {
  border-color: rgba(62, 201, 167, 0.7) !important;
  box-shadow:
    0 0 0 3px rgba(62, 201, 167, 0.14),
    0 16px 38px rgba(47, 111, 237, 0.16) !important;
}

.has-profile-sunset {
  border-color: rgba(246, 137, 105, 0.72) !important;
  background:
    linear-gradient(120deg, rgba(255, 244, 203, 0.96), rgba(255, 216, 210, 0.94), rgba(231, 224, 255, 0.92)) !important;
  box-shadow: 0 0 0 3px rgba(246, 137, 105, 0.13), 0 18px 40px rgba(164, 82, 113, 0.18) !important;
}

.has-profile-cyber {
  color: #eaffff !important;
  border-color: rgba(74, 227, 211, 0.76) !important;
  background:
    linear-gradient(90deg, rgba(67, 245, 218, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(112, 96, 255, 0.08) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(135deg, #081b2b, #151538 68%, #082f35) !important;
  box-shadow: 0 0 0 3px rgba(74, 227, 211, 0.13), 0 0 28px rgba(103, 91, 255, 0.24) !important;
}

.has-profile-cyber p,
.has-profile-cyber span,
.has-profile-cyber small {
  color: #a9d8df !important;
}

.has-supporter-badge::after,
.has-collector-badge::after,
.has-market-badge::after {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 8px;
  border: 1px solid #d89b17;
  border-radius: 5px;
  color: #664100;
  background: #ffe58f;
  font-size: 0.68rem;
  font-weight: 1000;
}

.has-supporter-badge::after {
  content: "PIKSEL DESTEKCISI";
}

.has-collector-badge::after {
  content: "KOLEKSIYON USTASI";
  color: #075d62;
  border-color: #1bad9e;
  background: #bff9ed;
}

.has-market-badge::after {
  content: "PIYASA UZMANI";
  color: #5c3900;
  border-color: #c9870b;
  background: linear-gradient(180deg, #fff1a8, #ffd35f);
}

.profile-mini,
.account-hero {
  position: relative;
}

.shop-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
}

.shop-balance-icon {
  width: 46px;
  height: 46px;
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  border: 1px solid rgba(222, 166, 36, 0.38);
  border-radius: 7px;
  color: #9b6800;
  background: linear-gradient(145deg, #fff3bc, #ffd96e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.shop-balance-icon svg,
.reward-price svg {
  width: 17px;
  color: #d99a12;
}

.shop-balance > span:last-child,
.shop-owned-summary > span {
  display: grid;
  gap: 2px;
}

.shop-balance small,
.shop-owned-summary small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.shop-balance strong {
  color: #714d00;
  font-size: 1.2rem;
}

.community-reward-shop {
  grid-column: 1 / -1;
}

.reward-center-panel {
  display: none;
  gap: 18px;
}

.reward-center-panel.is-active {
  display: grid;
}

.reward-center-earn {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.2fr);
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(31, 200, 181, 0.09), rgba(67, 126, 230, 0.07)),
    var(--paper-soft);
}

.reward-center-copy {
  display: flex;
  align-items: center;
  gap: 11px;
}

.reward-center-copy > div {
  min-width: 0;
}

.reward-center-copy strong {
  color: var(--ink);
  font-size: 1rem;
}

.reward-center-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.reward-center-icon {
  width: 46px;
  height: 46px;
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  color: #087f78;
  border: 1px solid rgba(17, 174, 160, 0.28);
  border-radius: 7px;
  background: rgba(31, 210, 187, 0.1);
}

.reward-center-icon svg {
  width: 22px;
  height: 22px;
}

.reward-coupon-form {
  align-self: center;
}

.reward-center-earn .reward-row {
  grid-column: 1;
}

.reward-center-earn #rewardStatus {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

.reward-center-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
}

.reward-center-divider::before,
.reward-center-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.reward-center-divider span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.reward-center-divider svg {
  width: 17px;
  color: var(--teal);
}

.shop-secure-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(0, 169, 165, 0.25);
  border-radius: 6px;
  color: #087a6d;
  background: #e8fbf6;
  font-size: 0.75rem;
  font-weight: 900;
}

.shop-secure-label svg {
  width: 16px;
  height: 16px;
}

.shop-wallet {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(222, 166, 36, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 238, 174, 0.58), rgba(239, 250, 255, 0.76)),
    #fff;
}

.shop-progress {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.shop-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.shop-progress-copy strong {
  color: var(--ink);
}

.shop-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(37, 75, 103, 0.12);
}

.shop-progress-track span {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #00a9a5, #3f79e5, #f3b632);
  transition: width 420ms ease;
}

.shop-owned-summary {
  min-width: 142px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 18px;
  border-left: 1px solid rgba(69, 99, 121, 0.18);
}

.shop-owned-summary > svg {
  width: 24px;
  color: var(--teal);
}

.shop-grid,
.inventory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reward-card {
  min-width: 0;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 35, 49, 0.07);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.reward-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 169, 165, 0.48);
  box-shadow: 0 16px 34px rgba(22, 35, 49, 0.12);
}

.reward-card.is-equipped {
  border-top-color: var(--teal);
  background: linear-gradient(145deg, #f4fffb, #f5f9ff);
}

.reward-card.reward-chat {
  border-top-color: var(--violet);
}

.reward-card.reward-profile {
  border-top-color: var(--coral);
}

.reward-card.reward-style-collector .reward-icon,
.reward-card.reward-style-aqua .reward-icon {
  color: #078a83;
  border-color: rgba(9, 164, 151, 0.28);
  background: #ddfbf5;
}

.reward-card.reward-style-market .reward-icon,
.reward-card.reward-style-sunset .reward-icon {
  color: #a65e00;
  border-color: rgba(224, 143, 31, 0.3);
  background: linear-gradient(145deg, #fff2bb, #ffd8ca);
}

.reward-card.reward-style-neon .reward-icon,
.reward-card.reward-style-cyber .reward-icon {
  color: #755bff;
  border-color: rgba(117, 91, 255, 0.32);
  background: linear-gradient(145deg, #e6e1ff, #d9fbf7);
}

.reward-card.is-owned {
  border-color: rgba(0, 169, 165, 0.38);
}

.reward-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.reward-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 7px;
  color: var(--blue);
  background: #edf5ff;
}

.reward-icon svg {
  width: 29px;
  height: 29px;
}

.reward-availability {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 900;
}

.reward-availability svg {
  width: 13px;
  height: 13px;
}

.reward-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.reward-copy > span {
  color: var(--teal);
  font-size: 0.67rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.reward-copy strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.reward-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.reward-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #785000;
}

.reward-price strong {
  font-size: 1.12rem;
}

.reward-price span {
  color: var(--muted);
  font-size: 0.75rem;
}

.reward-card-footer {
  display: grid;
  grid-template-columns: auto minmax(128px, 0.55fr);
  gap: 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(85, 110, 130, 0.15);
}

.reward-owned {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(0, 169, 165, 0.28);
  border-radius: 6px;
  color: #087a6d;
  background: #e8fbf6;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

button.reward-owned:hover {
  border-color: rgba(0, 169, 165, 0.58);
  background: #d9f8f1;
  transform: translateY(-1px);
}

.reward-card-footer .primary-button,
.reward-card-footer .ghost-button,
.reward-card-footer .reward-owned {
  min-height: 40px;
}

.reward-card-footer button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: #edf2f5;
  box-shadow: none;
  cursor: not-allowed;
}

.shop-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.shop-status > svg {
  width: 17px;
  color: var(--teal);
}

.account-page {
  display: none;
}

.account-page.is-active {
  display: grid;
  gap: 18px;
}

.account-hero {
  min-height: 218px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  overflow: hidden;
  padding: 24px 30px;
  border: 1px solid rgba(47, 111, 237, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.96), rgba(235, 249, 247, 0.91)),
    url("assets/habbosal-city-bg.webp") center / cover;
  box-shadow: var(--shadow);
}

.account-hero > img {
  width: 170px;
  height: 190px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 10px rgba(22, 35, 49, 0.2));
}

.account-hero h2 {
  margin: 3px 0;
  font-size: 1.8rem;
}

.account-hero p {
  margin: 0 0 12px;
  color: var(--muted);
  font-weight: 800;
}

.account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.account-meta span {
  padding: 6px 9px;
  border: 1px solid rgba(47, 111, 237, 0.18);
  border-radius: 5px;
  color: #27415d;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.76rem;
  font-weight: 900;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.inventory-grid {
  display: grid;
  gap: 12px;
}

.field-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.chat-message-vip {
  padding-right: 42px;
  border: 1px solid rgba(218, 154, 20, 0.38);
  border-radius: 6px;
  background: linear-gradient(90deg, #fff7ce, #e8fbf7);
  color: #4d3b08;
}

.chat-message-aqua {
  padding-right: 52px;
  color: #07545c;
  border: 1px solid rgba(10, 174, 165, 0.46);
  border-radius: 6px;
  background: linear-gradient(90deg, #dbfff7, #e5f5ff);
  box-shadow: inset 3px 0 0 #18bcae;
}

.chat-message-neon {
  padding-right: 56px;
  color: #eff8ff;
  border: 1px solid rgba(131, 104, 255, 0.58);
  border-radius: 6px;
  background: linear-gradient(100deg, #13253e, #271744 58%, #0d3b40);
  box-shadow: inset 3px 0 0 #55e4d3, 0 0 14px rgba(111, 83, 255, 0.2);
}

.chat-message-neon .chat-message-content p,
.chat-message-neon .chat-message-content header strong {
  color: #f1f6ff;
}

.chat-style-mark {
  position: absolute;
  top: 7px;
  right: 8px;
  color: #8a5a00;
  font-size: 0.64rem;
  font-weight: 1000;
}

.chat-message-aqua .chat-style-mark {
  color: #07877f;
}

.chat-message-neon .chat-style-mark {
  color: #87f4e7;
  text-shadow: 0 0 8px rgba(75, 237, 219, 0.65);
}

.shop-grid article,
.partner-card,
.team-card,
.user-card {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
}

.shop-grid svg,
.partner-card svg {
  color: var(--teal);
}

.team-card img,
.user-card img {
  width: 58px;
  height: 58px;
  padding: 3px;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  border-radius: 6px;
  background: #edf7ff;
}

.resource-card {
  min-height: 148px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 22px rgba(22, 35, 49, 0.06);
}

.resource-card img {
  width: 100%;
  max-height: 92px;
  object-fit: cover;
  border-radius: 6px;
  background: #edf7ff;
}

.resource-card .group-badge {
  width: 46px;
  height: 46px;
  object-fit: contain;
  image-rendering: pixelated;
}

.resource-card span,
.compact-user span,
.compact-user p {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.community-panel {
  display: none;
}

.community-panel.is-active {
  display: block;
}

.community-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: 680px;
}

.community-sidebar {
  position: sticky;
  top: 18px;
  overflow: hidden;
  padding: 18px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(0, 169, 165, 0.1), transparent 42%),
    var(--paper);
  box-shadow: var(--shadow-soft);
}

.community-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--amber), var(--blue));
}

.community-sidebar-heading {
  padding: 4px 8px 17px;
  border-bottom: 1px solid var(--line);
}

.community-sidebar-heading h2 {
  margin: 3px 0 5px;
  font-size: 1.65rem;
}

.community-sidebar-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.community-tabs {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
}

.community-tabs .segment {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  color: var(--ink);
  text-align: left;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.community-tabs .segment > svg:first-child {
  width: 34px;
  height: 34px;
  padding: 8px;
  color: var(--teal);
  border-radius: 7px;
  background: rgba(0, 169, 165, 0.1);
}

.community-tabs .segment > svg:last-child {
  width: 17px;
  color: var(--muted);
}

.community-tabs .segment span,
.community-tabs .segment strong,
.community-tabs .segment small {
  display: block;
}

.community-tabs .segment strong {
  font-size: 0.88rem;
}

.community-tabs .segment small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
}

.community-tabs .segment:hover,
.community-tabs .segment.is-active {
  color: var(--ink);
  border-color: rgba(0, 169, 165, 0.24);
  background: linear-gradient(90deg, rgba(0, 169, 165, 0.12), rgba(47, 111, 237, 0.08));
}

.community-tabs .segment.is-active {
  box-shadow: inset 4px 0 0 var(--teal);
}

.community-tabs .segment.is-active > svg:last-child {
  color: var(--blue);
}

.community-content,
.community-content .section-block {
  min-width: 0;
}

.community-content .section-block {
  min-height: 650px;
}

.community-profile-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#teamGrid {
  gap: 18px;
}

.team-role-group {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.team-role-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.team-role-heading > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.team-role-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.community-profile-list .team-role-members .team-card {
  min-height: 0;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.team-role-members .community-avatar-wrap {
  width: 88px;
  height: 118px;
}

.team-role-members .community-avatar-wrap img {
  width: 64px !important;
  height: 110px !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.team-role-members .community-profile-stats,
.team-role-members .community-profile-action {
  grid-column: 1 / -1;
}

.team-role-members .community-profile-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-profile-list .team-card,
.community-profile-list .user-card {
  min-height: 152px;
  display: grid;
  grid-template-columns: 112px minmax(180px, 1fr) minmax(220px, 0.72fr) 138px;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 169, 165, 0.07), transparent 42%),
    var(--paper);
  box-shadow: var(--shadow-soft);
}

.community-profile-list .user-card {
  border-left-color: var(--blue);
}

.community-avatar-wrap {
  position: relative;
  width: 104px;
  height: 118px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(rgba(0, 169, 165, 0.06) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(47, 111, 237, 0.06) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--paper-soft);
}

.community-profile-list .community-avatar-wrap img {
  width: 96px;
  height: 112px;
  padding: 0;
  object-fit: contain;
  object-position: center bottom;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.community-presence {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: #71808c;
}

.community-presence.is-online {
  background: #20c778;
  box-shadow: 0 0 0 3px rgba(32, 199, 120, 0.14);
}

.community-profile-copy {
  min-width: 0;
}

.community-role {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 10px 5px 7px;
  color: #087970 !important;
  font-size: 0.64rem !important;
  font-weight: 950 !important;
  text-transform: uppercase;
  border-radius: 5px;
  background: rgba(0, 169, 165, 0.12);
}

.community-role .role-icon {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  margin: -6px 0;
}

.community-role[data-role="duzenekci"],
.community-role[data-role="bas_duzenekci"],
.community-role[data-role="mobinator"] {
  color: #087873 !important;
  border: 1px solid rgba(0, 169, 165, 0.24);
  background: linear-gradient(135deg, rgba(0, 169, 165, 0.15), rgba(47, 111, 237, 0.1));
}

.community-role[data-role="developer"] {
  color: #4b3d9a !important;
  border: 1px solid rgba(92, 76, 190, 0.22);
  background: linear-gradient(135deg, rgba(108, 91, 199, 0.14), rgba(47, 111, 237, 0.1));
}

.community-role[data-role="kurucu"] {
  color: #8b5a00 !important;
  border: 1px solid rgba(211, 150, 20, 0.28);
  background: linear-gradient(135deg, rgba(255, 221, 104, 0.24), rgba(255, 244, 201, 0.72));
}

.community-role[data-role="yonetici"] {
  color: #a92d35 !important;
  border: 1px solid rgba(220, 70, 81, 0.25);
  background: linear-gradient(135deg, rgba(255, 106, 116, 0.16), rgba(255, 222, 201, 0.52));
}

.community-role[data-role="moderator"] {
  color: #8b285f !important;
  border: 1px solid rgba(194, 63, 137, 0.3);
  background: linear-gradient(135deg, rgba(255, 92, 173, 0.16), rgba(228, 220, 255, 0.58));
}

.community-role[data-role="mimar"],
.community-role[data-role="bas_mimar"] {
  color: #8a6500 !important;
  border: 1px solid rgba(214, 165, 31, 0.28);
  background: linear-gradient(135deg, rgba(246, 199, 72, 0.18), rgba(255, 244, 204, 0.62));
}

.community-role[data-role="oyun_destek"],
.community-role[data-role="bas_oyun_destek"] {
  color: #31689c !important;
  border: 1px solid rgba(61, 135, 197, 0.24);
  background: linear-gradient(135deg, rgba(90, 171, 225, 0.17), rgba(225, 244, 255, 0.7));
}

.community-role[data-role="haberci"],
.community-role[data-role="bas_haberci"] {
  color: #79511e !important;
  border: 1px solid rgba(154, 107, 45, 0.24);
  background: linear-gradient(135deg, rgba(199, 153, 91, 0.16), rgba(255, 243, 217, 0.7));
}

.community-profile-copy strong {
  display: block;
  margin-top: 7px;
  font-size: 1.15rem;
}

.community-profile-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

.community-profile-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.community-profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.community-profile-stats > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-soft);
}

.community-profile-stats svg {
  width: 18px;
  grid-row: span 2;
  color: var(--amber);
}

.community-profile-stats strong,
.community-profile-stats small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-profile-stats strong {
  font-size: 0.78rem;
}

.community-profile-stats small {
  color: var(--muted);
  font-size: 0.62rem;
}

.community-profile-action {
  width: 100%;
}

.legal-block p {
  color: var(--muted);
}

.pager {
  justify-content: center;
  margin-top: 16px;
}

.pager span {
  color: var(--muted);
  font-weight: 900;
}

.admin-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-workspace,
.admin-panel,
.admin-tool-grid,
.admin-user-list,
.audit-list {
  display: grid;
  gap: 16px;
}

.admin-panel {
  border-color: rgba(191, 209, 230, 0.9);
}

.admin-panel.is-active {
  box-shadow: 0 18px 42px rgba(22, 35, 49, 0.11);
}

.founder-stats-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 200, 61, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 218, 0.88), rgba(238, 249, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.founder-stats-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.founder-stats-heading h3 {
  margin: 2px 0 0;
}

.founder-only-badge {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #704300;
  border: 1px solid rgba(217, 155, 44, 0.42);
  border-radius: 999px;
  background: rgba(255, 230, 138, 0.62);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.founder-stats-grid {
  margin-bottom: 0;
}

.admin-command {
  display: grid;
  gap: 16px;
  color: #fff;
  border-color: rgba(47, 111, 237, 0.34);
  background:
    linear-gradient(135deg, rgba(9, 21, 47, 0.96), rgba(15, 53, 71, 0.92)),
    #101b31;
  box-shadow: 0 22px 54px rgba(12, 27, 54, 0.24);
}

.admin-command::before {
  background: linear-gradient(90deg, var(--teal), var(--amber), var(--coral), var(--blue));
}

.admin-command h2,
.admin-command .eyebrow {
  color: #fff;
}

.admin-health {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(157, 200, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #d8ecff;
  font-weight: 900;
  font-size: 0.82rem;
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-summary article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(157, 200, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.admin-summary svg {
  grid-row: span 2;
  color: #70f1db;
}

.admin-summary span,
.admin-user-row span,
.permission-toggle em,
.audit-list span,
.audit-list time {
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-summary span {
  color: #b9cfe6;
}

.admin-summary strong {
  color: #fff;
  font-size: 1.2rem;
}

.admin-summary article em {
  grid-column: 2;
  color: #93abc4;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.admin-summary strong,
.admin-user-row strong,
.permission-toggle strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-tabs .segment {
  color: #dcecff;
  border: 1px solid rgba(157, 200, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.admin-tabs .segment.is-active {
  color: #10233b;
  background: linear-gradient(135deg, #8ef5dc, #ffe184);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.compact-form {
  align-items: end;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 169, 165, 0.08), rgba(47, 111, 237, 0.07));
}

.points-adjust-form {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 150px 140px minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 15px;
  border: 1px solid rgba(34, 190, 171, 0.3);
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(42, 211, 190, 0.1), rgba(73, 114, 232, 0.08)),
    var(--paper);
  box-shadow: inset 4px 0 0 var(--teal), var(--shadow-soft);
}

.points-adjust-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(70, 107, 133, 0.16);
}

.points-adjust-heading > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.points-adjust-heading small {
  color: var(--muted);
  font-size: 0.74rem;
}

.points-adjust-icon {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  color: #087d75;
  border: 1px solid rgba(0, 169, 165, 0.26);
  border-radius: 7px;
  background: #ddfaf4;
}

.points-adjust-icon svg {
  width: 20px;
}

.points-adjust-form label {
  min-width: 0;
}

.points-adjust-form button {
  min-height: 44px;
  white-space: nowrap;
}

.admin-user-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(140px, 190px) 44px 44px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 169, 165, 0.06), transparent 38%),
    var(--paper);
  box-shadow: var(--shadow-soft);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.admin-user-row:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 111, 237, 0.32);
  box-shadow: var(--shadow-hover);
}

.admin-user-row img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #dff6ff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.admin-points-button {
  color: #087d75;
  border-color: rgba(0, 169, 165, 0.3);
  background: #e1faf5;
}

.admin-user-row div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-user-row strong {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-user-row .role-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.permission-toggle {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.permission-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 169, 165, 0.38);
  box-shadow: var(--shadow-soft);
}

.permission-toggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
}

.permission-toggle span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.permission-toggle code {
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 3px 6px;
  border: 1px solid #cfe0f2;
  border-radius: 6px;
  background: #edf7ff;
  font-size: 0.74rem;
}

.admin-tool-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-tool-block[data-admin-tool="price"] {
  grid-column: 1 / -1;
}

.price-management-panel {
  overflow: hidden;
}

.price-management-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.price-management-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: #087f78;
  border: 1px solid rgba(17, 174, 160, 0.3);
  border-radius: 6px;
  background: rgba(31, 210, 187, 0.09);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.price-management-badge svg {
  width: 16px;
  height: 16px;
}

.price-management-studio {
  padding: 20px;
  border-color: rgba(20, 172, 161, 0.28);
  background:
    linear-gradient(135deg, rgba(27, 199, 168, 0.08), transparent 38%),
    var(--paper);
}

.price-management-studio .tool-title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.price-management-studio .admin-price-results:not(:empty) {
  max-height: 310px;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(238, 248, 251, 0.72);
}

.admin-tool-block[data-admin-tool="sync"] {
  grid-column: 1 / -1;
}

.admin-tool-block {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.92)),
    var(--paper);
  box-shadow: var(--shadow-soft);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.admin-tool-block:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 97, 95, 0.28);
  box-shadow: var(--shadow-hover);
}

.tool-title {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 900;
}

.tool-title svg {
  color: var(--coral);
}

.sync-control-heading,
.auto-sync-top,
.habbo-sync-log summary,
.sync-log-row header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sync-live-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  color: #087c5e;
  font-size: 0.72rem;
  font-weight: 900;
  border: 1px solid rgba(32, 181, 119, 0.25);
  border-radius: 6px;
  background: rgba(32, 181, 119, 0.09);
}

.sync-live-state svg {
  width: 15px;
}

.sync-live-state.is-running svg,
.sync-log-row.running .sync-log-status svg {
  animation: spin 1s linear infinite;
}

.sync-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sync-action-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.07), transparent 55%),
    var(--paper-soft);
}

.sync-action-card > button {
  grid-column: 1 / -1;
}

.sync-action-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border: 1px solid rgba(47, 111, 237, 0.2);
  border-radius: 7px;
  background: rgba(47, 111, 237, 0.08);
}

.sync-action-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.auto-sync-card {
  display: grid;
  grid-template-columns: 1fr;
}

.switch-control {
  display: block;
  cursor: pointer;
}

.switch-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch-control > span {
  position: relative;
  width: 48px;
  height: 26px;
  display: block;
  border: 1px solid #b5c5d4;
  border-radius: 999px;
  background: #d8e1e8;
  transition: background 160ms ease, border-color 160ms ease;
}

.switch-control > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
  transition: transform 160ms ease;
}

.switch-control input:checked + span {
  border-color: #13a895;
  background: linear-gradient(90deg, #12ad9b, #4385e6);
}

.switch-control input:checked + span::after {
  transform: translateX(22px);
}

.sync-interval-field {
  gap: 7px;
}

.sync-interval-field > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.sync-interval-field input {
  min-height: 40px;
}

.sync-interval-field em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
}

.sync-schedule-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sync-schedule-strip > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-soft);
}

.sync-schedule-strip svg {
  width: 18px;
  grid-row: span 2;
  color: var(--teal);
}

.sync-schedule-strip small,
.sync-schedule-strip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-schedule-strip small {
  color: var(--muted);
  font-size: 0.65rem;
}

.sync-schedule-strip strong {
  font-size: 0.78rem;
}

.habbo-sync-log {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-soft);
}

.habbo-sync-log summary {
  min-height: 48px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid transparent;
}

.habbo-sync-log[open] summary {
  border-bottom-color: var(--line);
}

.habbo-sync-log summary::-webkit-details-marker {
  display: none;
}

.habbo-sync-log summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.habbo-sync-log summary svg {
  width: 17px;
  color: var(--blue);
}

.habbo-sync-log summary em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
}

.habbo-sync-log-list {
  max-height: 410px;
  display: grid;
  overflow: auto;
}

.sync-log-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 90px;
  gap: 11px;
  align-items: start;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.sync-log-row:last-child {
  border-bottom: 0;
}

.sync-log-status {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #0b9b70;
  border-radius: 7px;
  background: rgba(11, 155, 112, 0.1);
}

.sync-log-row.failed .sync-log-status {
  color: #e44e5b;
  background: rgba(228, 78, 91, 0.1);
}

.sync-log-row.running .sync-log-status {
  color: var(--blue);
  background: rgba(47, 111, 237, 0.1);
}

.sync-log-status svg {
  width: 18px;
}

.sync-log-copy {
  min-width: 0;
}

.sync-log-row header time {
  color: var(--muted);
  font-size: 0.67rem;
}

.sync-log-copy p {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 0.75rem;
}

.sync-log-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sync-log-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: var(--muted);
  font-size: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.sync-log-metrics svg {
  width: 13px;
  color: var(--teal);
}

.sync-log-metrics b {
  color: var(--ink);
}

.sync-log-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.sync-log-meta > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.sync-log-meta > div > span {
  padding: 4px 6px;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 900;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.sync-log-meta small {
  color: var(--muted);
  font-size: 0.64rem;
}

.sync-log-actor {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0;
  color: var(--ink);
  border: 0;
  background: transparent;
  text-align: left;
}

.sync-log-actor img,
.sync-log-actor > i {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

.sync-log-actor > i {
  padding: 7px;
  color: var(--blue);
}

.sync-log-actor > span {
  min-width: 0;
  display: grid;
  padding: 0;
  color: inherit;
  border-radius: 0;
  background: transparent;
}

.sync-log-actor strong,
.sync-log-actor small {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-log-actor strong {
  font-size: 0.7rem;
}

.sync-log-actor.is-profile-link:hover strong {
  color: var(--teal);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.admin-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.editor-fields {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.editor-fields label small {
  justify-self: end;
  color: var(--muted);
  font-size: 0.72rem;
}

.rich-editor-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.rich-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.rich-editor-heading small {
  color: var(--muted);
  font-size: 0.72rem;
}

.rich-editor-shell {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #dfe8ee;
  box-shadow: 0 12px 28px rgba(17, 55, 79, 0.08);
}

.rich-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border-bottom: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #fff, #edf4f8);
}

.rich-editor-toolbar button,
.editor-color-control {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #29465b;
  border: 1px solid #c9d8e3;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.rich-editor-toolbar button:hover,
.rich-editor-toolbar button:focus-visible,
.editor-color-control:hover {
  color: #006f78;
  border-color: var(--teal);
  background: #e8fffb;
  transform: translateY(-1px);
}

.rich-editor-toolbar button svg,
.editor-color-control svg {
  width: 17px;
  height: 17px;
}

.editor-select {
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 28px 0 9px;
  color: #213c50;
  border: 1px solid #c9d8e3;
  border-radius: 6px;
  background-color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
}

.editor-block-select {
  min-width: 122px;
}

.editor-size-select {
  min-width: 92px;
}

.editor-toolbar-divider {
  width: 1px;
  height: 24px;
  margin: 0 2px;
  background: #cbd9e2;
}

.editor-color-control {
  position: relative;
  overflow: hidden;
}

.editor-color-control input {
  position: absolute;
  inset: auto 3px 2px;
  width: calc(100% - 6px);
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

.rich-editor-canvas {
  width: calc(100% - 32px);
  min-height: 360px;
  margin: 16px;
  padding: 34px 38px;
  color: #20384a;
  border: 1px solid #cedae2;
  border-radius: 5px;
  outline: none;
  background: #fff;
  box-shadow: 0 10px 24px rgba(24, 54, 73, 0.12);
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.rich-editor-canvas:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 169, 165, 0.12), 0 10px 24px rgba(24, 54, 73, 0.12);
}

.rich-editor-canvas:empty::before {
  color: #8da0ad;
  content: attr(data-placeholder);
  pointer-events: none;
}

.rich-editor-canvas h2,
.rich-editor-canvas h3,
.rich-editor-canvas p,
.rich-editor-canvas blockquote,
.article-preview-content h2,
.article-preview-content h3,
.article-preview-content p,
.article-preview-content blockquote {
  margin-top: 0;
}

.rich-editor-canvas h2 {
  margin-bottom: 12px;
  font-size: 1.65rem;
  line-height: 1.25;
}

.rich-editor-canvas h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  line-height: 1.3;
}

.rich-editor-canvas blockquote,
.article-preview-content blockquote {
  margin-left: 0;
  padding: 10px 14px;
  color: #315066;
  border-left: 4px solid var(--amber);
  background: #fff9df;
}

.rich-editor-canvas a,
.article-preview-content a,
.article-body a {
  color: #087f91;
  font-weight: 800;
  text-decoration: underline;
}

.rich-editor-canvas img,
.article-preview-content img,
.article-body img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 680px;
  margin: 18px auto;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-soft);
  box-shadow: 0 12px 28px rgba(20, 47, 65, 0.14);
}

.cover-controls {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 169, 165, 0.06), rgba(255, 200, 61, 0.1));
}

.cover-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.upload-button {
  min-height: 38px;
  display: inline-flex;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  color: #fff;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  cursor: pointer;
}

.habbo-cover-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 390px;
  padding-right: 4px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) transparent;
}

.habbo-cover-option {
  min-width: 0;
  padding: 5px;
  color: var(--ink);
  border: 2px solid transparent;
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.habbo-cover-option img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: #edf7ff;
}

.habbo-cover-option span {
  display: block;
  padding: 5px 2px 2px;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habbo-cover-option:hover,
.habbo-cover-option.is-active {
  border-color: var(--teal);
  background: #edfffa;
  transform: translateY(-1px);
}

.editor-publish {
  min-height: 48px;
}

.article-edit-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 14px;
  color: #174c58;
  border: 1px solid rgba(17, 174, 160, 0.36);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(39, 211, 183, 0.16), rgba(78, 145, 255, 0.08));
}

.article-edit-mode > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
}

.article-edit-mode > span svg {
  grid-row: 1 / 3;
  width: 20px;
  color: #07968b;
}

.article-edit-mode small {
  color: var(--muted);
}

.published-articles-manager {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.published-articles-heading {
  margin: 0;
}

.published-articles-heading .search-box {
  width: min(320px, 100%);
}

.admin-article-list {
  display: grid;
  gap: 10px;
}

.admin-article-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.admin-article-row:hover,
.admin-article-row.is-editing {
  border-color: rgba(15, 167, 156, 0.48);
  box-shadow: 0 12px 28px rgba(17, 84, 104, 0.12);
  transform: translateY(-1px);
}

.admin-article-row.is-editing {
  box-shadow: inset 4px 0 #18bcae, 0 12px 28px rgba(17, 84, 104, 0.12);
}

.admin-article-row > img {
  width: 150px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #eaf5fa;
}

.admin-article-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.admin-article-topline,
.admin-article-meta,
.admin-article-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-article-topline {
  justify-content: space-between;
}

.admin-article-topline time,
.admin-article-meta {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.admin-article-copy > strong,
.admin-article-copy > p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-article-copy > strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.admin-article-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-article-meta {
  flex-wrap: wrap;
}

.admin-article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-article-meta svg {
  width: 13px;
  height: 13px;
  color: #0b978c;
}

.admin-article-actions {
  justify-content: flex-end;
}

.admin-article-actions .edit {
  color: #087f78;
}

.admin-article-actions .danger {
  color: #d33f4d;
  border-color: rgba(211, 63, 77, 0.26);
  background: rgba(255, 82, 96, 0.07);
}

.admin-article-actions .danger:hover {
  color: #fff;
  border-color: #d33f4d;
  background: #d33f4d;
}

.article-live-preview {
  position: sticky;
  top: 16px;
  min-width: 0;
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.preview-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.article-preview-media {
  overflow: hidden;
  border-radius: 6px;
  background: #edf7ff;
}

.article-preview-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-live-preview h3,
.article-live-preview p {
  margin: 0;
  overflow-wrap: anywhere;
}

.article-live-preview p {
  color: var(--muted);
}

.article-preview-content {
  max-height: 230px;
  padding: 12px;
  overflow: auto;
  color: #415b6e;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fbfd;
  font-size: 0.78rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.article-preview-content h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 1.08rem;
}

.article-preview-content h3 {
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.94rem;
}

.article-preview-content ul,
.article-preview-content ol {
  padding-left: 20px;
}

.admin-price-picker {
  position: relative;
  display: grid;
  gap: 8px;
}

.admin-price-picker .search-box {
  width: 100%;
}

.admin-price-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-price-result {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.admin-price-result:hover {
  border-color: var(--teal);
  background: #f0fffb;
}

.admin-price-result-image,
.admin-price-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #edf7ff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.admin-price-result-image {
  width: 54px;
  height: 54px;
}

.admin-price-result-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-price-result span:last-child,
.admin-price-preview > div:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-price-result strong,
.admin-price-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-price-result small,
.admin-price-preview small,
.admin-price-preview span {
  color: var(--muted);
  font-size: 0.76rem;
}

.admin-price-preview {
  min-height: 112px;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(0, 169, 165, 0.26);
  border-radius: 8px;
  background: linear-gradient(135deg, #effffb, #fff9df);
}

.admin-price-image {
  width: 100px;
  height: 86px;
}

.admin-price-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.price-update-form {
  padding-top: 4px;
}

.admin-audit-center {
  grid-column: 1 / -1;
  gap: 16px;
  overflow: hidden;
}

.audit-center-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.audit-center-heading > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.audit-center-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.audit-count {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #087f78;
  border: 1px solid rgba(20, 172, 161, 0.28);
  border-radius: 6px;
  background: rgba(20, 172, 161, 0.08);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.audit-count svg {
  width: 15px;
  height: 15px;
}

.audit-filter-bar {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.audit-filter-button {
  min-height: 38px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-soft);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 900;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.audit-filter-button svg {
  width: 15px;
  height: 15px;
}

.audit-filter-button:hover,
.audit-filter-button.is-active {
  color: #067d76;
  border-color: rgba(18, 177, 162, 0.42);
  background: rgba(30, 198, 177, 0.1);
}

.audit-list {
  gap: 10px;
  max-height: 720px;
  overflow: auto;
  padding-right: 3px;
}

.audit-entry {
  --audit-color: #546f82;
  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-columns: 42px minmax(150px, 0.52fr) minmax(280px, 1.48fr) auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 0;
  align-items: start;
  overflow: hidden;
  padding: 13px 14px 13px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--audit-color) 8%, transparent), transparent 30%),
    var(--paper-soft);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.audit-entry:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--audit-color) 42%, var(--line));
  box-shadow: 0 9px 20px rgba(18, 50, 72, 0.09);
}

.audit-category-users { --audit-color: #257ee8; }
.audit-category-content { --audit-color: #a664e8; }
.audit-category-market { --audit-color: #e3a41e; }
.audit-category-system { --audit-color: #12a997; }

.audit-entry-rail {
  grid-row: 1 / -1;
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid color-mix(in srgb, var(--audit-color) 25%, transparent);
}

.audit-entry-rail > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--audit-color);
  border: 1px solid color-mix(in srgb, var(--audit-color) 28%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--audit-color) 10%, transparent);
}

.audit-entry-rail svg {
  width: 17px;
  height: 17px;
}

.audit-actor {
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: center;
  gap: 9px;
}

.audit-actor img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  object-fit: contain;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #eaf7ff;
}

.audit-actor > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.audit-actor strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-actor > div > span {
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-2px);
}

.audit-actor .role-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  filter: none;
  animation: none;
}

.audit-actor.is-profile-link:hover strong {
  color: var(--teal);
}

.audit-entry-copy {
  min-width: 0;
  display: grid;
  align-self: center;
  gap: 5px;
}

.audit-entry-copy header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audit-entry-copy header > strong {
  font-size: 0.82rem;
}

.audit-list .audit-action-badge {
  padding: 4px 6px;
  color: var(--audit-color);
  border: 1px solid color-mix(in srgb, var(--audit-color) 26%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--audit-color) 9%, transparent);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.audit-entry-copy p {
  margin: 0;
  color: var(--ink);
  font-size: 0.77rem;
  line-height: 1.45;
}

.audit-target-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.audit-target-line span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.67rem;
}

.audit-target-line svg {
  width: 13px;
  height: 13px;
  color: var(--audit-color);
}

.audit-entry-time {
  min-width: 105px;
  display: grid;
  align-self: center;
  justify-items: end;
  gap: 3px;
}

.audit-entry-time time {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
}

.audit-entry-time small {
  color: var(--muted);
  font-size: 0.62rem;
}

.audit-change-details {
  grid-row: 2;
  grid-column: 2 / -1;
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

.audit-change-details summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-size: 0.7rem;
  font-weight: 900;
}

.audit-change-details summary::-webkit-details-marker {
  display: none;
}

.audit-change-details summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.audit-change-details summary svg {
  width: 14px;
  height: 14px;
}

.audit-change-details[open] summary {
  color: var(--audit-color);
  border-bottom: 1px solid var(--line);
}

.audit-change-details[open] summary > svg {
  transform: rotate(180deg);
}

.audit-diff-list {
  display: grid;
}

.audit-diff-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr) 18px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
}

.audit-diff-row:last-child {
  border-bottom: 0;
}

.audit-diff-row > strong {
  color: var(--ink);
}

.audit-diff-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 6px 8px;
  border-radius: 5px;
}

.audit-list .audit-before {
  color: #a54852;
  background: rgba(222, 69, 83, 0.08);
}

.audit-list .audit-after {
  color: #087c65;
  background: rgba(17, 169, 135, 0.09);
}

.audit-diff-row > svg {
  width: 14px;
  color: var(--muted);
}

.audit-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  text-align: center;
}

.audit-empty svg {
  width: 30px;
  height: 30px;
  color: var(--teal);
}

.audit-empty strong {
  color: var(--ink);
}

[hidden] {
  display: none !important;
}

.article-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
}

.article-page {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.article-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.article-page-toolbar > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.article-page-toolbar > span svg {
  width: 16px;
  color: var(--teal);
}

.article-page-card {
  overflow: hidden;
  padding: 0 34px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.article-page .article-detail-hero {
  height: min(560px, 56vw);
  min-height: 390px;
  margin: 0 -34px;
}

.article-page .article-detail-overlay {
  right: 40px;
  bottom: 34px;
  left: 40px;
}

.article-page .article-detail-overlay h2 {
  max-width: 920px;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
}

.article-page .article-detail-meta,
.article-page .article-detail-lead,
.article-page .article-body,
.article-page .article-comments-heading,
.article-page .modal-comments,
.article-page .article-page-comment-form,
.article-page #commentStatus {
  width: min(860px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.article-page .article-detail-meta {
  padding-top: 20px;
}

.article-page .article-body {
  font-size: 1.04rem;
  line-height: 1.88;
}

.article-page-comment-form {
  margin-top: 18px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 29, 0.74);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  padding: 0 26px 26px;
  border: 1px solid rgba(255, 222, 133, 0.46);
  border-radius: 8px;
  background: #f8fbfd;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
}

.modal-close {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(9, 31, 47, 0.72);
}

.article-detail-hero {
  position: relative;
  height: 390px;
  margin: 0 -26px;
  overflow: hidden;
  background: #163d54;
}

.article-detail-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 25, 39, 0.94), transparent 68%);
}

.article-detail-overlay {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 26px;
  left: 28px;
}

.article-detail-overlay h2 {
  max-width: 720px;
  margin: 11px 0 0;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  line-height: 1.04;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

.article-detail-meta {
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.article-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.article-detail-meta svg {
  width: 15px;
  color: #087d7d;
}

.article-detail-lead {
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 4px solid var(--amber);
  color: #244257;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.6;
}

.article-body {
  margin: 22px 0 30px;
  color: #34465c;
  font-size: 1rem;
  line-height: 1.82;
  overflow-wrap: anywhere;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  margin: 1.7em 0 0.65em;
  color: var(--ink);
  line-height: 1.25;
}

.article-body h2 {
  font-size: 1.65rem;
}

.article-body h3 {
  font-size: 1.3rem;
}

.article-body p {
  margin: 0 0 1.15em;
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.2em;
  padding-left: 26px;
}

.article-body li + li {
  margin-top: 6px;
}

.article-body blockquote {
  margin: 1.5em 0;
  padding: 15px 18px;
  color: #315066;
  border-left: 5px solid var(--amber);
  border-radius: 0 6px 6px 0;
  background: #fff8dc;
  font-size: 1.04rem;
  font-weight: 700;
}

.article-comments-heading {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.article-comments-heading h3 {
  margin: 3px 0 0;
}

.modal-comments {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
}

.comment-form {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.furni-modal-card {
  width: min(1040px, 100%);
  padding: 0 28px 28px;
}

.member-profile-card {
  width: min(920px, 100%);
  padding: 0 24px 24px;
}

.badge-detail-card {
  width: min(880px, 100%);
  padding: 0 24px 24px;
}

.badge-detail-loading {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--muted);
}

.badge-detail-loading svg {
  width: 36px;
  height: 36px;
  color: var(--teal);
  animation: worn-spin 850ms linear infinite;
}

.badge-detail-hero {
  min-height: 220px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 0 -24px 20px;
  padding: 34px 34px 26px;
  color: #eef8fa;
  border-bottom: 1px solid rgba(89, 164, 169, 0.34);
  background:
    radial-gradient(circle at 16% 30%, rgba(84, 205, 189, 0.18), transparent 30%),
    linear-gradient(120deg, #102a35, #173d46 58%, #263c63);
}

.badge-detail-art {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(109, 218, 202, 0.3);
  border-radius: 10px;
  background: rgba(7, 24, 33, 0.52);
  box-shadow: inset 0 0 30px rgba(76, 205, 188, 0.08);
}

.badge-detail-art img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  image-rendering: pixelated;
}

.badge-detail-copy {
  min-width: 0;
}

.badge-detail-copy h2 {
  margin: 5px 0 9px;
  color: #f2f8fa;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.badge-detail-copy code {
  color: #9be1d8;
  border: 1px solid rgba(87, 191, 178, 0.28);
  background: rgba(5, 22, 30, 0.48);
}

.badge-detail-copy p {
  max-width: 590px;
  margin: 14px 0 0;
  color: #b7cad2;
}

.badge-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.badge-hotel-tabs {
  display: flex;
  gap: 7px;
  margin: 0 0 14px;
  padding: 4px 1px 8px;
  overflow-x: auto;
}

.badge-hotel-tabs button {
  min-width: 74px;
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 6px 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-soft);
}

.badge-hotel-tabs button strong {
  font-size: 0.78rem;
}

.badge-hotel-tabs button span {
  font-size: 0.66rem;
  font-weight: 800;
}

.badge-hotel-tabs button:hover,
.badge-hotel-tabs button.is-active {
  color: var(--ink);
  border-color: rgba(23, 143, 139, 0.5);
  background: rgba(23, 143, 139, 0.1);
}

.badge-hotel-tabs button.is-active {
  box-shadow: inset 0 -3px 0 var(--teal);
}

.badge-detail-stats article {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-soft);
}

.badge-detail-stats svg {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  padding: 9px;
  color: var(--teal);
  border-radius: 7px;
  background: rgba(23, 143, 139, 0.1);
}

.badge-detail-stats span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.badge-detail-stats strong {
  font-size: 1.2rem;
}

.badge-detail-scope {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 20px;
  padding: 10px 12px;
  color: var(--muted);
  border: 1px solid rgba(85, 127, 186, 0.18);
  border-radius: 7px;
  background: rgba(85, 127, 186, 0.06);
  font-size: 0.78rem;
  font-weight: 750;
}

.badge-detail-scope span {
  min-width: 0;
}

.badge-detail-scope a {
  color: var(--teal);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.badge-detail-scope svg {
  width: 16px;
  flex: 0 0 16px;
  color: var(--blue);
}

.badge-owner-section {
  display: grid;
  gap: 12px;
}

.badge-owner-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.badge-owner-toolbar h3 {
  margin: 3px 0 0;
  font-size: 1.14rem;
}

.badge-owner-modes {
  display: flex;
  gap: 7px;
}

.badge-owner-modes button {
  min-height: 36px;
  padding: 0 11px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-soft);
  font-size: 0.76rem;
  font-weight: 850;
}

.badge-owner-modes button:hover,
.badge-owner-modes button.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), var(--blue));
}

.badge-owner-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.badge-owner-heading h3 {
  margin: 3px 0 0;
  font-size: 1.14rem;
}

.badge-owner-heading > span,
.badge-owner-disclosure summary em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
}

.badge-owner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.badge-owner-grid .empty-state {
  grid-column: 1 / -1;
}

.badge-owner-card {
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-soft);
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.badge-owner-card:hover {
  transform: translateY(-1px);
  border-color: rgba(23, 143, 139, 0.48);
  background: rgba(23, 143, 139, 0.07);
}

.badge-owner-card.is-selected {
  border-color: rgba(212, 173, 79, 0.56);
  box-shadow: inset 3px 0 0 var(--amber);
}

.badge-owner-card img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border: 1px solid rgba(92, 132, 151, 0.28);
  border-radius: 7px;
  background: rgba(90, 139, 157, 0.08);
}

.badge-owner-card > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.badge-owner-card strong,
.badge-owner-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-owner-card small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.badge-owner-card > em {
  position: relative;
  min-width: 30px;
  padding: 3px 5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.badge-owner-card > em.is-online {
  color: #2ca86b;
  border-color: rgba(44, 168, 107, 0.38);
  background: rgba(44, 168, 107, 0.08);
}

.badge-owner-card > em.is-online::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--paper-soft);
  border-radius: 50%;
  background: #2dcc78;
}

.badge-owner-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
}

.badge-owner-pager > span {
  min-width: 150px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 0 5px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.badge-owner-pager > span strong {
  color: var(--ink);
}

.badge-owner-pager small {
  grid-column: 1 / -1;
  font-size: 0.68rem;
}

.badge-owner-disclosure {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-soft);
}

.badge-owner-disclosure > summary {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.badge-owner-disclosure > summary::-webkit-details-marker {
  display: none;
}

.badge-owner-disclosure > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.badge-owner-disclosure > summary svg {
  width: 18px;
  color: var(--teal);
}

.badge-owner-disclosure > summary > svg {
  transition: transform 160ms ease;
}

.badge-owner-disclosure[open] > summary > svg {
  transform: rotate(180deg);
}

.badge-owner-disclosure > .badge-owner-grid {
  padding: 0 12px 12px;
}

.badge-item[role="button"],
.selected-badge-card[role="button"] {
  cursor: pointer;
}

.badge-item[role="button"]:focus-visible,
.selected-badge-card[role="button"]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.member-profile-loading {
  min-height: 340px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--muted);
}

.member-profile-loading svg {
  width: 34px;
  height: 34px;
  color: var(--teal);
  animation: worn-spin 850ms linear infinite;
}

.member-profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  min-height: 330px;
  margin: 0 -24px;
  padding: 34px 68px 30px 28px;
  overflow: hidden;
  border-bottom: 1px solid rgba(72, 132, 155, 0.22);
  background:
    linear-gradient(90deg, rgba(53, 203, 187, 0.08) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(72, 112, 221, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(135deg, #effffb, #eef5ff 68%, #fff4cf);
}

.member-profile-hero.has-supporter-badge::after,
.member-profile-hero.has-collector-badge::after,
.member-profile-hero.has-market-badge::after {
  top: 16px;
  right: 70px;
  max-width: calc(100% - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-profile-avatar-wrap {
  position: relative;
  height: 255px;
  display: grid;
  place-items: end center;
  border: 1px solid rgba(40, 157, 158, 0.25);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 60%, rgba(55, 200, 186, 0.18), transparent 48%),
    rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 28px rgba(55, 200, 186, 0.08);
}

.member-profile-avatar-wrap img {
  width: 100%;
  height: 245px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 10px rgba(22, 35, 49, 0.2));
}

.member-profile-avatar-wrap > span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 8px;
  color: #657786;
  border: 1px solid rgba(91, 116, 132, 0.22);
  border-radius: 5px;
  background: rgba(244, 248, 250, 0.94);
  font-size: 0.68rem;
  font-weight: 950;
}

.member-profile-avatar-wrap > span.is-online {
  color: #087656;
  border-color: rgba(29, 174, 122, 0.3);
  background: #dcfaed;
}

.member-profile-copy {
  min-width: 0;
}

.member-profile-copy h2 {
  margin: 5px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.05;
}

.member-profile-handle {
  margin: 5px 0 15px;
  color: var(--teal);
  font-weight: 900;
}

.member-profile-bio {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.member-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 14px;
}

.member-profile-stats > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 1px 7px;
  padding: 10px;
  border: 1px solid rgba(59, 105, 137, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
}

.member-profile-stats svg {
  grid-row: span 2;
  width: 18px;
  color: var(--teal);
}

.member-profile-stats .role-icon {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  margin: -4px 0 -4px -6px;
}

html[data-theme="dark"] .admin-audit-center,
html[data-theme="dark"] .audit-entry {
  border-color: #29485d;
}

html[data-theme="dark"] .audit-entry {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--audit-color) 10%, transparent), transparent 34%),
    #0a1b29;
}

html[data-theme="dark"] .audit-entry:hover {
  border-color: color-mix(in srgb, var(--audit-color) 58%, #29485d);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .audit-filter-button,
html[data-theme="dark"] .audit-change-details,
html[data-theme="dark"] .sync-log-actor img,
html[data-theme="dark"] .sync-log-actor > i {
  color: #a9bfcc;
  border-color: #29485d;
  background: #091a27;
}

html[data-theme="dark"] .audit-filter-button:hover,
html[data-theme="dark"] .audit-filter-button.is-active {
  color: #70e0d2;
  border-color: #31736d;
  background: rgba(31, 201, 181, 0.12);
}

html[data-theme="dark"] .audit-actor img {
  border-color: #31536a;
  background: #0b2433;
}

html[data-theme="dark"] .audit-change-details[open] summary,
html[data-theme="dark"] .audit-diff-row {
  border-color: #294257;
}

html[data-theme="dark"] .audit-list .audit-before {
  color: #ff9aa5;
  background: rgba(222, 69, 83, 0.12);
}

html[data-theme="dark"] .audit-list .audit-after {
  color: #76e4c9;
  background: rgba(17, 169, 135, 0.13);
}

@media (max-width: 680px) {
  .audit-center-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .audit-count {
    width: fit-content;
  }

  .audit-entry {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    padding: 12px;
  }

  .audit-entry-rail {
    grid-row: 1 / span 4;
  }

  .audit-actor,
  .audit-entry-copy,
  .audit-entry-time,
  .audit-change-details {
    grid-column: 2;
  }

  .audit-entry-time {
    min-width: 0;
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
    gap: 8px;
  }

  .audit-change-details {
    width: 100%;
  }

  .audit-diff-row {
    grid-template-columns: 1fr;
  }

  .audit-diff-row > svg {
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-icon {
    animation: none;
  }
}

/* Career application management */
.career-admin-statuses {
  margin-bottom: 16px;
}

.career-application-list {
  display: grid;
  gap: 12px;
}

.career-application-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper-soft);
  box-shadow: 3px 3px 0 rgba(32, 65, 75, 0.12);
}

.career-application-card.approved {
  border-left: 5px solid #24a56f;
}

.career-application-card.rejected {
  border-left: 5px solid #d95861;
}

.career-application-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.career-applicant {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--ink);
  border: 0;
  background: transparent;
  text-align: left;
}

.career-applicant img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}

.career-applicant span {
  min-width: 0;
  display: grid;
}

.career-applicant strong,
.career-applicant small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.career-applicant small,
.career-application-head time,
.career-review-result small {
  color: var(--muted);
  font-size: 0.72rem;
}

.career-application-message {
  margin: 0;
  padding: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  white-space: pre-wrap;
}

.career-review-note {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-weight: 800;
}

.career-review-note small {
  color: var(--muted);
  font-weight: 600;
}

.career-application-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.career-review-result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
  align-items: center;
}

.career-review-result > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
  font-weight: 900;
}

.career-review-result svg {
  width: 17px;
}

.career-review-result p {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 10px;
  border-radius: 5px;
  background: var(--paper);
}

@media (max-width: 720px) {
  .career-application-head {
    grid-template-columns: 1fr auto;
  }

  .career-application-head time {
    grid-column: 1 / -1;
  }

  .career-application-actions {
    flex-direction: column-reverse;
  }

  .career-application-actions button {
    width: 100%;
  }
}

/* Pinned news */
.article-card.is-pinned,
.admin-article-row.is-pinned {
  border-color: rgba(217, 163, 39, 0.72);
  box-shadow: inset 0 3px 0 #d8a327, var(--shadow-soft);
}

.article-pinned-badge,
.spotlight-pinned-badge,
.admin-pinned-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #493809;
  border: 1px solid #b98516;
  border-radius: 5px;
  background: #f5ce58;
  font-size: 0.67rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 rgba(91, 63, 4, 0.22);
}

.article-pinned-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 6px 8px;
}

.spotlight-pinned-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 7px 9px;
}

.article-pinned-badge svg,
.spotlight-pinned-badge svg,
.admin-pinned-label svg {
  width: 13px;
  height: 13px;
}

.admin-article-labels {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-pinned-label {
  padding: 5px 7px;
}

.admin-article-actions .pin {
  color: #9c6c08;
  border-color: rgba(190, 139, 25, 0.32);
  background: rgba(245, 206, 88, 0.12);
}

.admin-article-actions .pin.is-active,
.admin-article-actions .pin:hover {
  color: #493809;
  border-color: #b98516;
  background: #f5ce58;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .article-card.is-pinned,
html[data-theme="pixel"][data-pixel-tone="dark"] .admin-article-row.is-pinned {
  border-color: #d5a836;
}

.member-profile-stats b {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-profile-stats small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.member-profile-wardrobe {
  padding-top: 22px;
}

.member-profile-cosmetics {
  margin-top: 4px;
}

.furni-profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  min-height: 310px;
  margin: 0 -28px;
  padding: 36px 72px 30px 30px;
  overflow: hidden;
  color: #eefaff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(7, 38, 55, 0.97), rgba(10, 82, 93, 0.93)),
    linear-gradient(30deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: auto, 28px 16px;
}

.furni-profile-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -150px;
  width: 360px;
  height: 360px;
  border: 70px solid rgba(255, 210, 57, 0.08);
  border-radius: 50%;
}

.furni-profile-art {
  position: relative;
  z-index: 1;
  height: 235px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(138, 225, 232, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(42, 211, 180, 0.18), transparent 56%),
    rgba(4, 25, 38, 0.48);
  box-shadow: inset 0 0 30px rgba(72, 212, 205, 0.08);
}

.furni-profile-art img {
  max-width: 88%;
  max-height: 205px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 11px rgba(0, 0, 0, 0.34));
}

.furni-profile-art .pixel-furni {
  transform: scale(1.7);
}

.furni-profile-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.furni-profile-copy .eyebrow {
  color: #62e5d2;
}

.furni-profile-copy h2 {
  margin: 7px 0 10px;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.furni-profile-copy > p {
  max-width: 500px;
  margin: 0;
  color: #bdd1db;
  line-height: 1.55;
}

.furni-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.furni-profile-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 9px;
  overflow: hidden;
  color: #d9eef5;
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(142, 207, 222, 0.22);
  border-radius: 5px;
  background: rgba(4, 25, 38, 0.44);
}

.furni-profile-tags svg {
  width: 14px;
  flex: 0 0 14px;
  color: #f6cb43;
}

.furni-current-price {
  position: relative;
  z-index: 1;
  min-width: 156px;
  padding: 18px;
  border: 1px solid rgba(112, 229, 192, 0.36);
  border-radius: 8px;
  background: rgba(11, 151, 113, 0.2);
}

.furni-current-price.down {
  border-color: rgba(255, 116, 122, 0.42);
  background: rgba(190, 52, 65, 0.22);
}

.furni-current-price.new {
  border-color: rgba(106, 164, 255, 0.44);
  background: rgba(47, 111, 237, 0.2);
}

.furni-current-price small,
.furni-current-price strong,
.furni-current-price span {
  display: block;
}

.furni-current-price small {
  color: #b9d1db;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.furni-current-price strong {
  margin: 6px 0 10px;
  color: #fff;
  font-size: 1.45rem;
}

.furni-current-price span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6ff0bd;
  font-size: 0.78rem;
  font-weight: 950;
}

.furni-current-price.down span {
  color: #ff969b;
}

.furni-current-price.new span {
  color: #8db8ff;
}

.furni-current-price svg {
  width: 16px;
}

.furni-market-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.furni-market-stats article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.furni-market-stats span,
.furni-market-stats strong {
  display: block;
}

.furni-market-stats span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.furni-market-stats strong {
  color: var(--ink);
  font-size: 0.96rem;
}

.furni-detail-section {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.furni-detail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.furni-detail-heading h3 {
  margin: 3px 0 0;
}

.hotel-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hotel-price-card {
  position: relative;
  min-height: 126px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #b9ddd6;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(32, 198, 167, 0.1), transparent 70%), #fff;
}

.hotel-price-card.down {
  border-color: #efc6c9;
  background: linear-gradient(145deg, rgba(231, 78, 88, 0.09), transparent 70%), #fff;
}

.hotel-price-card.new {
  border-color: #bfd3f4;
  background: linear-gradient(145deg, rgba(47, 111, 237, 0.09), transparent 70%), #fff;
}

.hotel-price-card.is-unavailable {
  color: var(--muted);
  border-style: dashed;
  background: rgba(119, 139, 153, 0.05);
}

.hotel-price-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hotel-code {
  width: 42px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  color: #fff;
  font-size: 0.69rem;
  font-weight: 950;
  border-radius: 5px;
  background: linear-gradient(135deg, #087c7b, #356dd2);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16);
}

.hotel-price-head strong,
.hotel-price-head small {
  display: block;
}

.hotel-price-head strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.hotel-price-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.64rem;
}

.hotel-price-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 14px;
}

.hotel-price-value strong {
  color: var(--ink);
  font-size: 1.18rem;
}

.hotel-price-value span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.hotel-price-card > em {
  position: absolute;
  right: 12px;
  bottom: 13px;
  color: #0a906a;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
}

.hotel-price-card > em.down {
  color: #d74752;
}

.hotel-price-card > em.new {
  color: #3979dc;
}

.hotel-price-missing {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 17px;
  font-size: 0.72rem;
  font-weight: 800;
}

.hotel-price-missing svg {
  width: 16px;
}

.hotel-price-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.hotel-price-note svg {
  width: 15px;
  flex: 0 0 15px;
  color: #0a958b;
}

.furni-history-count {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.furni-chart-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(32, 198, 167, 0.08), transparent 42%),
    linear-gradient(180deg, #f9fcfe, #f0f7fa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 32px rgba(15, 55, 77, 0.08);
}

.chart-toolbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(76, 132, 157, 0.18);
  background: rgba(255, 255, 255, 0.58);
}

.chart-toolbar > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
}

.chart-toolbar > div:first-child small {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.68rem;
}

.chart-live-dot {
  grid-row: 1 / 3;
  width: 11px;
  height: 11px;
  border: 2px solid #adfff0;
  border-radius: 50%;
  background: #1bc7a8;
  box-shadow: 0 0 0 5px rgba(27, 199, 168, 0.1), 0 0 16px rgba(27, 199, 168, 0.55);
}

.chart-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 7px;
}

.chart-kpis > span {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(83, 135, 158, 0.16);
  border-radius: 6px;
  background: rgba(237, 247, 250, 0.78);
}

.chart-kpis small,
.chart-kpis strong {
  display: block;
}

.chart-kpis small {
  color: var(--muted);
  font-size: 0.62rem;
}

.chart-kpis strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.76rem;
  white-space: nowrap;
}

.chart-kpis .up strong {
  color: #098b70;
}

.chart-kpis .down strong {
  color: #d54855;
}

.furni-price-chart {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
  padding: 2px 8px 8px;
}

.chart-grid-line {
  stroke: rgba(78, 119, 143, 0.13);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}

.chart-area {
  fill: url("#furniChartFill");
}

.chart-line {
  fill: none;
  stroke: url("#furniChartStroke");
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#furniChartGlow");
}

.chart-point {
  fill: #bffaf0;
  stroke: #0c9e8d;
  stroke-width: 2.5;
  pointer-events: none;
  transition: r 140ms ease, fill 140ms ease;
}

.chart-point-hit {
  fill: transparent;
  cursor: pointer;
}

.chart-point-group {
  outline: none;
  cursor: pointer;
}

.chart-point-group:hover .chart-point,
.chart-point-group:focus .chart-point,
.chart-point-group.is-active .chart-point {
  r: 7;
  fill: #ffe06a;
}

.chart-point-group.is-current .chart-point {
  fill: #ffe06a;
  stroke: #0b8e83;
  stroke-width: 3.5;
}

.chart-point-group:focus .chart-point {
  stroke: #fff;
  stroke-width: 4;
}

.chart-label,
.chart-date-label {
  fill: #647b89;
  font-size: 11px;
  font-weight: 800;
}

.chart-date-label {
  fill: #78909f;
  font-size: 10px;
}

.chart-current-tag rect {
  fill: #082e3c;
  stroke: rgba(68, 222, 199, 0.72);
  stroke-width: 1;
}

.chart-current-tag text {
  fill: #effffd;
  font-size: 11px;
  font-weight: 950;
}

.chart-current-tag {
  pointer-events: none;
}

.chart-point-tooltip {
  position: absolute;
  z-index: 5;
  width: 190px;
  display: grid;
  gap: 5px;
  padding: 11px 13px;
  color: #eafffb;
  border: 1px solid rgba(68, 222, 199, 0.72);
  border-radius: 7px;
  background: rgba(5, 35, 48, 0.97);
  box-shadow: 0 12px 28px rgba(1, 20, 30, 0.28);
  pointer-events: none;
  transform-origin: center bottom;
  animation: chartTooltipIn 140ms ease-out;
}

.chart-point-tooltip::after {
  position: absolute;
  left: calc(50% - 6px);
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(68, 222, 199, 0.72);
  border-bottom: 1px solid rgba(68, 222, 199, 0.72);
  background: #052330;
  content: "";
  transform: rotate(45deg);
}

.chart-point-tooltip.is-below::after {
  top: -7px;
  bottom: auto;
  border: 0;
  border-top: 1px solid rgba(68, 222, 199, 0.72);
  border-left: 1px solid rgba(68, 222, 199, 0.72);
}

.chart-point-tooltip strong {
  color: #ffe06a;
  font-size: 0.95rem;
}

.chart-point-tooltip span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #eafffb;
  font-size: 0.76rem;
}

.chart-point-tooltip span svg {
  width: 14px;
  height: 14px;
  color: #37d8c2;
}

.chart-point-tooltip small {
  color: #9dbac6;
  font-size: 0.68rem;
}

@keyframes chartTooltipIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chart-note {
  display: block;
  padding: 0 14px 12px;
  color: var(--muted);
}

.furni-chart-empty,
.furni-comments-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.furni-chart-empty svg,
.furni-comments-empty svg {
  width: 30px;
  color: #0aa68e;
}

.furni-comments {
  display: grid;
  gap: 9px;
}

.furni-comment {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.furni-comment > img {
  width: 46px;
  height: 46px;
  padding: 2px;
  object-fit: contain;
  image-rendering: auto;
  border-radius: 6px;
  background: #eaf6fb;
}

.furni-comment header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.furni-comment header span {
  color: var(--muted);
  font-size: 0.7rem;
}

.furni-comment p {
  margin: 5px 0 0;
  color: #3e5262;
  line-height: 1.5;
}

.furni-comment .comment-profile-cue {
  margin-top: 7px;
}

.furni-comment-form {
  margin-top: 4px;
}

.price-row,
.furni-card {
  cursor: pointer;
}

.site-footer {
  padding: 28px 0;
  color: #eef7fb;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 12px, transparent 12px 24px) 0 0 / 24px 100%,
    linear-gradient(135deg, #172331, #394c84 48%, #006e75);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 26px;
  align-items: start;
}

.footer-grid p {
  max-width: 620px;
  margin: 8px 0 0;
  color: #c8d8df;
  font-size: 0.88rem;
}

.footer-stats,
.footer-links {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 800;
}

.footer-links a {
  color: #a8ecdf;
}

.skeleton {
  background: linear-gradient(90deg, #eef3f8, #fff, #eef3f8);
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite linear;
}

@keyframes shimmer {
  to {
    background-position: -220% 0;
  }
}

/* Premium portal shell */
.top-strip {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 208, 80, 0.62);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 38px 100%,
    linear-gradient(90deg, #091a2d, #123755 52%, #075d64);
  box-shadow: 0 8px 24px rgba(7, 25, 42, 0.22);
}

.strip-inner {
  min-height: 48px;
  justify-content: flex-start;
}

.strip-presence,
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 900;
}

.strip-presence {
  color: #cce7f2;
}

.live-pulse {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 2px solid rgba(151, 255, 215, 0.42);
  border-radius: 50%;
  background: #48e6a8;
  box-shadow: 0 0 0 4px rgba(72, 230, 168, 0.1), 0 0 13px rgba(72, 230, 168, 0.72);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  50% {
    opacity: 0.62;
    box-shadow: 0 0 0 7px rgba(72, 230, 168, 0.04), 0 0 8px rgba(72, 230, 168, 0.42);
  }
}

.coupon-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 0 auto !important;
  padding: 3px 5px 3px 11px;
  border: 1px solid rgba(255, 213, 101, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}

.coupon-chip strong {
  color: #d7e7ef;
  font-size: 0.72rem;
}

.coupon-chip span {
  padding: 3px 8px;
  border-radius: 4px;
  color: #3e2a00;
  background: #ffd86b;
  box-shadow: inset 0 -2px 0 rgba(165, 104, 0, 0.18);
  font-size: 0.76rem;
  font-weight: 1000;
}

.top-strip .icon-text-button {
  color: #e8f5fb;
  border-color: rgba(208, 233, 245, 0.19);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.site-header {
  padding: 24px 0 40px;
  background:
    linear-gradient(180deg, rgba(4, 20, 35, 0.2), transparent 220px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 247, 226, 0.12));
}

.nav-shell {
  width: min(1540px, calc(100% - 32px));
  overflow: visible;
  border: 1px solid rgba(255, 215, 109, 0.75);
  background: #0d2338;
  box-shadow:
    0 0 0 3px rgba(71, 42, 5, 0.24),
    0 8px 0 rgba(67, 40, 9, 0.32),
    0 28px 70px rgba(7, 24, 39, 0.28);
}

.nav-shell::before {
  content: "";
  inset: 3px;
  border: 1px solid rgba(255, 231, 165, 0.2);
  border-radius: 5px;
}

.nav-shell::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -5px 22px auto;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #ffd86a 18%, #fff3b5 50%, #ffd86a 82%, transparent);
  box-shadow: 0 2px 10px rgba(255, 205, 77, 0.36);
  pointer-events: none;
}

.nav-logo-row {
  min-height: 112px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 218, 123, 0.38);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(180deg, #102d48, #0b2034);
}

.nav-logo-row::before,
.nav-logo-row::after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  bottom: -5px;
  border: 1px solid #f7ca58;
  background: #173c59;
  transform: rotate(45deg);
}

.nav-logo-row::before {
  left: 18px;
}

.nav-logo-row::after {
  right: 18px;
}

.nav-brand {
  display: grid;
  justify-items: center;
  gap: 2px;
  filter: drop-shadow(0 11px 14px rgba(0, 0, 0, 0.26));
}

.brand-logo {
  width: clamp(310px, 31vw, 455px);
}

.brand-subtitle {
  color: #b8d4e4;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.nav-actions {
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}

.nav-user {
  min-height: 54px;
  padding: 6px 12px 6px 7px;
  color: #eef9ff;
  border: 1px solid rgba(165, 215, 240, 0.24);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.nav-user:hover {
  border-color: rgba(255, 215, 105, 0.52);
  background: rgba(255, 255, 255, 0.12);
}

.nav-user-avatar {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 219, 121, 0.38);
  background: #dff5ff;
}

.nav-user small {
  color: #9fc0d3;
}

.nav-actions .primary-button {
  min-height: 48px;
  color: #13283a;
  border: 1px solid #ffe394;
  background: linear-gradient(180deg, #ffe990, #f2b936);
  box-shadow: 0 5px 0 #9b6814, 0 13px 24px rgba(0, 0, 0, 0.22);
}

.nav-links {
  padding: 8px;
  gap: 6px;
  border-radius: 0 0 7px 7px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 70px 100%,
    #091b2c;
}

.nav-choice {
  min-height: 112px;
  gap: 5px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #bad2e1;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.nav-choice::before {
  content: "";
  position: absolute;
  inset: auto 14px 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.nav-choice span {
  position: relative;
  z-index: 2;
  color: inherit;
  font-size: 0.78rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.nav-art-icon {
  position: relative;
  z-index: 2;
  width: clamp(64px, 4.8vw, 78px);
  height: 70px;
  padding: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(242, 250, 255, 0.96), rgba(207, 230, 239, 0.9));
  box-shadow:
    0 0 0 1px rgba(154, 207, 226, 0.25),
    0 8px 16px rgba(0, 0, 0, 0.2);
  filter: none;
}

.nav-choice.is-active,
.nav-choice:hover {
  color: #fff2bc;
  border-color: rgba(255, 213, 99, 0.4);
  background:
    linear-gradient(180deg, rgba(40, 111, 117, 0.58), rgba(12, 61, 72, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.nav-choice.is-active::before,
.nav-choice:hover::before {
  background: linear-gradient(90deg, #44dfbe, #ffe06f);
  box-shadow: 0 0 12px rgba(79, 231, 195, 0.42);
}

.nav-choice.is-active .nav-art-icon,
.nav-choice:hover .nav-art-icon {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #ffffff, #dcfff3);
  box-shadow:
    0 0 0 1px rgba(109, 236, 201, 0.38),
    0 11px 20px rgba(0, 0, 0, 0.25);
  filter: none;
}

.command-center {
  min-height: 390px;
  gap: 46px;
  padding-top: 44px;
}

.command-copy {
  padding: 12px 0 12px 6px;
}

.command-copy > .eyebrow {
  display: block;
  margin-bottom: 6px;
}

.hero-status {
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 10px;
  border: 1px solid rgba(7, 80, 93, 0.18);
  border-radius: 6px;
  color: #18465d;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 20px rgba(23, 53, 76, 0.08);
  backdrop-filter: blur(12px);
}

.hero-status > span:last-child {
  color: var(--muted);
  font-weight: 800;
}

.command-copy h1 {
  max-width: 720px;
  margin-top: 8px;
  color: #10283d;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}

.command-copy > p {
  max-width: 610px;
  margin-bottom: 24px;
  color: #41566b;
}

.command-scene {
  border: 1px solid rgba(255, 224, 143, 0.82);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px) 0 0 / 42px 100%,
    linear-gradient(180deg, #1f7591, #55c2b2 55%, #ffd166);
  box-shadow:
    0 0 0 4px rgba(11, 42, 61, 0.12),
    0 12px 0 rgba(11, 42, 61, 0.13),
    0 30px 58px rgba(13, 48, 70, 0.22);
}

.section-block {
  border-color: rgba(191, 209, 230, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 250, 254, 0.93));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 12px 28px rgba(19, 46, 69, 0.09);
}

.section-block::before {
  height: 4px;
  background: linear-gradient(90deg, #087a81, #32c9ad 35%, #ffd35f 70%, #3477d9);
}

.section-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(191, 209, 230, 0.58);
}

.section-heading h2 {
  color: #142a3e;
}

.section-heading .eyebrow {
  color: #08797a;
}

.article-card,
.furni-card,
.badge-item,
.profile-mini,
.reward-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 9px 20px rgba(19, 46, 69, 0.075);
}

.primary-button {
  border: 1px solid rgba(144, 235, 218, 0.38);
  background: linear-gradient(135deg, #008f8d, #286bd5);
  box-shadow: 0 5px 0 #104f75, 0 13px 23px rgba(31, 93, 155, 0.2);
}

.ghost-button,
.icon-text-button {
  border-color: rgba(177, 201, 225, 0.86);
  background: linear-gradient(180deg, #fff, #edf6fb);
}

@media (max-width: 1380px) and (min-width: 1041px) {
  .view-panel[data-view-panel="home"] .dashboard-layout {
    grid-template-columns: 390px minmax(0, 1fr) 300px;
    gap: 18px;
  }

  .view-panel[data-view-panel="home"] .section-block {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (max-width: 1040px) {
  .selected-badges-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-logo-row {
    min-height: 104px;
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .nav-brand {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
  }

  .nav-links {
    width: 100%;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav-links.is-open {
    display: grid;
  }

  .fan-subnav {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .avatar-clothing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    transform: none;
  }

  .command-center,
  .dashboard-layout,
  .two-column,
  .profile-panel,
  .admin-editor,
  .admin-tool-grid {
    grid-template-columns: 1fr;
  }

  .view-panel[data-view-panel="home"] .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .view-panel[data-view-panel="home"] .main-stack {
    order: 1;
  }

  .view-panel[data-view-panel="home"] .home-left-stack {
    order: 2;
  }

  .view-panel[data-view-panel="home"] .side-stack {
    order: 3;
  }

  .article-live-preview {
    position: static;
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-summary,
  .permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-strip,
  .news-grid,
  .compact-grid.furni-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-grid.badge-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-badge-rail .compact-grid.badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-badge-rail .badge-item.is-compact {
    min-height: 112px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: center;
    gap: 6px;
    padding: 12px 8px;
    text-align: center;
  }

  .home-badge-rail .badge-item.is-compact .badge-art {
    grid-row: auto;
  }

  .clothing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shop-grid,
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-wallet {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .shop-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .selected-badges-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selected-badge-card {
    min-height: 102px;
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 9px;
  }

  .selected-badge-art {
    width: 54px;
    height: 62px;
  }

  .selected-badge-art img {
    width: 50px;
    height: 50px;
  }

  .profile-resource-heading {
    align-items: flex-start;
  }

  #profileFriends {
    grid-template-columns: 1fr;
  }

  .article-edit-mode {
    align-items: stretch;
    flex-direction: column;
  }

  .article-edit-mode .ghost-button {
    width: 100%;
  }

  .published-articles-heading {
    align-items: stretch;
  }

  .published-articles-heading .search-box {
    width: 100%;
  }

  .admin-article-row {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  .admin-article-row > img {
    width: 92px;
  }

  .admin-article-actions {
    grid-column: 1 / -1;
  }

  .admin-article-actions .icon-button {
    flex: 1;
  }

  .admin-article-meta span:nth-child(n+3) {
    display: none;
  }

  .rich-editor-toolbar {
    align-items: stretch;
  }

  .editor-select {
    flex: 1 1 105px;
    min-width: 0;
  }

  .editor-block-select {
    flex-basis: 138px;
  }

  .rich-editor-canvas {
    width: calc(100% - 20px);
    min-height: 310px;
    margin: 10px;
    padding: 22px 18px;
  }

  .editor-toolbar-divider {
    display: none;
  }

  .container {
    width: min(100% - 20px, 1200px);
  }

  .fan-subnav {
    grid-template-columns: 1fr;
    max-height: min(56vh, 360px);
    overflow-y: auto;
    scroll-snap-type: none;
  }

  .fan-subnav-choice {
    width: 100%;
    min-height: 56px;
    scroll-snap-align: none;
  }

  .reward-center-earn {
    grid-template-columns: 1fr;
  }

  .reward-center-earn .reward-row,
  .reward-center-earn #rewardStatus {
    grid-column: 1;
    grid-row: auto;
  }

  .avatar-fitting-heading {
    flex-direction: column;
  }

  .avatar-fitting-actions {
    width: 100%;
  }

  .avatar-fitting-actions button {
    flex: 1;
  }

  .avatar-clothing-toolbar {
    grid-template-columns: 1fr;
  }

  .avatar-clothing-grid {
    grid-template-columns: 1fr;
  }

  .avatar-clothing-card {
    min-height: 360px;
    grid-template-rows: 260px minmax(0, 1fr);
  }

  .avatar-clothing-art img {
    height: 250px;
  }

  .avatar-clothing-results-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .strip-inner,
  .section-heading,
  .news-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .strip-presence {
    display: none;
  }

  .coupon-chip {
    margin-left: 0 !important;
  }

  .nav-actions {
    position: static;
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    transform: none;
  }

  .nav-logo-row {
    min-height: auto;
    grid-template-columns: auto 1fr;
    padding: 12px;
  }

  .nav-brand {
    justify-self: stretch;
    padding: 6px 8px;
  }

  .brand-logo {
    width: clamp(210px, 66vw, 300px);
  }

  .nav-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-choice {
    min-height: 104px;
    width: auto;
    padding: 10px 8px;
    font-size: 0.86rem;
  }

  .nav-shell {
    width: min(100% - 16px, 1540px);
  }

  .nav-links {
    gap: 5px;
    padding: 6px;
  }

  .brand-subtitle {
    font-size: 0.6rem;
  }

  .nav-art-icon {
    width: 58px;
    height: 58px;
  }

  .founder-stats-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .command-center {
    min-height: auto;
    padding-top: 24px;
  }

  .command-copy {
    padding-left: 0;
  }

  .hero-status {
    margin-bottom: 14px;
  }

  h1 {
    font-size: 2.05rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .command-scene {
    min-height: 270px;
  }

  .scene-avatar {
    width: 100px;
  }

  .scene-avatar.three {
    width: 88px;
    left: 36%;
  }

  .scene-avatar.two {
    right: 15%;
  }

  .stats-grid,
  .admin-summary,
  .article-strip,
  .news-grid,
  .compact-grid.badge-grid,
  .compact-grid.furni-grid,
  .admin-grid,
  .permission-grid,
  .form-grid,
  .avatar-builder {
    grid-template-columns: 1fr;
  }

  .home-badge-rail .compact-grid.badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .home-badge-rail .badge-item.is-compact {
    min-height: 124px;
    padding: 9px 5px;
  }

  .home-badge-rail .badge-item.is-compact span {
    font-size: 0.7rem;
  }

  .founder-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clothing-toolbar {
    grid-template-columns: 1fr;
  }

  .clothing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-wardrobe-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-grid,
  .inventory-grid {
    grid-template-columns: 1fr;
  }

  .shop-wallet {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .shop-progress {
    grid-column: auto;
    grid-row: auto;
  }

  .shop-owned-summary {
    padding: 12px 0 0;
    border-top: 1px solid rgba(69, 99, 121, 0.18);
    border-left: 0;
  }

  html[data-theme="dark"] .shop-owned-summary {
    border-top-color: #294459;
  }

  .reward-card {
    min-height: 0;
  }

  .reward-card-footer {
    grid-template-columns: 1fr;
  }

  .account-hero {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px;
    text-align: center;
  }

  .account-hero > img {
    width: 145px;
    height: 160px;
    margin: 0 auto;
  }

  .account-meta,
  .account-hero .profile-cosmetic-line {
    justify-content: center;
  }

  .has-supporter-badge::after,
  .has-collector-badge::after,
  .has-market-badge::after {
    top: 8px;
    right: 8px;
  }

  .habbo-cover-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-price-results {
    grid-template-columns: 1fr;
  }

  .cover-control-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-user-row {
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
  }

  .admin-user-row select {
    grid-column: 1 / -1;
  }

  .points-adjust-form {
    grid-template-columns: 1fr;
  }

  .points-adjust-heading,
  .points-adjust-form .points-reason {
    grid-column: auto;
  }

  .spotlight-article {
    grid-template-columns: 1fr;
  }

  .spotlight-art,
  .spotlight-art img {
    min-height: 230px;
    height: 230px;
  }

  .spotlight-art::after {
    background: linear-gradient(0deg, rgba(12, 40, 62, 0.5), transparent 58%);
  }

  .spotlight-copy {
    padding: 20px;
  }

  .spotlight-copy h3 {
    margin-top: 18px;
    font-size: 1.65rem;
  }

  .spotlight-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .spotlight-actions {
    width: 100%;
  }

  .spotlight-actions .primary-button {
    margin-left: auto;
  }

  .article-card,
  .article-card.compact {
    min-height: 350px;
  }

  .article-card-media {
    height: 180px;
    flex-basis: 180px;
  }

  .article-modal {
    padding: 10px;
  }

  .modal-card {
    max-height: calc(100vh - 20px);
    padding: 0 16px 18px;
  }

  .article-detail-hero {
    height: 280px;
    margin: 0 -16px;
  }

  .article-detail-overlay {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .price-row {
    grid-template-columns: 1fr auto;
  }

  .price-row em {
    grid-column: 2;
  }

  .price-search-panel,
  .price-collections-head,
  .price-results-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .price-search-box {
    min-width: 0;
  }

  .price-collections {
    display: flex;
    overflow-x: auto;
    max-height: none;
    padding-bottom: 12px;
  }

  .price-collection-card {
    min-width: 210px;
  }

  .price-board .price-table {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .price-card {
    min-height: 246px;
  }

  .view-panel[data-view-panel="hotel"] .badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .view-panel[data-view-panel="hotel"] .badge-item {
    min-height: 170px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .inline-form,
  .toolbar,
  .quick-actions {
    width: 100%;
  }

  .inline-form input,
  .select-control,
  .search-box {
    width: 100%;
    min-width: 0;
  }

  .price-hidden-select {
    width: 1px !important;
    min-width: 0 !important;
    height: 1px !important;
  }
}

/* Day / night theme switch */
.theme-toggle {
  position: relative;
  width: 66px;
  height: 36px;
  flex: 0 0 66px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  padding: 3px;
  border: 1px solid rgba(255, 219, 126, 0.32);
  border-radius: 18px;
  color: #c1d7e4;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.22);
}

.theme-toggle-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: color 180ms ease;
}

.theme-toggle-icon svg {
  width: 16px;
  height: 16px;
}

.theme-toggle-thumb {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border: 1px solid #ffe39a;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff4b5, #f2bc3e);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

html[data-theme="light"] .theme-toggle .is-sun {
  color: #5b3c00;
}

html[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(30px);
  border-color: #8ebdff;
  background: linear-gradient(180deg, #d9e8ff, #7199dc);
}

html[data-theme="dark"] .theme-toggle .is-moon {
  color: #102542;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111d;
  --paper: #101d2a;
  --paper-soft: #132230;
  --paper-glass: rgba(14, 28, 41, 0.94);
  --ink: #e8f1f7;
  --muted: #91a6b8;
  --line: #263c50;
  --line-strong: #36566f;
  --teal: #22c5b5;
  --blue: #4a8dff;
  --coral: #ff7274;
  --amber: #f4c95d;
  --green: #68d391;
  --violet: #9b82ef;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 24px 52px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] body {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(4, 12, 22, 0.9), rgba(6, 17, 28, 0.96)),
    linear-gradient(90deg, rgba(67, 119, 155, 0.07) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(36, 197, 181, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    url("assets/habbosal-city-bg.webp") center top / cover no-repeat fixed,
    #07111d;
}

html[data-theme="dark"] .top-strip {
  border-bottom-color: rgba(82, 162, 184, 0.42);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 38px 100%,
    linear-gradient(90deg, #040b14, #091b2b 54%, #07343a);
}

html[data-theme="dark"] .site-header {
  border-bottom-color: rgba(94, 136, 165, 0.24);
  background:
    linear-gradient(180deg, rgba(2, 9, 16, 0.5), rgba(6, 19, 30, 0.74)),
    linear-gradient(90deg, rgba(9, 29, 43, 0.44), rgba(5, 19, 29, 0.64));
}

html[data-theme="dark"] .nav-shell {
  border-color: rgba(76, 152, 181, 0.58);
  background: #071522;
  box-shadow:
    0 0 0 3px rgba(1, 8, 14, 0.52),
    0 8px 0 rgba(1, 7, 12, 0.45),
    0 28px 70px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .nav-shell::after {
  background: linear-gradient(90deg, transparent, #28b7ad 18%, #7ac9e8 50%, #567fe8 82%, transparent);
  box-shadow: 0 2px 12px rgba(50, 187, 198, 0.4);
}

html[data-theme="dark"] .nav-logo-row {
  border-bottom-color: rgba(76, 152, 181, 0.36);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 80px 100%,
    linear-gradient(180deg, #0b2235, #061522);
}

html[data-theme="dark"] .nav-logo-row::before,
html[data-theme="dark"] .nav-logo-row::after {
  border-color: #49afa9;
  background: #0c2a3d;
}

html[data-theme="dark"] .brand-logo {
  filter: saturate(0.88) brightness(0.94) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.36));
}

html[data-theme="dark"] .brand-subtitle,
html[data-theme="dark"] .strip-presence {
  color: #92b7c8;
}

html[data-theme="dark"] .nav-links {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 70px 100%,
    #050f19;
}

html[data-theme="dark"] .nav-choice {
  color: #91adbf;
  background: rgba(255, 255, 255, 0.025);
}

html[data-theme="dark"] .nav-choice.is-active,
html[data-theme="dark"] .nav-choice.is-menu-open,
html[data-theme="dark"] .nav-choice:hover {
  color: #d8ffff;
  border-color: rgba(54, 197, 185, 0.4);
  background: linear-gradient(180deg, rgba(20, 97, 106, 0.6), rgba(8, 47, 61, 0.84));
}

html[data-theme="dark"] .nav-choice.is-active::before,
html[data-theme="dark"] .nav-choice.is-menu-open::before,
html[data-theme="dark"] .nav-choice:hover::before {
  background: linear-gradient(90deg, #34dbc2, #5796ff);
}

html[data-theme="dark"] .fan-subnav {
  border-top-color: #18394d;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 70px 100%,
    #071723;
}

html[data-theme="dark"] .fan-subnav-choice {
  color: #b8cedb;
  border-color: #234358;
  background: #0b1e2c;
}

html[data-theme="dark"] .fan-subnav-choice > svg {
  color: #54d8ca;
  border-color: #28566a;
  background: #0c2936;
}

html[data-theme="dark"] .fan-subnav-choice small {
  color: #7893a5;
}

html[data-theme="dark"] .fan-subnav-choice:hover,
html[data-theme="dark"] .fan-subnav-choice.is-active {
  color: #e5fbfa;
  border-color: rgba(52, 219, 194, 0.42);
  background: linear-gradient(180deg, #123747, #0b2837);
}

html[data-theme="dark"] .fan-subnav-choice.is-active {
  box-shadow: inset 0 -3px 0 #34dbc2, 0 8px 18px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .reward-center-earn {
  border-color: #29495e;
  background:
    linear-gradient(110deg, rgba(31, 200, 181, 0.09), rgba(67, 126, 230, 0.08)),
    #091b28;
}

html[data-theme="dark"] .reward-center-icon {
  color: #70e0d2;
  border-color: #2d665f;
  background: #103139;
}

html[data-theme="dark"] .reward-center-divider::before,
html[data-theme="dark"] .reward-center-divider::after {
  background: #294257;
}

html[data-theme="dark"] .nav-art-icon {
  background: linear-gradient(180deg, #dcebf1, #a9c2cd);
}

html[data-theme="dark"] .nav-user,
html[data-theme="dark"] .hero-status {
  color: #ddecf4;
  border-color: rgba(101, 157, 188, 0.3);
  background: rgba(8, 28, 42, 0.8);
}

html[data-theme="dark"] .hero-status > span:last-child,
html[data-theme="dark"] .nav-user small {
  color: #8ca9ba;
}

html[data-theme="dark"] .command-copy h1 {
  color: #f0f7fb;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] .command-copy > p {
  color: #a9bdca;
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-heading .eyebrow {
  color: #37c8ba;
}

html[data-theme="dark"] .command-scene {
  border-color: rgba(79, 167, 184, 0.52);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 42px 100%,
    linear-gradient(180deg, #123c57, #176b73 58%, #615837);
}

html[data-theme="dark"] .section-block,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .badge-item,
html[data-theme="dark"] .furni-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .profile-mini,
html[data-theme="dark"] .reward-card,
html[data-theme="dark"] .clothing-card {
  color: var(--ink);
  border-color: #263d50;
  background: linear-gradient(180deg, rgba(18, 34, 48, 0.98), rgba(12, 26, 38, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 13px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] .section-block::before {
  background: linear-gradient(90deg, #158e91, #2ed2bb 36%, #657ee9 72%, #a465de);
}

html[data-theme="dark"] .section-heading {
  border-bottom-color: rgba(70, 99, 122, 0.46);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .reward-copy strong,
html[data-theme="dark"] .article-card h3 {
  color: #edf5fa;
}

html[data-theme="dark"] .panel-note,
html[data-theme="dark"] .article-card p,
html[data-theme="dark"] .comment-row p,
html[data-theme="dark"] .field-note,
html[data-theme="dark"] .status-line,
html[data-theme="dark"] .status-panel,
html[data-theme="dark"] .empty-state {
  color: #8fa5b6;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .news-archive .search-box {
  color: #e3edf3;
  border-color: #2b465c;
  background: #0a1723;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #688194;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: #36bdb4;
  box-shadow: 0 0 0 3px rgba(54, 189, 180, 0.14);
}

html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .icon-text-button,
html[data-theme="dark"] .tab,
html[data-theme="dark"] .segment {
  color: #d5e4ec;
  border-color: #2b465c;
  background: linear-gradient(180deg, #15283a, #0d1e2d);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .primary-button {
  border-color: rgba(61, 212, 194, 0.32);
  background: linear-gradient(135deg, #0c9e99, #3f71d7);
  box-shadow: 0 5px 0 #073f5a, 0 13px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .article-card-media,
html[data-theme="dark"] .badge-art,
html[data-theme="dark"] .furni-icon-img,
html[data-theme="dark"] .clothing-card-image,
html[data-theme="dark"] .reward-icon,
html[data-theme="dark"] .nav-user-avatar,
html[data-theme="dark"] .price-row-visual {
  border-color: #2a465b;
  background: #0a1a27;
}

html[data-theme="dark"] .article-card-footer,
html[data-theme="dark"] .section-heading,
html[data-theme="dark"] .article-detail-meta,
html[data-theme="dark"] .article-comments-heading,
html[data-theme="dark"] .audit-list article {
  border-color: #263d50;
}

html[data-theme="dark"] .article-byline,
html[data-theme="dark"] .article-metrics span,
html[data-theme="dark"] .badge-item span,
html[data-theme="dark"] .furni-card span,
html[data-theme="dark"] .furni-card em,
html[data-theme="dark"] .team-card span,
html[data-theme="dark"] .user-card span,
html[data-theme="dark"] .partner-card span,
html[data-theme="dark"] .shop-grid span,
html[data-theme="dark"] .new-member-row small,
html[data-theme="dark"] .new-member-row span,
html[data-theme="dark"] .leader-row em {
  color: #859dad;
}

html[data-theme="dark"] .comment-row,
html[data-theme="dark"] .leader-row,
html[data-theme="dark"] .new-member-row,
html[data-theme="dark"] .price-row,
html[data-theme="dark"] .chat-log,
html[data-theme="dark"] .verification-panel,
html[data-theme="dark"] .account-meta span,
html[data-theme="dark"] .profile-cosmetic-line span,
html[data-theme="dark"] .profile-cosmetic-line small,
html[data-theme="dark"] .reward-owned,
html[data-theme="dark"] .comment-form {
  color: #dbe8ef;
  border-color: #294459;
  background: #0c1d2b;
}

html[data-theme="dark"] #homeComments .home-comment-card {
  border-color: rgba(62, 113, 215, 0.38);
  background:
    radial-gradient(circle at 20% 115%, rgba(99, 75, 196, 0.24), transparent 44%),
    linear-gradient(145deg, #10283b, #0a1723 72%);
  box-shadow: inset 0 -36px 52px rgba(79, 103, 194, 0.16), 0 14px 30px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .comment-avatar {
  border-color: #2a4b61;
  background:
    linear-gradient(135deg, rgba(32, 174, 164, 0.15), rgba(65, 103, 198, 0.16)),
    #091925;
}

html[data-theme="dark"] .new-member-row img {
  border-color: rgba(58, 190, 178, 0.38);
  background: linear-gradient(145deg, rgba(13, 56, 72, 0.95), rgba(8, 24, 36, 0.98));
}

html[data-theme="dark"] .avatar-fitting-room {
  border-top-color: #263d50;
}

html[data-theme="dark"] .avatar-worn-strip {
  border-color: #294b5e;
  background: #081925;
}

html[data-theme="dark"] .avatar-worn-strip > span,
html[data-theme="dark"] .avatar-clothing-types button {
  color: #a8bfcc;
  border-color: #29485d;
  background: #0d2231;
}

html[data-theme="dark"] .avatar-clothing-types button:hover,
html[data-theme="dark"] .avatar-clothing-types button.is-active {
  color: #89e9dd;
  border-color: rgba(55, 200, 186, 0.42);
  background: #10313a;
}

html[data-theme="dark"] .avatar-clothing-results-head {
  border-color: #29485d;
  background: #0a1b28;
}

html[data-theme="dark"] .avatar-clothing-card {
  color: #dceaf1;
  border-color: #29485d;
  background: linear-gradient(180deg, #102534, #0b1d2b);
}

html[data-theme="dark"] .avatar-clothing-art {
  border-bottom-color: #29485d;
  background:
    linear-gradient(90deg, rgba(76, 143, 174, 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgba(55, 200, 186, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
    #091a27;
}

html[data-theme="dark"] .avatar-clothing-card.is-nft {
  border-color: rgba(205, 132, 238, 0.48);
}

html[data-theme="dark"] .avatar-clothing-card.is-nft .avatar-clothing-art {
  background:
    linear-gradient(90deg, rgba(211, 133, 238, 0.1) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(rgba(65, 207, 194, 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    #15172d;
}

html[data-theme="dark"] .avatar-clothing-info > strong {
  color: #eef7fb;
}

html[data-theme="dark"] .avatar-clothing-tags b {
  color: #9bb2c0;
  background: #172d3c;
}

html[data-theme="dark"] .avatar-clothing-tags b.is-nft {
  color: #e1b8f4;
  background: #352044;
}

html[data-theme="dark"] .avatar-clothing-grid .avatar-clothing-card.is-selected {
  border-color: #37c8ba;
  background: linear-gradient(180deg, #10333b, #102638);
  box-shadow: 0 0 0 2px rgba(55, 200, 186, 0.16);
}

html[data-theme="dark"] .avatar-worn-strip {
  border-color: #29485d;
  background: #091a27;
}

html[data-theme="dark"] .avatar-worn-strip > span {
  border-color: #29485d;
  background: linear-gradient(180deg, #112838, #0c1f2d);
}

html[data-theme="dark"] .avatar-worn-thumb {
  border-color: #29485d;
  background: #081722;
}

html[data-theme="dark"] .avatar-worn-strip b {
  color: #eef7fb;
}

html[data-theme="dark"] .avatar-worn-strip > span.is-nft {
  border-color: rgba(205, 132, 238, 0.45);
  background: linear-gradient(135deg, #251a31, #102735);
}

html[data-theme="dark"] .avatar-worn-strip > span.is-nft b {
  color: #e7c3f5;
}

html[data-theme="dark"] .clothing-card.is-nft {
  border-color: rgba(205, 132, 238, 0.44);
}

html[data-theme="dark"] .price-row b,
html[data-theme="dark"] .archive-summary,
html[data-theme="dark"] .profile-mini span {
  color: #79b7e8;
}

html[data-theme="dark"] .shop-balance {
  color: #e3c46e;
}

html[data-theme="dark"] .shop-wallet {
  border-color: rgba(220, 183, 82, 0.24);
  background:
    linear-gradient(90deg, rgba(103, 76, 18, 0.22), rgba(18, 53, 68, 0.28)),
    #0b1b28;
}

html[data-theme="dark"] .shop-balance strong {
  color: #f4d479;
}

html[data-theme="dark"] .shop-balance-icon {
  color: #f2c85c;
  border-color: rgba(226, 184, 75, 0.34);
  background: linear-gradient(145deg, #3b3018, #211d15);
}

html[data-theme="dark"] .shop-progress-track {
  background: #172c3b;
}

html[data-theme="dark"] .shop-owned-summary {
  border-left-color: #294459;
}

html[data-theme="dark"] .shop-secure-label {
  color: #70ddd0;
  border-color: rgba(55, 200, 186, 0.28);
  background: #0b2a2e;
}

html[data-theme="dark"] .reward-card-footer {
  border-top-color: #263d50;
}

html[data-theme="dark"] .reward-card-footer button:disabled {
  color: #71899a;
  border-color: #294459;
  background: #0a1723;
}

html[data-theme="dark"] .reward-card.is-owned {
  border-color: rgba(55, 200, 186, 0.42);
}

html[data-theme="dark"] button.reward-owned:hover {
  color: #8ce9de;
  border-color: rgba(55, 200, 186, 0.5);
  background: #10313a;
}

html[data-theme="dark"] .news-archive .segment-row {
  border-color: #273f52;
  background: #0a1824;
}

html[data-theme="dark"] .news-archive .segment {
  background: transparent;
}

html[data-theme="dark"] .news-archive .segment.is-active {
  background: linear-gradient(135deg, #0d8886, #365fa9);
}

html[data-theme="dark"] .account-hero {
  color: #edf5fa;
  border-color: #2c5269;
  background:
    linear-gradient(100deg, rgba(9, 27, 40, 0.97), rgba(12, 47, 53, 0.93)),
    url("assets/habbosal-city-bg.webp") center / cover;
}

html[data-theme="dark"] .account-hero p {
  color: #91a9b9;
}

html[data-theme="dark"] .modal-card {
  color: var(--ink);
  border-color: #31566f;
  background: #0c1b29;
}

html[data-theme="dark"] .member-profile-hero {
  border-color: #29485d;
  background:
    linear-gradient(90deg, rgba(55, 200, 186, 0.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(91, 123, 232, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(135deg, #0a1d2a, #10283a 68%, #29261a);
}

html[data-theme="dark"] .member-profile-avatar-wrap {
  border-color: #2a5365;
  background:
    radial-gradient(circle at 50% 60%, rgba(55, 200, 186, 0.14), transparent 48%),
    rgba(5, 20, 31, 0.78);
}

html[data-theme="dark"] .member-profile-avatar-wrap > span {
  color: #9bb0bd;
  border-color: #29485d;
  background: rgba(8, 26, 39, 0.94);
}

html[data-theme="dark"] .member-profile-avatar-wrap > span.is-online {
  color: #74e7bc;
  border-color: rgba(55, 200, 186, 0.42);
  background: #10352f;
}

html[data-theme="dark"] .member-profile-copy h2 {
  color: #eef7fb;
}

html[data-theme="dark"] .member-profile-bio,
html[data-theme="dark"] .member-profile-stats small {
  color: #91a9b9;
}

html[data-theme="dark"] .member-profile-stats > span {
  border-color: #29485d;
  background: rgba(8, 26, 39, 0.82);
}

html[data-theme="dark"] .furni-market-stats article,
html[data-theme="dark"] .furni-chart-wrap,
html[data-theme="dark"] .furni-comment,
html[data-theme="dark"] .furni-comment-form,
html[data-theme="dark"] .hotel-price-card {
  border-color: #29485d;
  background-color: #102534;
}

html[data-theme="dark"] .furni-market-stats strong,
html[data-theme="dark"] .furni-detail-heading h3,
html[data-theme="dark"] .furni-comment strong {
  color: #eef7fb;
}

html[data-theme="dark"] .hotel-price-head strong,
html[data-theme="dark"] .hotel-price-value strong {
  color: #eef7fb;
}

html[data-theme="dark"] .hotel-price-card.is-unavailable {
  background: #0d202e;
}

html[data-theme="dark"] .furni-comment p {
  color: #c4d4de;
}

html[data-theme="dark"] .comment-row.is-profile-link:hover,
html[data-theme="dark"] .comment-row.is-profile-link:focus-visible,
html[data-theme="dark"] .new-member-row.is-profile-link:hover,
html[data-theme="dark"] .new-member-row.is-profile-link:focus-visible,
html[data-theme="dark"] .furni-comment.is-profile-link:hover,
html[data-theme="dark"] .furni-comment.is-profile-link:focus-visible {
  border-color: #2abfb1;
  background: #123143;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), inset 3px 0 #2dd4bf;
}

html[data-theme="dark"] .comment-profile-cue {
  color: #54dfd0;
}

html[data-theme="dark"] .chart-axis {
  stroke: rgba(158, 196, 213, 0.22);
}

html[data-theme="dark"] .chart-label {
  fill: #9eb8c7;
}

html[data-theme="dark"] .article-detail-lead {
  color: #c5d7e1;
  border-left-color: #31c7b5;
}

html[data-theme="dark"] .article-body {
  color: #b0c2cd;
}

html[data-theme="dark"] .rich-editor-shell {
  border-color: #2a465a;
  background: #071724;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .rich-editor-toolbar {
  border-color: #29465a;
  background: linear-gradient(180deg, #142c3c, #0c1d2b);
}

html[data-theme="dark"] .rich-editor-toolbar button,
html[data-theme="dark"] .editor-color-control,
html[data-theme="dark"] .editor-select {
  color: #d7e7ef;
  border-color: #31526a;
  background-color: #0a1b29;
}

html[data-theme="dark"] .rich-editor-toolbar button:hover,
html[data-theme="dark"] .editor-color-control:hover {
  color: #5ee3d4;
  border-color: #28bcb1;
  background: #123344;
}

html[data-theme="dark"] .editor-toolbar-divider {
  background: #315064;
}

html[data-theme="dark"] .rich-editor-canvas {
  color: #d6e4eb;
  border-color: #29465a;
  background: #102332;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .rich-editor-canvas:empty::before {
  color: #7890a0;
}

html[data-theme="dark"] .rich-editor-canvas blockquote,
html[data-theme="dark"] .article-preview-content blockquote,
html[data-theme="dark"] .article-body blockquote {
  color: #d7e5eb;
  border-left-color: #e5be42;
  background: #182d38;
}

html[data-theme="dark"] .article-preview-content {
  color: #afc3ce;
  border-color: #29465a;
  background: #0a1b29;
}

html[data-theme="dark"] .article-preview-content h2,
html[data-theme="dark"] .article-preview-content h3,
html[data-theme="dark"] .article-body h2,
html[data-theme="dark"] .article-body h3,
html[data-theme="dark"] .article-body h4 {
  color: #f0f6f8;
}

html[data-theme="dark"] .article-edit-mode {
  color: #dbf7f2;
  border-color: #2b756f;
  background: linear-gradient(135deg, rgba(39, 211, 183, 0.12), rgba(78, 145, 255, 0.08));
}

html[data-theme="dark"] .admin-article-row {
  border-color: #29485d;
  background: #102534;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .admin-article-row:hover,
html[data-theme="dark"] .admin-article-row.is-editing {
  border-color: #2abfb1;
  background: #123143;
}

html[data-theme="dark"] .admin-article-copy > strong {
  color: #eef7fb;
}

html[data-theme="dark"] .admin-article-actions .danger {
  color: #ff7d87;
  border-color: rgba(255, 96, 108, 0.35);
  background: rgba(255, 82, 96, 0.08);
}

html[data-theme="dark"] .modal-comments .comment-row {
  background: #102332;
}

html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .compact-form,
html[data-theme="dark"] .cover-controls,
html[data-theme="dark"] .admin-price-preview,
html[data-theme="dark"] .admin-tool-block {
  border-color: #2a465a;
  background: #0c1d2b;
}

html[data-theme="dark"] .price-management-badge {
  color: #63e3d5;
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(45, 212, 191, 0.1);
}

html[data-theme="dark"] .price-management-studio {
  border-color: #2a665f;
  background:
    linear-gradient(135deg, rgba(30, 198, 177, 0.09), transparent 38%),
    #0c1d2b;
}

html[data-theme="dark"] .price-management-studio .admin-price-results:not(:empty) {
  border-color: #29485d;
  background: rgba(6, 24, 36, 0.78);
}

html[data-theme="dark"] .points-adjust-form {
  border-color: #2d665f;
  background:
    linear-gradient(100deg, rgba(42, 211, 190, 0.09), rgba(73, 114, 232, 0.08)),
    #0c1f2d;
  box-shadow: inset 4px 0 0 #35cbbb, 0 12px 26px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .points-adjust-heading {
  border-bottom-color: #294459;
}

html[data-theme="dark"] .points-adjust-icon,
html[data-theme="dark"] .admin-points-button {
  color: #78e4d7;
  border-color: #2b625f;
  background: #103139;
}

html[data-theme="dark"] .sync-action-card,
html[data-theme="dark"] .sync-schedule-strip > span,
html[data-theme="dark"] .habbo-sync-log {
  border-color: #29495e;
  background-color: #0a1a27;
}

html[data-theme="dark"] .sync-action-card {
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.1), transparent 55%),
    #0a1a27;
}

html[data-theme="dark"] .sync-log-row,
html[data-theme="dark"] .habbo-sync-log summary {
  border-color: #294257;
}

html[data-theme="dark"] .switch-control > span {
  border-color: #38566a;
  background: #1b3343;
}

html[data-theme="dark"] .founder-stats-panel {
  color: #eaf4f8;
  border-color: rgba(235, 193, 75, 0.42);
  background:
    linear-gradient(120deg, rgba(108, 88, 27, 0.3), rgba(17, 45, 53, 0.92)),
    #102432;
}

html[data-theme="dark"] label {
  color: #c3d4df;
}

html[data-theme="dark"] .status-panel,
html[data-theme="dark"] .verification-panel,
html[data-theme="dark"] .check-control,
html[data-theme="dark"] code {
  color: #c7d8e2;
  border-color: #29475c;
  background: #0a1a27;
}

html[data-theme="dark"] .chat-panel {
  background: linear-gradient(180deg, rgba(15, 36, 50, 0.98), rgba(8, 26, 38, 0.98));
}

html[data-theme="dark"] .chat-message {
  color: #cbdbe4;
  border-color: #294b5f;
  background: linear-gradient(135deg, #102737, #0c202e);
}

html[data-theme="dark"] .chat-avatar {
  border-color: #31566d;
  background: #091a27;
}

html[data-theme="dark"] .chat-message-content p {
  color: #b9ccd7;
}

html[data-theme="dark"] .chat-message-vip {
  color: #f3dfa5;
  border-color: rgba(218, 171, 61, 0.38);
  background: linear-gradient(90deg, #302714, #102e30);
}

html[data-theme="dark"] .chat-message-aqua {
  color: #bdece7;
  border-color: rgba(54, 205, 190, 0.45);
  background: linear-gradient(90deg, #0c3437, #102c42);
}

html[data-theme="dark"] .chat-message-neon {
  color: #eef4ff;
  border-color: rgba(137, 108, 255, 0.62);
  background: linear-gradient(100deg, #101d36, #281842 58%, #0b353b);
  box-shadow: inset 3px 0 0 #4be3d1, 0 0 18px rgba(111, 83, 255, 0.24);
}

html[data-theme="dark"] .chat-message-vip .chat-style-mark {
  color: #f1c95e;
}

html[data-theme="dark"] .has-profile-sunset {
  color: #fff4eb !important;
  border-color: rgba(238, 126, 98, 0.66) !important;
  background: linear-gradient(120deg, #3d251f, #40223b 58%, #202a44) !important;
}

html[data-theme="dark"] .has-profile-cyber {
  background:
    linear-gradient(90deg, rgba(67, 245, 218, 0.08) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(112, 96, 255, 0.09) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(135deg, #061724, #151331 68%, #072b31) !important;
}

html[data-theme="dark"] .reward-card.reward-style-collector .reward-icon,
html[data-theme="dark"] .reward-card.reward-style-aqua .reward-icon {
  color: #68e5d7;
  border-color: rgba(55, 200, 186, 0.38);
  background: #103238;
}

html[data-theme="dark"] .reward-card.reward-style-market .reward-icon,
html[data-theme="dark"] .reward-card.reward-style-sunset .reward-icon {
  color: #f3c45d;
  border-color: rgba(218, 171, 61, 0.36);
  background: #342a17;
}

html[data-theme="dark"] .reward-card.reward-style-neon .reward-icon,
html[data-theme="dark"] .reward-card.reward-style-cyber .reward-icon {
  color: #b5a5ff;
  border-color: rgba(137, 108, 255, 0.42);
  background: #211b3b;
}

html[data-theme="dark"] .profile-wardrobe {
  border-color: #2c5961;
  background: linear-gradient(135deg, rgba(15, 55, 59, 0.96), rgba(29, 35, 49, 0.96));
}

html[data-theme="dark"] .selected-badges-showcase {
  border-color: rgba(213, 166, 44, 0.38);
  background:
    linear-gradient(105deg, rgba(122, 91, 20, 0.22), rgba(13, 68, 66, 0.16) 58%, rgba(46, 69, 136, 0.16)),
    #0c1e2c;
}

html[data-theme="dark"] .selected-badge-card,
html[data-theme="dark"] .profile-resource-heading,
html[data-theme="dark"] .profile-tabs .segment em {
  border-color: #29495e;
  background: #0a1a27;
}

html[data-theme="dark"] .selected-badge-art {
  background: #102737;
}

html[data-theme="dark"] .selected-badge-card > div:last-child > span {
  color: #78b9df;
}

html[data-theme="dark"] .profile-badge-item.is-selected-badge {
  border-color: rgba(219, 170, 43, 0.46);
  background:
    linear-gradient(180deg, rgba(92, 70, 17, 0.24), rgba(10, 28, 40, 0.98)),
    #0a1c28;
}

html[data-theme="dark"] .profile-tabs .segment.is-active em {
  color: #80e4d7;
  border-color: #347068;
  background: #103139;
}

html[data-theme="dark"] .meta-chips span {
  color: #c9dbe5;
  border: 1px solid #29485d;
  background: #102839;
}

html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .admin-price-result,
html[data-theme="dark"] .article-live-preview,
html[data-theme="dark"] .habbo-cover-option {
  color: #dce9f0;
  border-color: #29465a;
  background: linear-gradient(180deg, #122737, #0c1d2b);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .resource-card img,
html[data-theme="dark"] .team-card img,
html[data-theme="dark"] .user-card img,
html[data-theme="dark"] .leader-row img,
html[data-theme="dark"] .profile-card img,
html[data-theme="dark"] .avatar-builder > img,
html[data-theme="dark"] .admin-price-result-image,
html[data-theme="dark"] .admin-price-image,
html[data-theme="dark"] .article-preview-media {
  border-color: #2c4b60;
  background: #0a1a27;
}

html[data-theme="dark"] .avatar-builder > img {
  background:
    linear-gradient(45deg, rgba(57, 154, 161, 0.12) 25%, transparent 25%) 0 0 / 22px 22px,
    #0a1a27;
}

html[data-theme="dark"] .habbo-cover-option:hover,
html[data-theme="dark"] .habbo-cover-option.is-active,
html[data-theme="dark"] .admin-price-result:hover {
  border-color: #34c7b7;
  background: #12342f;
}

html[data-theme="dark"] .reward-card.is-equipped {
  border-color: #2e8278;
  background: linear-gradient(145deg, #10322f, #102338);
}

html[data-theme="dark"] .reward-icon {
  color: #77aaff;
  border-color: #294b65;
  background: #10283b;
}

html[data-theme="dark"] .price-search-box input {
  color: #eaf3f8;
  border-color: #31566e;
  background: #071724;
  box-shadow: inset 0 0 0 2px #102c3e;
}

html[data-theme="dark"] .price-card {
  color: #e8f2f7;
  border-color: #294b60;
  background-color: #0b1d2a;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(32, 198, 167, 0.13), transparent 34%),
    linear-gradient(30deg, rgba(104, 157, 183, 0.12) 1px, transparent 1px),
    linear-gradient(150deg, rgba(104, 157, 183, 0.12) 1px, transparent 1px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .price-card-tag strong {
  color: #edf7fb;
  background: rgba(8, 30, 44, 0.82);
}

html[data-theme="dark"] .price-card-tag img,
html[data-theme="dark"] .price-card-tag .pixel-furni,
html[data-theme="dark"] .price-furni-image.is-icon-fallback {
  border-color: #31546a;
  background: rgba(10, 28, 40, 0.88);
}

html[data-theme="dark"] .badge-item em {
  color: #8bc8f1;
  background: #102c40;
}

html[data-theme="dark"] .badge-item p {
  color: #8fa7b7;
}

html[data-theme="dark"] .account-meta span {
  color: #c9dce7;
  border-color: #2e5168;
  background: rgba(10, 31, 45, 0.82);
}

html[data-theme="dark"] .community-sidebar,
html[data-theme="dark"] .community-profile-list .team-card,
html[data-theme="dark"] .community-profile-list .user-card {
  border-color: #29475b;
  background:
    linear-gradient(100deg, rgba(24, 103, 100, 0.12), transparent 45%),
    #0d202e;
}

html[data-theme="dark"] .community-tabs .segment {
  color: #dce9f0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .community-tabs .segment:hover,
html[data-theme="dark"] .community-tabs .segment.is-active {
  color: #eef8fb;
  border-color: #2b5867;
  background: linear-gradient(90deg, rgba(23, 122, 119, 0.28), rgba(45, 91, 151, 0.2));
  box-shadow: inset 4px 0 0 #2dc8b7;
}

html[data-theme="dark"] .community-avatar-wrap,
html[data-theme="dark"] .community-profile-stats > span {
  border-color: #29485d;
  background-color: #091b28;
}

html[data-theme="dark"] .community-role {
  color: #70e1d2 !important;
  background: rgba(32, 198, 181, 0.14);
}

html[data-theme="dark"] .community-role[data-role="duzenekci"],
html[data-theme="dark"] .community-role[data-role="bas_duzenekci"],
html[data-theme="dark"] .community-role[data-role="mobinator"] {
  color: #7ce9dc !important;
  border-color: rgba(55, 200, 186, 0.38);
  background: linear-gradient(135deg, rgba(20, 102, 102, 0.34), rgba(36, 72, 128, 0.24));
}

html[data-theme="dark"] .community-role[data-role="developer"] {
  color: #c3b8ff !important;
  border-color: rgba(137, 108, 255, 0.42);
  background: linear-gradient(135deg, rgba(77, 56, 133, 0.42), rgba(31, 74, 112, 0.28));
}

html[data-theme="dark"] .community-role[data-role="kurucu"] {
  color: #ffd66c !important;
  border-color: rgba(231, 177, 54, 0.45);
  background: linear-gradient(135deg, rgba(113, 73, 14, 0.48), rgba(71, 54, 20, 0.34));
}

html[data-theme="dark"] .community-role[data-role="yonetici"] {
  color: #ff969e !important;
  border-color: rgba(232, 85, 96, 0.42);
  background: linear-gradient(135deg, rgba(113, 35, 44, 0.46), rgba(74, 41, 45, 0.3));
}

html[data-theme="dark"] .community-role[data-role="moderator"] {
  color: #ff9ed4 !important;
  border-color: rgba(229, 83, 166, 0.42);
  background: linear-gradient(135deg, rgba(112, 35, 91, 0.48), rgba(54, 43, 91, 0.32));
}

html[data-theme="dark"] .community-role[data-role="mimar"],
html[data-theme="dark"] .community-role[data-role="bas_mimar"] {
  color: #f2ce68 !important;
  border-color: rgba(214, 165, 31, 0.4);
  background: linear-gradient(135deg, rgba(105, 78, 14, 0.44), rgba(69, 58, 25, 0.3));
}

html[data-theme="dark"] .community-role[data-role="oyun_destek"],
html[data-theme="dark"] .community-role[data-role="bas_oyun_destek"] {
  color: #8bcdf6 !important;
  border-color: rgba(64, 151, 207, 0.42);
  background: linear-gradient(135deg, rgba(32, 81, 116, 0.46), rgba(28, 57, 77, 0.3));
}

html[data-theme="dark"] .community-role[data-role="haberci"],
html[data-theme="dark"] .community-role[data-role="bas_haberci"] {
  color: #e8c28a !important;
  border-color: rgba(185, 133, 72, 0.4);
  background: linear-gradient(135deg, rgba(91, 62, 30, 0.46), rgba(65, 49, 32, 0.3));
}

html[data-theme="dark"] .site-footer {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 12px, transparent 12px 24px) 0 0 / 24px 100%,
    linear-gradient(135deg, #040b13, #0d2233 52%, #07383c);
}

@media (max-width: 680px) {
  .member-profile-modal {
    padding: 0;
  }

  .member-profile-card {
    width: 100%;
    max-height: 100vh;
    padding: 0 14px 18px;
    border-radius: 0;
  }

  .member-profile-hero {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    margin: 0 -14px;
    padding: 54px 14px 20px;
  }

  .member-profile-hero.has-supporter-badge::after,
  .member-profile-hero.has-collector-badge::after,
  .member-profile-hero.has-market-badge::after {
    top: 14px;
    right: 62px;
    max-width: calc(100% - 82px);
  }

  .member-profile-avatar-wrap {
    height: 154px;
  }

  .member-profile-avatar-wrap img {
    height: 148px;
  }

  .member-profile-copy h2 {
    font-size: 1.45rem;
  }

  .member-profile-bio {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .member-profile-stats {
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 12px 0 10px;
  }

  .member-profile-stats > span {
    padding: 7px 8px;
  }

  .member-profile-cosmetics {
    display: none;
  }

  .member-profile-wardrobe .worn-clothing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .furni-modal {
    padding: 0;
  }

  .furni-modal-card {
    width: 100%;
    max-height: 100vh;
    padding: 0 16px 20px;
    border-radius: 0;
  }

  .furni-profile-hero {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    margin: 0 -16px;
    padding: 54px 16px 22px;
  }

  .furni-profile-art {
    height: 140px;
  }

  .furni-profile-art img {
    max-height: 122px;
  }

  .furni-profile-copy h2 {
    font-size: 1.38rem;
  }

  .furni-profile-copy > p,
  .furni-profile-tags span:nth-child(2) {
    display: none;
  }

  .furni-current-price {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 12px 14px;
  }

  .furni-current-price strong {
    grid-row: 2;
    margin: 3px 0 0;
  }

  .furni-current-price span {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .furni-market-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotel-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .furni-chart-wrap {
    overflow-x: auto;
  }

  .furni-detail-heading {
    align-items: start;
  }

  .furni-comment {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .furni-comment > img {
    width: 38px;
    height: 38px;
  }

  .theme-toggle {
    width: 62px;
    flex-basis: 62px;
  }

  html[data-theme="dark"] .nav-actions {
    padding-top: 2px;
  }

  .price-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .price-row-visual {
    width: 46px;
    height: 46px;
  }

  .price-row em {
    grid-column: 3;
  }

  .price-row b {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 1040px) {
  .community-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-profile-list .team-card,
  .community-profile-list .user-card {
    grid-template-columns: 92px minmax(0, 1fr) 128px;
  }

  .community-avatar-wrap {
    width: 88px;
    height: 105px;
  }

  .community-profile-list .community-avatar-wrap img {
    width: 84px;
    height: 102px;
  }

  .community-profile-stats {
    grid-template-columns: 1fr;
  }

  .community-profile-action {
    grid-column: 2 / -1;
  }

  .team-role-members {
    grid-template-columns: 1fr;
  }

  .team-role-members .community-avatar-wrap {
    width: 88px;
    height: 118px;
  }

  .team-role-members .community-profile-action {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .community-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .community-sidebar {
    position: static;
    padding: 14px 10px 10px;
  }

  .community-sidebar-heading {
    padding-bottom: 11px;
  }

  .community-sidebar-heading p {
    display: none;
  }

  .community-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-tabs .segment {
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .community-tabs .segment > svg:first-child {
    width: 30px;
    height: 30px;
    padding: 7px;
  }

  .community-tabs .segment > svg:last-child,
  .community-tabs .segment small {
    display: none;
  }

  .community-content .section-block {
    min-height: 0;
  }

  .community-profile-list .team-card,
  .community-profile-list .user-card {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .community-avatar-wrap {
    width: 74px;
    height: 92px;
  }

  .community-profile-list .community-avatar-wrap img {
    width: 72px;
    height: 90px;
  }

  .community-profile-stats,
  .community-profile-action {
    grid-column: 1 / -1;
  }

  .community-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-role-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-role-members .community-avatar-wrap {
    width: 74px;
    height: 114px;
  }

  .sync-control-grid,
  .sync-schedule-strip {
    grid-template-columns: 1fr;
  }

  .sync-control-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .sync-log-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .sync-log-meta {
    grid-column: 2;
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
  }
}

/* 2026 premium experience layer */
:root {
  --focus-ring: 0 0 0 3px rgba(0, 169, 165, 0.2);
  --surface-elevated: rgba(255, 255, 255, 0.94);
  --surface-tint: rgba(239, 248, 253, 0.9);
}

body {
  overflow-x: hidden;
}

html {
  scrollbar-color: rgba(35, 111, 139, 0.58) rgba(7, 28, 42, 0.08);
  scrollbar-width: thin;
}

::selection {
  color: #071923;
  background: #79ead9;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: rgba(7, 28, 42, 0.08);
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 8px;
  background: linear-gradient(180deg, #25bbae, #3d75d7);
  background-clip: padding-box;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #30cbbb;
  outline-offset: 3px;
}

.site-header {
  padding-top: 20px;
}

.nav-shell {
  box-shadow:
    0 0 0 1px rgba(255, 230, 154, 0.24),
    0 7px 0 rgba(67, 40, 9, 0.28),
    0 26px 64px rgba(7, 24, 39, 0.24);
}

.nav-logo-row {
  min-height: 128px;
  padding-block: 6px;
}

.brand-logo {
  width: clamp(280px, 27vw, 365px);
}

.nav-links {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.nav-choice {
  min-height: 88px;
  gap: 2px;
  padding: 6px 9px;
}

.nav-choice::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: 5px;
  left: 22%;
  height: 3px;
  border-radius: 3px;
  background: transparent;
  transition: right 160ms ease, left 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.nav-choice:hover::after,
.nav-choice.is-active::after,
.nav-choice.is-menu-open::after {
  right: 10%;
  left: 10%;
  background: linear-gradient(90deg, #35d9c2, #ffe178);
  box-shadow: 0 0 12px rgba(52, 219, 194, 0.38);
}

.nav-art-icon {
  width: clamp(54px, 4.2vw, 66px);
  height: 58px;
}

.nav-actions {
  top: 50%;
  transform: translateY(-50%);
}

.command-center {
  min-height: 340px;
  padding-top: 30px;
}

.command-copy {
  min-width: 0;
}

.command-copy h1 {
  max-width: 680px;
  font-size: clamp(2.7rem, 4.3vw, 4.2rem);
  line-height: 0.98;
}

.command-scene {
  min-height: 300px;
  isolation: isolate;
}

.command-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(0deg, rgba(16, 43, 60, 0.14), transparent 38%);
}

body:not([data-active-view="home"]) .command-center {
  display: none;
}

body:not([data-active-view="home"]) .site-header {
  padding-bottom: 22px;
}

.view-masthead {
  position: relative;
  min-height: 132px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 22px 24px;
  overflow: hidden;
  color: #eefaff;
  border: 1px solid rgba(86, 177, 192, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(115deg, #0b293d, #0e5660 58%, #344f91);
  box-shadow: 0 18px 42px rgba(8, 35, 53, 0.2);
}

.view-masthead::after {
  content: "";
  position: absolute;
  inset: auto -5% -42px 44%;
  height: 82px;
  transform: skewX(-24deg);
  border-top: 1px solid rgba(255, 225, 122, 0.35);
  background: linear-gradient(90deg, transparent, rgba(255, 209, 83, 0.16), transparent);
  pointer-events: none;
}

.view-masthead-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #78f0dd;
  border: 1px solid rgba(112, 235, 217, 0.35);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(31, 186, 171, 0.2), rgba(65, 99, 190, 0.2));
  box-shadow: inset 0 0 22px rgba(70, 221, 202, 0.12), 0 12px 24px rgba(0, 0, 0, 0.18);
}

.view-masthead-icon svg {
  width: 34px;
  height: 34px;
}

.view-masthead-copy {
  min-width: 0;
}

.view-masthead-copy .eyebrow {
  color: #79e7d9;
}

.view-masthead-copy h1 {
  max-width: none;
  margin: 2px 0 6px;
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.05;
}

.view-masthead-copy p {
  max-width: 760px;
  margin: 0;
  color: #bfd3de;
}

.view-masthead-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  color: #dffbf7;
  border: 1px solid rgba(118, 229, 212, 0.25);
  border-radius: 6px;
  background: rgba(5, 30, 43, 0.48);
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.view-panel.is-active {
  animation: premium-view-in 240ms ease-out;
}

@keyframes premium-view-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-block {
  border-color: rgba(174, 201, 222, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 36px rgba(18, 50, 72, 0.1);
}

.section-block::before {
  background: linear-gradient(90deg, #17a5a5, #42d2b5 30%, #ffd260 58%, #ff7770 76%, #667ff1);
}

.section-heading {
  min-height: 50px;
}

.section-heading h2 {
  font-size: clamp(1.28rem, 2vw, 1.58rem);
}

.section-heading .icon-button {
  border-color: rgba(44, 119, 151, 0.24);
  box-shadow: 0 7px 18px rgba(18, 56, 80, 0.08);
}

.panel-note {
  line-height: 1.45;
}

input,
select,
textarea {
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #a8bfd4;
}

.search-box input {
  min-height: 46px;
}

.toolbar {
  row-gap: 8px;
}

.empty-state {
  min-height: 110px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  margin: 0;
  padding: 20px;
  text-align: center;
  border: 1px dashed rgba(89, 131, 160, 0.35);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(47, 111, 237, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    rgba(241, 248, 252, 0.68);
}

.article-card,
.badge-item,
.furni-card,
.price-card,
.resource-card,
.team-card,
.user-card,
.reward-card,
.clothing-card {
  will-change: transform;
}

.badge-item:hover,
.furni-card:hover,
.resource-card:hover,
.reward-card:hover,
.clothing-card:hover {
  transform: translateY(-4px);
}

.news-feature-section {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 20px 42px rgba(12, 51, 72, 0.12);
}

.spotlight-article {
  min-height: 350px;
}

.spotlight-copy {
  position: relative;
}

.spotlight-copy::before {
  content: "";
  position: absolute;
  inset: 18px 18px auto auto;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #43d9c4, #ffd269);
  box-shadow: 0 0 12px rgba(67, 217, 196, 0.35);
}

.article-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(8, 31, 47, 0.16));
}

.article-read-cue,
.article-card-media .pill {
  z-index: 3;
}

.profile-panel {
  gap: 14px;
}

.profile-card,
.status-panel {
  border-color: rgba(63, 126, 157, 0.22);
}

.profile-card {
  background:
    linear-gradient(110deg, rgba(38, 200, 181, 0.08), transparent 42%),
    var(--surface-elevated);
}

.price-board {
  color: #edf8ff;
  border-color: rgba(49, 133, 178, 0.58);
  background:
    linear-gradient(90deg, rgba(67, 143, 174, 0.04) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(rgba(55, 200, 186, 0.035) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(150deg, #081a29, #0b2836 58%, #101b3b);
  box-shadow: 0 22px 52px rgba(12, 47, 68, 0.22);
}

.price-board .eyebrow {
  color: #55ded0;
}

.price-board .price-search-panel h2,
.price-board .price-collections-head h3,
.price-board .price-results-head h3 {
  color: #f2f9fc;
}

.price-board .price-results-head strong {
  color: #8fc5df;
}

.price-board .price-search-box input {
  color: #183044;
  border-color: rgba(126, 178, 204, 0.5);
  background: #f8fbfd;
}

.price-search-panel {
  position: relative;
  padding: 4px 0 18px;
}

.price-search-panel::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 169, 165, 0.42), rgba(47, 111, 237, 0.08), transparent);
}

.price-collection-card {
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.price-collection-card:hover,
.price-collection-card.is-active {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(8, 40, 61, 0.16);
}

.content-skeleton {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}

.content-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  animation: premium-skeleton-sweep 1.25s linear infinite;
}

.content-skeleton > span {
  display: block;
  height: 12px;
  margin: 14px;
  border-radius: 4px;
  background: rgba(113, 148, 169, 0.18);
}

.content-skeleton > span:first-child {
  height: 56%;
  min-height: 86px;
}

.content-skeleton > span:nth-child(2) {
  width: 68%;
}

.content-skeleton > span:nth-child(3) {
  width: 42%;
}

@keyframes premium-skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

.avatar-builder > img {
  box-shadow: inset 0 0 34px rgba(38, 201, 185, 0.12), 0 18px 34px rgba(15, 50, 70, 0.12);
}

.avatar-fitting-room {
  margin-top: 24px;
  padding-top: 24px;
}

.community-workspace {
  gap: 22px;
}

.community-sidebar {
  box-shadow: 0 18px 40px rgba(10, 42, 62, 0.12);
}

.community-tabs .segment {
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.community-tabs .segment:hover {
  transform: translateX(3px);
}

.admin-workspace {
  position: relative;
}

.admin-command {
  background:
    linear-gradient(120deg, rgba(9, 45, 65, 0.98), rgba(13, 70, 74, 0.96)),
    url("assets/habbosal-city-bg.webp") center 46% / cover;
}

.admin-tabs {
  gap: 7px;
}

.admin-tabs .segment {
  min-height: 42px;
}

.admin-panel {
  box-shadow: 0 18px 44px rgba(9, 38, 57, 0.12);
}

.back-to-top {
  position: fixed;
  z-index: 40;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(116, 235, 217, 0.42);
  border-radius: 8px;
  background: linear-gradient(145deg, #0a8f8b, #366ed6);
  box-shadow: 0 8px 0 #0b4968, 0 18px 32px rgba(5, 36, 54, 0.28);
}

.back-to-top:hover {
  transform: translateY(-2px);
}

html[data-theme="dark"] {
  --focus-ring: 0 0 0 3px rgba(55, 200, 186, 0.18);
  --surface-elevated: rgba(13, 31, 45, 0.96);
  --surface-tint: rgba(9, 26, 39, 0.92);
}

html[data-theme="dark"] ::selection {
  color: #eafffb;
  background: #146e70;
}

html[data-theme="dark"] .view-masthead {
  border-color: rgba(63, 145, 171, 0.46);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(55, 200, 186, 0.025) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(115deg, #061826, #0b3b47 58%, #202c61);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .empty-state {
  color: #8fa7b7;
  border-color: #29495e;
  background:
    linear-gradient(90deg, rgba(68, 137, 171, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    #091a27;
}

html[data-theme="dark"] .profile-card {
  background:
    linear-gradient(110deg, rgba(38, 200, 181, 0.08), transparent 42%),
    #0c1f2d;
}

html[data-theme="dark"] .price-board {
  border-color: rgba(49, 133, 178, 0.5);
  background:
    linear-gradient(90deg, rgba(67, 143, 174, 0.04) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(rgba(55, 200, 186, 0.03) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(150deg, #05131f, #09232f 58%, #0d1733);
}

html[data-theme="dark"] .content-skeleton > span {
  background: rgba(106, 155, 181, 0.14);
}

html[data-theme="dark"] .admin-command {
  background:
    linear-gradient(120deg, rgba(5, 24, 37, 0.97), rgba(8, 54, 59, 0.96)),
    url("assets/habbosal-city-bg.webp") center 46% / cover;
}

.live-market-strip {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(420px, 2fr) auto;
  align-items: center;
  gap: 18px;
  margin: 2px 0 18px;
  padding: 14px 16px;
  color: #eafcff;
  border: 1px solid rgba(79, 211, 190, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(63, 222, 194, 0.08) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(115deg, #082938, #0b4650 58%, #172b58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(2, 19, 31, 0.2);
}

.live-market-heading,
.live-market-heading > div,
.live-market-metrics,
.live-market-metrics > span {
  min-width: 0;
}

.live-market-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-market-heading strong,
.live-market-heading small,
.live-market-metrics small,
.live-market-metrics strong {
  display: block;
}

.live-market-heading strong {
  color: #f4ffff;
  font-size: 0.94rem;
}

.live-market-heading small,
.live-market-metrics small {
  color: #8fb8c8;
  font-size: 0.7rem;
}

.live-market-pulse {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid #8dffe9;
  border-radius: 50%;
  background: #20d3a8;
  box-shadow: 0 0 0 5px rgba(32, 211, 168, 0.12), 0 0 18px #20d3a8;
  animation: live-market-pulse 1.8s ease-in-out infinite;
}

@keyframes live-market-pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(32, 211, 168, 0.03), 0 0 25px #20d3a8;
  }
}

.live-market-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.live-market-metrics > span {
  padding: 8px 10px;
  border: 1px solid rgba(123, 208, 217, 0.17);
  border-radius: 6px;
  background: rgba(4, 24, 37, 0.42);
}

.live-market-metrics strong {
  margin-top: 2px;
  overflow: hidden;
  color: #eefdff;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-market-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: #0d4c43;
  border: 1px solid #7ae7c5;
  border-radius: 6px;
  background: #baf6df;
  font-size: 0.72rem;
  font-weight: 950;
  white-space: nowrap;
}

.live-market-source svg {
  width: 15px;
  height: 15px;
}

.ltd-mark {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  color: #4a2800;
  border: 1px solid #ffe083;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff2a4, #f3b82f);
  box-shadow: 0 3px 0 #9d6512, 0 0 18px rgba(255, 207, 67, 0.42);
  font-size: 0.66rem;
  font-weight: 1000;
  line-height: 1;
}

.ltd-mark svg {
  width: 13px;
  height: 13px;
}

.ltd-mark.is-compact {
  position: static;
  margin-left: 5px;
  padding: 3px 5px;
  vertical-align: middle;
}

.furni-profile-copy .ltd-mark {
  position: static;
  margin-left: 8px;
}

.price-source-badge {
  position: absolute;
  top: 48px;
  left: 50px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: #0b5147;
  border: 1px solid rgba(24, 185, 151, 0.4);
  border-radius: 4px;
  background: rgba(190, 250, 232, 0.94);
  box-shadow: 0 5px 12px rgba(16, 69, 67, 0.14);
  font-size: 0.62rem;
  font-weight: 1000;
  white-space: nowrap;
}

.price-source-badge svg {
  width: 12px;
  height: 12px;
}

.price-source-badge.is-historical {
  color: #624000;
  border-color: #e4b44c;
  background: #fff0af;
}

.price-source-badge.is-admin {
  color: #123f75;
  border-color: #78a9e9;
  background: #dcecff;
}

.price-source-badge.is-pending {
  color: #516473;
  border-color: #afc1cc;
  background: #eaf1f5;
}

.price-card.historical .price-card-value {
  background: linear-gradient(135deg, #c88a22, #dfad3d);
}

.price-card.admin .price-card-value {
  background: linear-gradient(135deg, #2f6fbd, #527ed8);
}

.price-card.pending .price-card-value {
  color: #dbe8ee;
  background: linear-gradient(135deg, #526472, #324755);
}

.price-card.pending .price-card-value b {
  font-size: 0.92rem;
}

.furni-current-price.historical {
  border-color: #d4a54a;
  background: linear-gradient(145deg, rgba(242, 185, 58, 0.16), rgba(116, 75, 10, 0.12));
}

.furni-current-price.admin {
  border-color: #5e93dc;
  background: linear-gradient(145deg, rgba(66, 128, 214, 0.16), rgba(29, 68, 128, 0.12));
}

.furni-current-price.pending {
  border-color: #526b7d;
  background: rgba(46, 68, 82, 0.18);
}

.price-row-copy > strong,
.furni-profile-copy h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.market-sales-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.market-history-disclosure {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(72, 137, 164, 0.28);
  border-radius: 7px;
  background: rgba(238, 247, 251, 0.68);
}

.market-history-disclosure > summary,
.furni-accordion > summary {
  list-style: none;
  cursor: pointer;
}

.market-history-disclosure > summary::-webkit-details-marker,
.furni-accordion > summary::-webkit-details-marker {
  display: none;
}

.market-history-disclosure > summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.market-history-disclosure > summary > span {
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  column-gap: 8px;
}

.market-history-disclosure > summary > span > svg {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  padding: 7px;
  color: #169d91;
  border-radius: 5px;
  background: rgba(31, 190, 170, 0.1);
}

.market-history-disclosure summary small {
  color: var(--muted);
  font-size: 0.66rem;
}

.market-history-disclosure > summary > svg,
.furni-accordion > summary > svg:last-child {
  width: 18px;
  transition: transform 160ms ease;
}

.market-history-disclosure[open] > summary > svg,
.furni-accordion[open] > summary > svg:last-child {
  transform: rotate(180deg);
}

.market-sales-scroll {
  max-height: 430px;
  overflow-y: auto;
  padding: 0 10px 10px;
  border-top: 1px solid rgba(79, 136, 160, 0.18);
}

.market-sales-scroll .market-sales-list {
  margin-top: 10px;
}

.furni-accordion {
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(247, 251, 253, 0.84);
}

.furni-accordion > summary {
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.furni-accordion > summary:hover {
  background: rgba(32, 198, 167, 0.055);
}

.furni-accordion-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #0ba391;
  border: 1px solid rgba(20, 177, 157, 0.25);
  border-radius: 6px;
  background: rgba(35, 201, 177, 0.08);
}

.furni-accordion-icon svg {
  width: 21px;
}

.furni-accordion > summary span:nth-child(2) small,
.furni-accordion > summary span:nth-child(2) strong {
  display: block;
}

.furni-accordion > summary span:nth-child(2) small {
  color: #0a8c83;
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.furni-accordion > summary span:nth-child(2) strong {
  margin-top: 2px;
}

.furni-accordion > summary em {
  padding: 6px 8px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
}

.furni-accordion-body {
  padding: 14px;
  border-top: 1px solid var(--line);
}

.market-sale-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.25fr) repeat(4, minmax(100px, 1fr));
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(80, 145, 172, 0.22);
  border-radius: 7px;
  background: rgba(239, 248, 252, 0.72);
}

.market-sale-row > span,
.market-sale-row small,
.market-sale-row strong {
  min-width: 0;
}

.market-sale-row small,
.market-sale-row strong {
  display: block;
}

.market-sale-row small {
  color: var(--muted);
  font-size: 0.68rem;
}

.market-sale-row strong {
  margin-top: 2px;
  font-size: 0.78rem;
}

.market-sale-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #197a7c;
  font-size: 0.76rem;
  font-weight: 900;
}

.market-sale-date svg {
  width: 16px;
  height: 16px;
}

.hotel-market-meta {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

html[data-theme="dark"] .market-sale-row {
  border-color: #29495e;
  background: rgba(7, 25, 38, 0.76);
}

html[data-theme="dark"] .furni-chart-wrap {
  border-color: #29495e;
  background:
    linear-gradient(135deg, rgba(32, 198, 167, 0.07), transparent 42%),
    linear-gradient(180deg, #0b2533, #081b28);
}

html[data-theme="dark"] .chart-toolbar {
  border-color: #29495e;
  background: rgba(8, 28, 41, 0.72);
}

html[data-theme="dark"] .chart-kpis > span,
html[data-theme="dark"] .market-history-disclosure,
html[data-theme="dark"] .furni-accordion {
  border-color: #29495e;
  background: rgba(7, 25, 38, 0.76);
}

html[data-theme="dark"] .chart-kpis strong,
html[data-theme="dark"] .market-history-disclosure strong,
html[data-theme="dark"] .furni-accordion > summary strong {
  color: #edf9ff;
}

html[data-theme="dark"] .market-sales-scroll,
html[data-theme="dark"] .furni-accordion-body {
  border-color: #29495e;
}

html[data-theme="dark"] .market-sale-row strong {
  color: #edf9ff;
}

html[data-theme="dark"] .market-sale-date {
  color: #4cd8c8;
}

/* HabboFiyat store refresh */
.habbo-store-nav-icon,
.furni-loading-shop {
  position: relative;
  width: 44px;
  height: 38px;
  flex: 0 0 44px;
  display: block;
  border: 3px solid #082b43;
  border-radius: 5px 5px 8px 8px;
  background: linear-gradient(180deg, #0fc8cf 0 34%, #08799f 34% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.24), 3px 3px 0 rgba(4, 27, 43, 0.28);
  image-rendering: pixelated;
}

.habbo-store-awning {
  position: absolute;
  top: -5px;
  left: 3px;
  width: 32px;
  height: 12px;
  border: 3px solid #082b43;
  border-radius: 5px 5px 3px 3px;
  background: repeating-linear-gradient(90deg, #f4f7ee 0 7px, #ef3c58 7px 14px);
}

.habbo-store-coin {
  position: absolute;
  right: -8px;
  bottom: -7px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #9a5b00;
  border: 3px solid #9a5b00;
  border-radius: 50%;
  background: #ffd53d;
  box-shadow: inset 0 0 0 2px #fff18c, 2px 2px 0 rgba(4, 27, 43, 0.34);
  font: 1000 12px/1 Arial, sans-serif;
}

.habbo-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  vertical-align: middle;
}

.habbo-credit-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: inline-block;
  color: transparent;
  border: 0;
  border-radius: 0;
  background: url("assets/habbo-credit-icon.png?v=2") center / 19px 19px no-repeat;
  box-shadow: none;
  font-size: 0;
  image-rendering: pixelated;
}

.habbo-credit-amount {
  overflow: hidden;
  text-overflow: ellipsis;
}

.habbo-credit.is-compact {
  gap: 6px;
}

.habbo-credit.is-compact .habbo-credit-icon {
  width: 19px;
  height: 19px;
  flex-basis: 19px;
}

.credit-empty {
  font-size: 0.86rem;
}

.price-card {
  min-height: 340px;
  contain: layout paint style;
}

.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent 28%), radial-gradient(circle at 50% 48%, rgba(35, 216, 183, 0.14), transparent 34%);
}

.price-card-tag {
  right: 20px;
}

.price-card-tag strong {
  max-width: min(180px, 48%);
  backdrop-filter: blur(7px);
}

.price-card-stage {
  inset: 70px 18px 78px;
}

.price-card-value {
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, rgba(19, 174, 116, 0.96), rgba(37, 201, 144, 0.9));
  box-shadow: 0 10px 24px rgba(13, 111, 79, 0.2), inset 0 1px rgba(255, 255, 255, 0.24);
}

.price-card-value b {
  min-width: 0;
}

.price-card-value .habbo-credit-amount {
  font-size: 1.32rem;
}

.furni-modal-card {
  width: min(1120px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  border: 1px solid rgba(78, 167, 187, 0.35);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(3, 19, 31, 0.52);
  scrollbar-gutter: stable;
}

.furni-profile-hero {
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr) minmax(190px, auto);
  min-height: 330px;
  background: radial-gradient(circle at 18% 35%, rgba(45, 221, 198, 0.22), transparent 28%), linear-gradient(135deg, rgba(5, 30, 48, 0.99), rgba(8, 90, 102, 0.96) 58%, rgba(24, 50, 92, 0.98));
}

.furni-profile-art {
  border-radius: 12px;
  background: linear-gradient(30deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 20px 12px, radial-gradient(circle, rgba(57, 225, 198, 0.22), rgba(4, 25, 38, 0.58) 65%);
  box-shadow: inset 0 0 36px rgba(72, 212, 205, 0.12), 0 18px 36px rgba(0, 0, 0, 0.2);
}

.furni-current-price {
  min-width: 205px;
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 15px 30px rgba(0, 0, 0, 0.16);
}

.furni-current-price strong {
  margin: 10px 0 12px;
  font-size: 1.65rem;
}

.furni-market-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.furni-market-stats article {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 10px;
  background: linear-gradient(145deg, #fff, #f4fafc);
}

.furni-market-stats article::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 58px;
  height: 58px;
  border: 12px solid rgba(20, 188, 164, 0.07);
  border-radius: 50%;
}

.furni-market-stats .habbo-credit,
.chart-kpis .habbo-credit {
  display: inline-flex;
  align-items: center;
}

.furni-market-stats .habbo-credit-icon,
.chart-kpis .habbo-credit-icon {
  display: inline-block;
}

.furni-market-stats .habbo-credit-amount,
.chart-kpis .habbo-credit-amount {
  display: inline;
}

.furni-detail-loading,
.furni-detail-error {
  min-height: 430px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
}

.furni-detail-loading .furni-loading-shop {
  width: 66px;
  height: 56px;
  margin-bottom: 8px;
  animation: furni-shop-float 1.15s ease-in-out infinite alternate;
}

.furni-detail-loading .habbo-store-awning {
  width: 48px;
}

.furni-detail-loading .habbo-store-coin {
  width: 32px;
  height: 32px;
}

.furni-detail-loading small,
.furni-detail-error span {
  color: var(--muted);
}

.furni-detail-error svg {
  width: 42px;
  height: 42px;
  color: #e45a65;
}

@keyframes furni-shop-float {
  to { transform: translateY(-8px); }
}

.article-card,
.badge-item,
.furni-card,
.price-card,
.resource-card,
.team-card,
.user-card,
.reward-card,
.clothing-card {
  will-change: auto;
}

.price-card:hover,
.furni-card:hover {
  will-change: transform;
}

html[data-theme="dark"] .furni-market-stats article {
  background: linear-gradient(145deg, #0b2533, #091b28);
}

@media (max-width: 760px) {
  .furni-modal-card {
    width: 100%;
    max-height: 100dvh;
    margin: 0;
    padding-right: 16px;
    padding-left: 16px;
    border-radius: 14px 14px 0 0;
  }

  .furni-profile-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-right: -16px;
    margin-left: -16px;
    padding: 58px 18px 24px;
  }

  .furni-profile-art {
    height: 210px;
  }

  .furni-current-price {
    width: 100%;
  }

  .furni-market-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-board .price-table {
    gap: 18px;
  }
}

@media (max-width: 1040px) {
  .live-market-strip {
    grid-template-columns: 1fr auto;
  }

  .live-market-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .nav-logo-row {
    min-height: 112px;
  }

  .brand-logo {
    width: clamp(250px, 36vw, 340px);
  }

  .view-masthead {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .view-masthead-icon {
    width: 62px;
    height: 62px;
  }

  .view-masthead-status {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .chart-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .chart-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chart-kpis > span {
    padding: 7px;
  }

  .chart-kpis strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
  }

  .furni-price-chart {
    min-width: 0;
    padding-inline: 2px;
  }

  .market-sale-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-sale-date {
    grid-column: 1 / -1;
  }

  .furni-accordion > summary {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    min-height: 64px;
    gap: 9px;
    padding: 10px;
  }

  .furni-accordion-icon {
    width: 38px;
    height: 38px;
  }

  .furni-accordion > summary em {
    display: none;
  }

  .live-market-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .live-market-source,
  .live-market-metrics {
    grid-column: 1;
    grid-row: auto;
  }

  .live-market-source {
    justify-self: stretch;
    justify-content: center;
  }

  .live-market-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-sale-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-sale-date {
    grid-column: 1 / -1;
  }

  .container {
    width: calc(100% - 20px);
    margin-inline: 10px;
  }

  body[data-active-view="home"] .app-shell {
    width: calc(100% - 20px);
    margin-inline: 10px;
  }

  .top-strip .strip-inner {
    min-height: 48px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 0;
  }

  .top-strip .coupon-chip {
    flex: 0 0 auto;
  }

  .top-strip .coupon-chip strong {
    display: none;
  }

  .top-strip .strip-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .top-strip .icon-text-button.compact {
    min-height: 34px;
    padding: 0 9px;
  }

  .site-header {
    padding-top: 12px;
  }

  .nav-shell {
    width: calc(100% - 12px);
  }

  .nav-logo-row {
    min-height: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
    padding: 10px;
  }

  .nav-toggle {
    width: 40px;
    min-width: 40px;
  }

  .nav-brand {
    justify-self: center;
    padding: 0;
  }

  .brand-logo {
    width: min(238px, 68vw);
  }

  .nav-actions {
    position: static;
    grid-column: 1 / -1;
    gap: 8px;
    padding-top: 4px;
    transform: none;
  }

  .nav-actions .primary-button {
    min-height: 42px;
  }

  .nav-user span {
    display: none;
  }

  .nav-links {
    max-height: min(62vh, 520px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-y: auto;
  }

  .nav-choice {
    min-height: 92px;
  }

  .nav-art-icon {
    width: 54px;
    height: 54px;
  }

  .command-center {
    gap: 20px;
    padding-top: 20px;
  }

  .command-center > *,
  .command-copy,
  .command-copy > p,
  .quick-actions {
    min-width: 0;
    max-width: 100%;
  }

  .command-copy {
    overflow: hidden;
  }

  .command-copy > p {
    overflow-wrap: anywhere;
  }

  #profileSearchForm {
    display: grid;
    grid-template-columns: 1fr;
  }

  #profileSearchForm button {
    width: 100%;
  }

  .command-copy h1 {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .command-copy > p {
    font-size: 0.94rem;
  }

  .command-scene {
    min-height: 230px;
  }

  .quick-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quick-actions > button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
  }

  .app-shell {
    padding-top: 18px;
  }

  .view-masthead {
    min-height: 0;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 14px;
    padding: 16px;
  }

  .view-masthead-icon {
    width: 50px;
    height: 50px;
  }

  .view-masthead-icon svg {
    width: 26px;
    height: 26px;
  }

  .view-masthead-copy h1 {
    font-size: 1.42rem;
  }

  .view-masthead-copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.8rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .view-masthead-status {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
    min-height: 34px;
  }

  .section-block {
    padding: 16px;
  }

  .section-heading {
    min-height: 0;
    padding-bottom: 10px;
  }

  .section-heading h2 {
    font-size: 1.28rem;
  }

  .spotlight-article {
    min-height: 0;
  }

  .spotlight-copy::before {
    display: none;
  }

  .back-to-top {
    right: 12px;
    bottom: 12px;
    width: 42px;
    height: 42px;
  }

  .admin-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }

  .admin-tabs .segment {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .view-panel.is-active,
  .fan-subnav.is-open,
  .fan-tool-panel.is-active {
    animation: none;
  }

  .content-skeleton::after {
    animation: none;
  }
}

/* Habbosal header banner */
.nav-logo-row {
  min-height: 190px;
  padding-block: 10px;
}

.nav-brand {
  width: min(520px, 43vw);
  max-width: none;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.3));
}

.brand-logo {
  width: 100%;
  max-height: 168px;
  object-fit: contain;
}

html[data-theme="dark"] .brand-logo {
  filter: saturate(0.94) brightness(0.98) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.38));
}

@media (max-width: 1040px) {
  .nav-logo-row {
    min-height: 166px;
    padding-top: 52px;
  }

  .nav-brand {
    width: min(440px, 58vw);
    max-width: 100%;
  }

  .brand-logo {
    max-height: 138px;
  }
}

@media (max-width: 680px) {
  .nav-logo-row {
    min-height: 0;
    padding: 10px;
  }

  .nav-brand {
    width: min(100%, 410px);
    max-width: 100%;
  }

  .brand-logo {
    width: 100%;
    max-height: none;
  }
}

/* Keep the Habbosal city visible behind the home hero. */
body {
  background:
    linear-gradient(180deg, rgba(245, 251, 255, 0.16), rgba(255, 247, 226, 0.24)),
    url("assets/habbosal-city-bg.webp") center top / cover no-repeat fixed,
    #d9efff;
}

html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(3, 13, 23, 0.42), rgba(4, 16, 28, 0.58)),
    url("assets/habbosal-city-bg.webp") center top / cover no-repeat fixed,
    #0a2535;
}

body[data-active-view="home"] .site-header {
  background:
    linear-gradient(180deg, rgba(5, 18, 28, 0.03), rgba(5, 18, 28, 0.08) 64%, rgba(5, 18, 28, 0.14));
}

html[data-theme="dark"] body[data-active-view="home"] .site-header {
  border-bottom-color: rgba(114, 190, 202, 0.25);
  background:
    linear-gradient(180deg, rgba(2, 12, 21, 0.12), rgba(3, 15, 26, 0.2) 58%, rgba(3, 15, 26, 0.3));
}

body[data-active-view="home"] .command-copy {
  padding: 22px 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="dark"] body[data-active-view="home"] .command-copy > p {
  color: #d0e0e8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82);
}

html[data-theme="dark"] body[data-active-view="home"] .command-copy h1 {
  color: #f7fbfd;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.78);
}

@media (max-width: 680px) {
  body {
    background:
      linear-gradient(180deg, rgba(245, 251, 255, 0.14), rgba(255, 247, 226, 0.22)),
      url("assets/habbosal-city-bg.webp") 38% top / auto 100vh no-repeat fixed,
      #d9efff;
  }

  html[data-theme="dark"] body {
    background:
      linear-gradient(180deg, rgba(3, 13, 23, 0.38), rgba(4, 16, 28, 0.54)),
      url("assets/habbosal-city-bg.webp") 38% top / auto 100vh no-repeat fixed,
      #0a2535;
  }

  body[data-active-view="home"] .command-copy {
    padding: 16px 0;
  }
}

/* Calmer visual pass: keep the pixel identity while lowering visual noise. */
:root {
  --teal: #178f8b;
  --blue: #557fba;
  --coral: #d96f70;
  --amber: #d4ad4f;
  --green: #4fa678;
  --violet: #8271ac;
  --shadow: 0 14px 34px rgba(20, 39, 55, 0.1);
  --shadow-soft: 0 7px 18px rgba(20, 39, 55, 0.075);
  --shadow-hover: 0 12px 26px rgba(20, 39, 55, 0.12);
}

html[data-theme="dark"] {
  --bg: #0a141c;
  --paper: #12212b;
  --paper-soft: #152630;
  --paper-glass: rgba(16, 31, 41, 0.96);
  --ink: #e3edf2;
  --muted: #91a4af;
  --line: #29404d;
  --line-strong: #385565;
  --teal: #58b8ae;
  --blue: #7293c2;
  --coral: #d98282;
  --amber: #d3b66a;
  --green: #72b58d;
  --violet: #9486b7;
  --shadow: 0 15px 36px rgba(0, 0, 0, 0.25);
  --shadow-soft: 0 7px 18px rgba(0, 0, 0, 0.18);
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.24);
}

body {
  background:
    linear-gradient(180deg, rgba(239, 247, 250, 0.52), rgba(240, 245, 242, 0.7)),
    url("assets/habbosal-city-bg.webp") center top / cover no-repeat fixed,
    #dcebf0;
}

html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, rgba(7, 17, 24, 0.7), rgba(8, 19, 27, 0.84)),
    url("assets/habbosal-city-bg.webp") center top / cover no-repeat fixed,
    #0a1821;
}

.nav-shell {
  border-width: 1px;
  border-color: rgba(111, 137, 151, 0.48);
  box-shadow: 0 10px 28px rgba(15, 38, 53, 0.14);
}

.nav-shell::before {
  opacity: 0.34;
}

.nav-shell::after {
  background: linear-gradient(90deg, transparent, var(--teal) 28%, var(--blue) 72%, transparent);
  box-shadow: none;
  opacity: 0.72;
}

.nav-logo-row {
  min-height: 104px;
  padding-block: 5px;
  border-bottom-width: 1px;
}

.brand-logo {
  width: clamp(270px, 25vw, 330px);
}

.nav-choice {
  min-height: 76px;
  color: #30485a;
  border-right-color: rgba(99, 126, 143, 0.18);
}

.nav-art-icon {
  width: clamp(46px, 3.7vw, 56px);
  height: 48px;
  filter: drop-shadow(0 4px 0 rgba(22, 35, 49, 0.06));
}

.nav-choice.is-active,
.nav-choice.is-menu-open,
.nav-choice:hover {
  color: #176b70;
  background: rgba(212, 239, 235, 0.68);
  box-shadow: inset 0 -3px 0 rgba(23, 143, 139, 0.28);
}

.nav-choice:hover::after,
.nav-choice.is-active::after,
.nav-choice.is-menu-open::after {
  background: var(--teal);
  box-shadow: none;
}

html[data-theme="dark"] .nav-shell {
  border-color: rgba(76, 111, 128, 0.58);
  background: #0b1821;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .nav-logo-row {
  border-bottom-color: rgba(79, 111, 128, 0.38);
  background: #10232e;
}

html[data-theme="dark"] .nav-links {
  background: #0b1720;
}

html[data-theme="dark"] .nav-choice {
  color: #9db0bb;
  background: transparent;
}

html[data-theme="dark"] .nav-choice.is-active,
html[data-theme="dark"] .nav-choice.is-menu-open,
html[data-theme="dark"] .nav-choice:hover {
  color: #e0efef;
  border-color: rgba(88, 184, 174, 0.28);
  background: rgba(34, 79, 82, 0.62);
}

.command-center {
  min-height: 260px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 30px;
  padding-top: 24px;
}

.command-copy h1 {
  max-width: 650px;
  margin-bottom: 14px;
  font-size: clamp(2.35rem, 3.7vw, 3.5rem);
  line-height: 1;
}

.command-copy p {
  font-size: 0.98rem;
}

.command-scene {
  min-height: 225px;
  opacity: 0.86;
  box-shadow: 0 12px 28px rgba(18, 43, 56, 0.16);
}

body[data-active-view="home"] .command-copy {
  padding: 14px 0;
}

html[data-theme="dark"] body[data-active-view="home"] .command-copy > p,
html[data-theme="dark"] body[data-active-view="home"] .command-copy h1 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.56);
}

.section-block {
  border-color: rgba(112, 137, 151, 0.3);
  box-shadow: var(--shadow-soft);
}

.section-block::before {
  height: 2px;
  opacity: 0.72;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.section-block::after {
  display: none;
}

html[data-theme="dark"] .section-block,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .badge-item,
html[data-theme="dark"] .furni-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .partner-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .profile-mini,
html[data-theme="dark"] .reward-card,
html[data-theme="dark"] .clothing-card {
  border-color: #29404d;
  background: linear-gradient(180deg, #13232d, #101d26);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(9px);
}

html[data-theme="dark"] .section-block::before {
  background: linear-gradient(90deg, #4da69f, #637fa8);
}

body[data-active-view="home"] .app-shell {
  width: min(1660px, calc(100% - 48px));
  padding-top: 22px;
}

body[data-active-view="home"] .section-block {
  padding: 17px;
}

body[data-active-view="home"] .section-heading {
  margin-bottom: 12px;
}

body[data-active-view="home"] .section-heading h2 {
  font-size: 1.28rem;
}

body[data-active-view="home"] .panel-note {
  margin-top: 3px;
  font-size: 0.81rem;
}

body[data-active-view="home"] .home-left-stack,
body[data-active-view="home"] .main-stack,
body[data-active-view="home"] .side-stack {
  gap: 14px;
}

body[data-active-view="home"] .home-badge-rail .badge-item.is-compact {
  min-height: 116px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

html[data-theme="dark"] body[data-active-view="home"] .home-badge-rail .badge-item.is-compact {
  background: rgba(17, 33, 43, 0.76);
}

body[data-active-view="home"] .home-price-movements .price-row,
body[data-active-view="home"] .leader-row,
body[data-active-view="home"] .chat-message {
  box-shadow: none;
}

body[data-active-view="home"] .home-price-movements .price-row {
  min-height: 64px;
  border-color: rgba(100, 132, 148, 0.26);
  background: rgba(247, 251, 252, 0.72);
  box-shadow: inset 2px 0 0 rgba(23, 143, 139, 0.32);
}

body[data-active-view="home"] .leader-row {
  background: rgba(247, 250, 248, 0.7);
}

body[data-active-view="home"] .chat-panel {
  background: rgba(250, 253, 252, 0.86);
}

html[data-theme="dark"] body[data-active-view="home"] .home-price-movements .price-row,
html[data-theme="dark"] body[data-active-view="home"] .leader-row,
html[data-theme="dark"] body[data-active-view="home"] .chat-message,
html[data-theme="dark"] body[data-active-view="home"] .chat-log {
  border-color: #2b4653;
  background: rgba(13, 29, 38, 0.82);
}

html[data-theme="dark"] body[data-active-view="home"] .chat-panel {
  background: linear-gradient(180deg, #13242e, #101d26);
}

body[data-active-view="home"] .chat-message.chat-message-vip {
  color: #5c4710;
  border-color: rgba(211, 166, 55, 0.62);
  background:
    linear-gradient(105deg, rgba(255, 231, 137, 0.34), transparent 46%),
    linear-gradient(90deg, #fff6cb, #e8f6ee);
  box-shadow: inset 3px 0 0 #d8a82f, 0 7px 16px rgba(119, 85, 13, 0.12);
}

body[data-active-view="home"] .chat-message.chat-message-aqua {
  color: #07545c;
  border-color: rgba(43, 181, 170, 0.58);
  background:
    linear-gradient(105deg, rgba(73, 219, 202, 0.16), transparent 48%),
    linear-gradient(90deg, #ddfff8, #e5f4ff);
  box-shadow: inset 3px 0 0 #31b9ad, 0 7px 16px rgba(25, 122, 120, 0.1);
}

body[data-active-view="home"] .chat-message.chat-message-neon {
  color: #eff8ff;
  border-color: rgba(131, 104, 255, 0.68);
  background:
    linear-gradient(105deg, rgba(69, 230, 207, 0.08), transparent 44%),
    linear-gradient(100deg, #13253e, #271744 58%, #0d3b40);
  box-shadow: inset 3px 0 0 #55e4d3, 0 0 16px rgba(111, 83, 255, 0.24);
}

html[data-theme="dark"] body[data-active-view="home"] .chat-message.chat-message-vip {
  color: #f3dfa5;
  border-color: rgba(218, 171, 61, 0.58);
  background:
    linear-gradient(105deg, rgba(218, 171, 61, 0.18), transparent 48%),
    linear-gradient(90deg, #342a16, #123033);
  box-shadow: inset 3px 0 0 #d4a83c, 0 8px 18px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] body[data-active-view="home"] .chat-message.chat-message-aqua {
  color: #c9f2ed;
  border-color: rgba(54, 205, 190, 0.58);
  background:
    linear-gradient(105deg, rgba(54, 205, 190, 0.12), transparent 48%),
    linear-gradient(90deg, #0d373a, #112d42);
  box-shadow: inset 3px 0 0 #35c8bb, 0 8px 18px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] body[data-active-view="home"] .chat-message.chat-message-neon {
  color: #eef4ff;
  border-color: rgba(137, 108, 255, 0.72);
  background:
    linear-gradient(105deg, rgba(75, 227, 209, 0.1), transparent 44%),
    linear-gradient(100deg, #101d36, #281842 58%, #0b353b);
  box-shadow: inset 3px 0 0 #4be3d1, 0 0 18px rgba(111, 83, 255, 0.3);
}

body[data-active-view="home"] .chat-message-vip .chat-style-mark {
  color: #efc75b;
  text-shadow: 0 1px 5px rgba(102, 67, 0, 0.42);
}

body[data-active-view="home"] .chat-message-aqua .chat-style-mark {
  color: #58ddd0;
}

body[data-active-view="home"] .chat-message-neon .chat-style-mark {
  color: #8ff8eb;
  text-shadow: 0 0 8px rgba(75, 237, 219, 0.72);
}

body[data-active-view="home"] .chat-message-vip .chat-role .role-icon,
body[data-active-view="home"] .chat-message-aqua .chat-role .role-icon,
body[data-active-view="home"] .chat-message-neon .chat-role .role-icon {
  filter:
    drop-shadow(0 0 3px var(--role-glow, rgba(55, 200, 186, 0.72)))
    drop-shadow(0 0 7px var(--role-glow-soft, rgba(55, 200, 186, 0.28)));
}

html[data-theme="dark"] .badge-detail-stats article,
html[data-theme="dark"] .badge-owner-card,
html[data-theme="dark"] .badge-owner-disclosure,
html[data-theme="dark"] .badge-hotel-tabs button,
html[data-theme="dark"] .badge-owner-modes button {
  border-color: #2b4653;
  background: #0f202a;
}

html[data-theme="dark"] .badge-owner-card:hover {
  border-color: rgba(88, 184, 174, 0.52);
  background: #143039;
}

html[data-theme="dark"] .badge-owner-card.is-selected {
  border-color: rgba(211, 182, 106, 0.58);
  background: linear-gradient(100deg, rgba(211, 182, 106, 0.1), #0f202a 42%);
}

html[data-theme="dark"] .badge-hotel-tabs button:hover,
html[data-theme="dark"] .badge-hotel-tabs button.is-active {
  background: #16343b;
}

body[data-active-view="home"] .home-new-members {
  border-color: rgba(93, 132, 147, 0.3);
  background: rgba(248, 252, 252, 0.82);
  box-shadow: var(--shadow-soft);
}

body[data-active-view="home"] .home-new-members::after {
  display: none;
}

body[data-active-view="home"] .new-member-row {
  color: var(--ink);
  border-color: rgba(100, 132, 148, 0.28);
  background: rgba(247, 251, 252, 0.72);
  box-shadow: inset 2px 0 0 rgba(23, 143, 139, 0.3);
}

body[data-active-view="home"] .new-member-row small,
body[data-active-view="home"] .new-member-row span {
  color: var(--muted);
}

html[data-theme="dark"] body[data-active-view="home"] .home-new-members {
  background: linear-gradient(180deg, #13232d, #101d26);
}

html[data-theme="dark"] body[data-active-view="home"] .new-member-row {
  color: var(--ink);
  border-color: #2b4653;
  background: rgba(13, 29, 38, 0.82);
}

body[data-active-view="home"] #homeComments .home-comment-card {
  border-color: rgba(100, 132, 148, 0.28);
  background: rgba(247, 251, 252, 0.74);
  box-shadow: none;
}

html[data-theme="dark"] body[data-active-view="home"] #homeComments .home-comment-card {
  border-color: #2b4653;
  background: rgba(13, 29, 38, 0.82);
  box-shadow: none;
}

body[data-active-view="home"] .role-icon {
  animation: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.24));
}

body[data-active-view="home"] .news-feature-section {
  box-shadow: var(--shadow-soft);
}

body[data-active-view="home"] .spotlight-article {
  min-height: 305px;
  border-color: rgba(75, 115, 128, 0.42);
  background: linear-gradient(135deg, #17313b, #1d4149);
  box-shadow: none;
}

body[data-active-view="home"] .spotlight-art,
body[data-active-view="home"] .spotlight-art img {
  min-height: 305px;
  height: 305px;
}

body[data-active-view="home"] .spotlight-copy {
  padding: 24px;
}

body[data-active-view="home"] .spotlight-copy h3 {
  margin-top: 18px;
  font-size: clamp(1.5rem, 2.2vw, 2.05rem);
}

body[data-active-view="home"] .article-card,
body[data-active-view="home"] .furni-card {
  box-shadow: none;
}

body[data-active-view="home"] .article-card.compact {
  min-height: 320px;
}

body[data-active-view="home"] .article-card-media {
  height: 160px;
  flex-basis: 160px;
}

body[data-active-view="home"] .home-furni-section .furni-card {
  min-height: 142px;
}

body[data-active-view="home"] .primary-button {
  box-shadow: 0 3px 0 rgba(13, 73, 92, 0.82), 0 8px 18px rgba(20, 54, 71, 0.14);
}

body[data-active-view="home"] .article-card:hover,
body[data-active-view="home"] .furni-card:hover,
body[data-active-view="home"] .badge-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 1381px) {
  .view-panel[data-view-panel="home"] .dashboard-layout {
    grid-template-columns: 350px minmax(0, 1fr) 310px;
    gap: 16px;
  }
}

@media (min-width: 1041px) and (max-width: 1380px) {
  .view-panel[data-view-panel="home"] .dashboard-layout {
    grid-template-columns: 320px minmax(0, 1fr) 290px;
    gap: 14px;
  }
}

@media (max-width: 1180px) {
  .view-panel[data-view-panel="home"] .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .view-panel[data-view-panel="home"] .main-stack {
    order: 1;
  }

  .view-panel[data-view-panel="home"] .home-left-stack {
    order: 2;
  }

  .view-panel[data-view-panel="home"] .side-stack {
    order: 3;
  }
}

@media (max-width: 1040px) {
  .command-center {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-bottom: 18px;
  }

  .command-scene {
    display: none;
  }

  body[data-active-view="home"] .app-shell {
    width: min(calc(100% - 28px), 920px);
  }
}

@media (max-width: 680px) {
  body,
  html[data-theme="dark"] body {
    background-attachment: scroll;
  }

  .site-header {
    padding-bottom: 16px;
  }

  .nav-logo-row {
    min-height: 0;
  }

  .brand-logo {
    width: min(220px, 64vw);
  }

  .nav-choice {
    min-height: 78px;
  }

  .command-center {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .command-copy h1 {
    font-size: clamp(1.9rem, 9vw, 2.35rem);
  }

  body[data-active-view="home"] .app-shell {
    width: calc(100% - 20px);
    padding-top: 14px;
  }

  body[data-active-view="home"] .section-block {
    padding: 15px;
  }

  body[data-active-view="home"] .spotlight-article {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  body[data-active-view="home"] .spotlight-art,
  body[data-active-view="home"] .spotlight-art img {
    min-height: 220px;
    height: 220px;
  }

  body[data-active-view="home"] .spotlight-copy {
    padding: 20px;
  }

  body[data-active-view="home"] .spotlight-copy h3 {
    margin-top: 15px;
    font-size: 1.55rem;
  }

  .badge-detail-card {
    padding: 0 14px 16px;
  }

  .badge-detail-hero {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    min-height: 176px;
    margin: 0 -14px 16px;
    padding: 28px 18px 20px;
  }

  .badge-detail-art {
    width: 88px;
    height: 88px;
  }

  .badge-detail-art img {
    width: 68px;
    height: 68px;
  }

  .badge-detail-copy h2 {
    font-size: 1.3rem;
  }

  .badge-detail-copy p {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    font-size: 0.78rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .badge-detail-stats {
    grid-template-columns: 1fr;
  }

  .badge-owner-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .badge-owner-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .badge-owner-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .badge-owner-modes button {
    min-width: 0;
    padding-inline: 8px;
  }

  .badge-owner-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the polished home hero above the legacy theme overrides. */
body[data-active-view="home"] .command-center {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: clamp(34px, 5vw, 76px);
  min-height: 340px;
  padding-top: 30px;
  padding-bottom: 30px;
}

body[data-active-view="home"] .command-copy {
  position: relative;
  padding: 28px 30px 30px;
  border: 1px solid rgba(105, 218, 222, 0.2);
  border-left: 4px solid #38d7d0;
  border-radius: 12px;
  background:
    radial-gradient(circle at 0 0, rgba(45, 203, 199, 0.14), transparent 42%),
    linear-gradient(110deg, rgba(5, 25, 38, 0.78), rgba(8, 28, 42, 0.42));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(5px);
}

body[data-active-view="home"] .command-scene {
  min-height: 270px;
  opacity: 1;
  border: 1px solid rgba(103, 222, 224, 0.58);
  border-radius: 12px;
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 210, 112, 0.24), transparent 28%),
    linear-gradient(180deg, rgba(27, 105, 132, 0.96), rgba(39, 125, 121, 0.9));
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.25),
    inset 0 0 0 5px rgba(5, 36, 50, 0.28),
    inset 0 -8px 0 rgba(2, 24, 34, 0.22);
  transform: perspective(900px) rotateY(-2deg);
}

@media (max-width: 1040px) {
  body[data-active-view="home"] .command-center {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 18px;
  }

  body[data-active-view="home"] .command-scene {
    display: none;
  }
}

@media (max-width: 680px) {
  body[data-active-view="home"] .command-copy {
    padding: 22px 20px 24px;
    border-left-width: 3px;
  }
}

/* Profile Radar history archive */
.profile-history {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(58, 137, 157, 0.34);
  border-radius: 9px;
  background:
    radial-gradient(circle at 0 0, rgba(21, 171, 163, 0.09), transparent 34%),
    rgba(247, 252, 255, 0.82);
}

.profile-history-loading {
  min-height: 190px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 26px;
  border: 1px dashed rgba(55, 143, 157, 0.4);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(23, 143, 139, 0.045), rgba(85, 127, 186, 0.07), rgba(23, 143, 139, 0.045));
  background-size: 220% 100%;
  animation: profile-loading-shimmer 2.4s linear infinite;
}

.profile-history-loading[hidden],
.profile-history-content[hidden] {
  display: none;
}

.profile-history-loading-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #1b9691;
  border: 1px solid rgba(23, 143, 139, 0.25);
  border-radius: 10px;
  background: rgba(23, 143, 139, 0.11);
}

.profile-history-loading-icon svg {
  width: 23px;
  height: 23px;
}

.profile-history-loading > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profile-history-loading strong {
  font-size: 0.98rem;
}

.profile-history-loading small {
  color: var(--muted);
  font-size: 0.72rem;
}

.loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
}

.loading-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22aca5;
  animation: profile-loading-dot 1.1s ease-in-out infinite;
}

.loading-dots i:nth-child(2) {
  animation-delay: 0.16s;
}

.loading-dots i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes profile-loading-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0) scale(0.82);
  }
  30% {
    opacity: 1;
    transform: translateY(-6px) scale(1);
  }
}

@keyframes profile-loading-shimmer {
  to {
    background-position: -220% 0;
  }
}

.profile-history-heading,
.profile-photo-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.profile-history-heading h3 {
  margin: 2px 0 3px;
  font-size: 1.25rem;
}

.profile-history-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-history-tracking {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #117b7a;
  border: 1px solid rgba(23, 143, 139, 0.26);
  border-radius: 6px;
  background: rgba(221, 249, 245, 0.8);
  font-size: 0.72rem;
  font-weight: 850;
}

.profile-history-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.profile-history-stats article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(76, 123, 145, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
}

.profile-history-stats svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  color: var(--teal);
  border-radius: 6px;
  background: rgba(23, 143, 139, 0.1);
}

.profile-history-stats span {
  min-width: 0;
  display: grid;
}

.profile-history-stats strong {
  font-size: 1.05rem;
  line-height: 1;
}

.profile-history-stats small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-history-notice {
  margin: 12px 0 0;
  padding: 9px 11px;
  color: #556c7b;
  border-left: 3px solid #d4ad4f;
  border-radius: 4px;
  background: rgba(255, 245, 207, 0.58);
  font-size: 0.72rem;
}

.profile-history-tabs {
  display: flex;
  gap: 7px;
  margin-top: 15px;
  padding-bottom: 10px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(73, 118, 139, 0.2);
}

.profile-history-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  color: #526b7a;
  border: 1px solid rgba(72, 119, 141, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.64);
  font-size: 0.76rem;
  font-weight: 850;
}

.profile-history-tabs button svg {
  width: 15px;
  height: 15px;
}

.profile-history-tabs button:hover,
.profile-history-tabs button.is-active {
  color: #0d7273;
  border-color: rgba(23, 143, 139, 0.46);
  background: rgba(218, 247, 242, 0.92);
  box-shadow: inset 0 -3px 0 rgba(23, 143, 139, 0.55);
}

.profile-history-panel {
  display: none;
  padding-top: 14px;
}

.profile-history-panel.is-active {
  display: block;
  animation: fan-tool-reveal 180ms ease-out;
}

.profile-scope-loading {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  border: 1px dashed rgba(55, 143, 157, 0.34);
  border-radius: 8px;
  background: rgba(23, 143, 139, 0.045);
  font-size: 0.76rem;
  font-weight: 850;
}

.profile-scope-loading .loading-dots {
  padding: 6px;
}

.profile-outfit-history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.profile-outfit-history-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  min-height: 154px;
  border: 1px solid rgba(70, 118, 140, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.profile-outfit-history-card.is-current {
  border-color: rgba(23, 143, 139, 0.55);
  box-shadow: inset 0 3px 0 var(--teal);
}

.profile-outfit-avatar {
  position: relative;
  display: grid;
  place-items: end center;
  background:
    linear-gradient(145deg, rgba(27, 151, 157, 0.18), rgba(81, 127, 186, 0.12)),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(66, 117, 137, 0.07) 15px 16px);
  overflow: hidden;
}

.profile-outfit-avatar img {
  width: 112px;
  max-width: none;
  image-rendering: auto;
  filter: drop-shadow(0 8px 7px rgba(16, 42, 54, 0.18));
}

.profile-outfit-avatar span {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 3px 6px;
  color: #fff;
  border-radius: 4px;
  background: #178f8b;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-outfit-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.profile-outfit-copy > strong {
  font-size: 0.86rem;
}

.profile-outfit-copy > small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.67rem;
}

.profile-outfit-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 9px;
}

.profile-outfit-items span {
  max-width: 100%;
  padding: 3px 6px;
  overflow: hidden;
  color: #496573;
  border-radius: 4px;
  background: rgba(72, 126, 148, 0.09);
  font-size: 0.59rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-outfit-copy code {
  display: block;
  margin-top: auto;
  padding-top: 8px;
  overflow: hidden;
  color: #81909a;
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-history-timeline {
  position: relative;
  display: grid;
  gap: 8px;
}

.profile-history-timeline::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 17px;
  width: 2px;
  background: rgba(23, 143, 139, 0.2);
}

.profile-history-event {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 9px 12px 9px 0;
  border: 1px solid rgba(70, 118, 140, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.68);
}

.profile-history-event.is-current {
  border-color: rgba(23, 143, 139, 0.42);
  background: rgba(223, 248, 244, 0.7);
}

.profile-history-event-icon {
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-left: 3px;
  color: #0b7978;
  border: 2px solid #ccece8;
  border-radius: 50%;
  background: #f5fffd;
}

.profile-history-event-icon svg {
  width: 13px;
  height: 13px;
}

.profile-history-event > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-history-event small,
.profile-history-event span {
  color: var(--muted);
  font-size: 0.65rem;
}

.profile-history-event strong {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.profile-photo-heading {
  align-items: center;
  margin-bottom: 12px;
}

.profile-photo-heading > div {
  display: grid;
}

.profile-photo-heading strong {
  font-size: 0.9rem;
}

.profile-photo-heading span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.66rem;
}

.profile-photo-heading svg {
  width: 13px;
  height: 13px;
}

.profile-photo-history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 10px;
}

.profile-photo-card {
  min-width: 0;
  color: inherit;
  border: 1px solid rgba(68, 115, 137, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.profile-photo-card:hover {
  border-color: rgba(23, 143, 139, 0.5);
  box-shadow: 0 10px 20px rgba(20, 53, 67, 0.12);
  transform: translateY(-2px);
}

.profile-photo-art {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(40, 135, 151, 0.15), rgba(82, 102, 156, 0.12)),
    #dceaf0;
  overflow: hidden;
}

.profile-photo-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-art em {
  position: absolute;
  top: 7px;
  left: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: #eafffb;
  border-radius: 4px;
  background: rgba(6, 45, 56, 0.78);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
}

.profile-photo-art em svg {
  width: 11px;
  height: 11px;
}

.profile-photo-card.is-deleted {
  border-color: rgba(196, 92, 92, 0.42);
}

.profile-photo-card.is-deleted .profile-photo-art img {
  filter: grayscale(0.58) saturate(0.62);
  opacity: 0.78;
}

.profile-photo-card.is-deleted .profile-photo-art em {
  background: rgba(133, 43, 49, 0.88);
}

.profile-photo-card.is-missing .profile-photo-art::after {
  content: "Görsel artık erişilemiyor";
  padding: 12px;
  color: #6f7f88;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.profile-photo-meta {
  display: grid;
  gap: 2px;
  padding: 9px 10px 10px;
}

.profile-photo-meta strong {
  font-size: 0.76rem;
}

.profile-photo-meta small,
.profile-photo-meta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-photo-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.profile-photo-meta svg {
  width: 11px;
  height: 11px;
}

html[data-theme="dark"] .profile-history {
  border-color: #315365;
  background:
    radial-gradient(circle at 0 0, rgba(25, 159, 154, 0.13), transparent 34%),
    rgba(13, 31, 42, 0.9);
}

html[data-theme="dark"] .profile-history-tracking {
  color: #8fe3dc;
  border-color: rgba(92, 195, 186, 0.28);
  background: rgba(21, 84, 82, 0.38);
}

html[data-theme="dark"] .profile-history-stats article,
html[data-theme="dark"] .profile-history-tabs button,
html[data-theme="dark"] .profile-outfit-history-card,
html[data-theme="dark"] .profile-history-event,
html[data-theme="dark"] .profile-photo-card {
  color: #e5eff3;
  border-color: rgba(66, 104, 123, 0.65);
  background: rgba(13, 34, 46, 0.84);
}

html[data-theme="dark"] .profile-history-tabs button:hover,
html[data-theme="dark"] .profile-history-tabs button.is-active,
html[data-theme="dark"] .profile-history-event.is-current {
  color: #dffcf8;
  border-color: rgba(87, 190, 181, 0.58);
  background: rgba(24, 78, 79, 0.72);
}

html[data-theme="dark"] .profile-history-notice {
  color: #c9d5da;
  background: rgba(105, 83, 31, 0.28);
}

html[data-theme="dark"] .profile-outfit-items span {
  color: #bfd3dc;
  background: rgba(90, 140, 158, 0.16);
}

html[data-theme="dark"] .profile-history-event-icon {
  color: #7bd7cf;
  border-color: #285c60;
  background: #123942;
}

html[data-theme="dark"] .profile-photo-art {
  background:
    linear-gradient(135deg, rgba(31, 120, 135, 0.2), rgba(69, 78, 132, 0.2)),
    #102b39;
}

@media (max-width: 760px) {
  .profile-history {
    padding: 14px;
  }

  .profile-history-heading,
  .profile-photo-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .profile-history-tracking {
    align-self: flex-start;
  }

  .profile-history-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-outfit-history,
  .profile-photo-history {
    grid-template-columns: 1fr;
  }

  .profile-photo-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

.profile-archive-tabs {
  scrollbar-width: thin;
}

.profile-archive-tabs button em,
.profile-archive-scope button em {
  min-width: 22px;
  padding: 2px 5px;
  color: #0c7473;
  border-radius: 999px;
  background: rgba(23, 143, 139, 0.12);
  font-size: 0.59rem;
  font-style: normal;
  text-align: center;
}

.profile-archive-resource-heading {
  margin-bottom: 10px;
}

.profile-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-archive-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.profile-archive-toolbar .profile-archive-scope {
  margin-bottom: 0;
}

.profile-archive-scope button {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: #59717e;
  border: 1px solid rgba(75, 120, 141, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.7rem;
  font-weight: 850;
}

.profile-archive-scope button:hover,
.profile-archive-scope button.is-active {
  color: #0b7373;
  border-color: rgba(23, 143, 139, 0.48);
  background: rgba(219, 248, 244, 0.86);
  box-shadow: inset 0 -3px 0 rgba(23, 143, 139, 0.5);
}

.profile-achievement-toggle {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px 7px 8px;
  color: #516b78;
  border: 1px solid rgba(23, 143, 139, 0.32);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(244, 255, 252, 0.94), rgba(226, 247, 244, 0.86));
  font-size: 0.7rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 5px 13px rgba(23, 83, 104, 0.08);
}

.profile-achievement-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #8a9ca5;
  box-shadow: inset 0 2px 4px rgba(26, 51, 62, 0.22);
  transition: background 160ms ease;
}

.profile-toggle-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(14, 40, 51, 0.28);
  transition: transform 180ms ease;
}

.profile-achievement-toggle input:checked + .profile-toggle-track {
  background: linear-gradient(90deg, #15938e, #2eb6ad);
}

.profile-achievement-toggle input:checked + .profile-toggle-track i {
  transform: translateX(16px);
}

.profile-achievement-toggle input:focus-visible + .profile-toggle-track {
  outline: 3px solid rgba(47, 111, 237, 0.2);
  outline-offset: 2px;
}

.profile-toggle-copy {
  display: grid;
  gap: 1px;
  text-align: left;
}

.profile-toggle-copy strong {
  color: #24565e;
  font-size: 0.68rem;
  line-height: 1.1;
}

.profile-toggle-copy small {
  color: #69808a;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.1;
}

.profile-badge-item {
  position: relative;
}

.profile-archive-label {
  position: absolute;
  z-index: 3;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  color: #fff4dc;
  border-radius: 4px;
  background: rgba(132, 82, 31, 0.9);
  font-size: 0.54rem;
  font-weight: 900;
}

.profile-archive-label svg {
  width: 10px;
  height: 10px;
}

.is-archived-resource {
  border-color: rgba(187, 131, 66, 0.44) !important;
}

.profile-room-archive {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.profile-room-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 112px;
  padding: 0;
  overflow: hidden;
}

.profile-room-art {
  position: relative;
  min-height: 112px;
  display: grid;
  place-items: center;
  color: #6ea8b4;
  background: rgba(49, 105, 125, 0.12);
  overflow: hidden;
}

.profile-room-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-room-art > svg {
  width: 34px;
  height: 34px;
}

.profile-room-art.is-missing::after {
  content: "Oda görseli yok";
  padding: 8px;
  color: #78919c;
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
}

.profile-room-art > span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  color: #fff;
  border-radius: 4px;
  background: rgba(113, 54, 35, 0.88);
  font-size: 0.52rem;
  font-weight: 900;
}

.profile-room-art > span svg {
  width: 10px;
  height: 10px;
}

.profile-room-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px;
}

.profile-room-copy strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-room-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profile-room-copy span,
.profile-room-copy small {
  color: var(--muted);
  font-size: 0.59rem;
}

.profile-room-copy small {
  margin-top: auto;
}

.profile-group-archive {
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
}

.profile-group-card {
  position: relative;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  min-height: 120px;
}

.profile-group-card > img,
.profile-group-card > svg {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.profile-group-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.profile-group-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.63rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.profile-group-card span,
.profile-group-card small {
  color: var(--muted);
  font-size: 0.59rem;
}

.profile-resource-status {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b17d45;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 850;
}

.profile-resource-status svg {
  width: 11px;
  height: 11px;
}

html[data-theme="dark"] .profile-archive-tabs button em,
html[data-theme="dark"] .profile-archive-scope button em {
  color: #93e3dc;
  background: rgba(75, 171, 164, 0.18);
}

html[data-theme="dark"] .profile-archive-scope button,
html[data-theme="dark"] .profile-achievement-toggle {
  color: #b8cbd4;
  border-color: rgba(66, 105, 124, 0.68);
  background: rgba(13, 34, 46, 0.84);
}

html[data-theme="dark"] .profile-history-loading {
  border-color: rgba(77, 171, 171, 0.35);
  background:
    linear-gradient(90deg, rgba(22, 76, 79, 0.22), rgba(32, 62, 92, 0.28), rgba(22, 76, 79, 0.22));
  background-size: 220% 100%;
}

html[data-theme="dark"] .profile-achievement-toggle {
  border-color: rgba(69, 167, 160, 0.42);
  background: linear-gradient(180deg, rgba(20, 65, 68, 0.9), rgba(15, 48, 57, 0.92));
}

html[data-theme="dark"] .profile-toggle-copy strong {
  color: #dff7f4;
}

html[data-theme="dark"] .profile-toggle-copy small {
  color: #9eb5bd;
}

html[data-theme="dark"] .profile-archive-scope button:hover,
html[data-theme="dark"] .profile-archive-scope button.is-active {
  color: #e0fbf8;
  border-color: rgba(87, 190, 181, 0.58);
  background: rgba(24, 78, 79, 0.72);
}

@media (max-width: 680px) {
  .profile-archive-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-achievement-toggle {
    align-self: flex-start;
  }

  .profile-history-loading {
    min-height: 165px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 20px 16px;
  }

  .profile-history-loading-icon {
    width: 42px;
    height: 42px;
  }

  .profile-history-loading .loading-dots {
    grid-column: 1 / -1;
    justify-self: center;
    padding-top: 2px;
  }

  .profile-room-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

/* HabboFiyat collection redesign */
.price-search-panel {
  margin-bottom: 20px;
}

.price-collections-head {
  align-items: center;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(71, 181, 188, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(110deg, rgba(31, 210, 185, 0.08), transparent 42%),
    rgba(5, 27, 40, 0.58);
}

.price-collections-title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.price-collections-title > span:last-child,
.price-collections-title strong,
.price-collections-title small {
  display: block;
}

.price-collections-title strong {
  color: #f2fbff;
  font-size: 1rem;
}

.price-collections-title small {
  margin-top: 2px;
  color: #84aebf;
  font-size: 0.7rem;
  font-weight: 750;
}

.price-collections-title-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: #35ddc3;
  border: 1px solid rgba(58, 222, 196, 0.32);
  border-radius: 9px;
  background: rgba(24, 196, 172, 0.1);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.price-collections-title-icon svg {
  width: 19px;
  height: 19px;
}

.price-board .price-collections-head .select-control {
  min-width: 190px;
  min-height: 42px;
  padding-inline: 13px 38px;
  color: #eaf8ff;
  border: 1px solid rgba(83, 157, 204, 0.45);
  border-radius: 9px;
  background-color: #0a2235;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.price-collections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  max-height: none;
  overflow: visible;
  margin-bottom: 34px;
  padding: 0;
}

.price-collection-card {
  --collection-accent: #70b9bd;
  --collection-soft: rgba(112, 185, 189, 0.09);
  position: relative;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  overflow: hidden;
  padding: 13px 13px 13px 12px;
  color: #edfaff;
  text-align: left;
  border: 1px solid rgba(91, 142, 161, 0.25);
  border-radius: 12px;
  background:
    radial-gradient(circle at 10% 20%, var(--collection-soft), transparent 50%),
    linear-gradient(145deg, rgba(13, 40, 54, 0.94), rgba(8, 27, 40, 0.97));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 8px 20px rgba(2, 15, 25, 0.1);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.price-collection-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--collection-accent);
  box-shadow: 0 0 10px rgba(112, 185, 189, 0.28);
  opacity: 0.48;
}

.price-collection-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 68px;
  height: 68px;
  border: 12px solid rgba(112, 185, 189, 0.055);
  border-radius: 50%;
  pointer-events: none;
}

.price-collection-card:hover,
.price-collection-card.is-active {
  transform: translateY(-2px);
  border-color: rgba(112, 185, 189, 0.62);
  background:
    radial-gradient(circle at 10% 20%, rgba(112, 185, 189, 0.12), transparent 52%),
    linear-gradient(145deg, rgba(16, 48, 62, 0.97), rgba(9, 31, 44, 0.98));
  box-shadow: 0 11px 24px rgba(2, 15, 25, 0.2), inset 0 1px rgba(255, 255, 255, 0.055);
}

.price-collection-card.is-active::before {
  width: 4px;
  opacity: 0.85;
}

.collection-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  color: var(--collection-accent);
  border: 1px solid rgba(112, 185, 189, 0.27);
  border-radius: 10px;
  background: rgba(112, 185, 189, 0.09);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.055);
}

.collection-icon svg {
  width: 20px;
  height: 20px;
}

.collection-icon img {
  width: auto;
  height: auto;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
}

.price-collection-card[data-price-category="rare"] .collection-icon img {
  max-width: 34px;
}

.price-collection-card[data-price-category="ltd"] .collection-icon img,
.price-collection-card[data-price-category="nft"] .collection-icon img {
  width: 25px;
  height: 25px;
}

.collection-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.price-collection-card .collection-copy strong,
.price-collection-card .collection-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-collection-card .collection-copy strong {
  color: #f2faff;
  font-size: 0.84rem;
}

.price-collection-card .collection-copy small {
  margin-top: 4px;
  color: #7899aa;
  font-size: 0.64rem;
  font-weight: 750;
}

.price-collection-card em {
  position: relative;
  z-index: 1;
  min-width: 38px;
  padding: 5px 8px;
  color: #fff;
  border: 1px solid rgba(112, 185, 189, 0.38);
  border-radius: 999px;
  background: rgba(3, 18, 29, 0.72);
  box-shadow: none;
}

.price-collection-card[data-price-category] {
  --collection-accent: #70b9bd;
  --collection-soft: rgba(112, 185, 189, 0.09);
}

@media (max-width: 1050px) {
  .price-collections {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .price-collections-head {
    align-items: stretch;
    flex-direction: column;
  }

  .price-board .price-collections-head .select-control {
    width: 100%;
  }

  .price-collections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding: 0;
  }

  .price-collection-card {
    min-width: 0;
    min-height: 76px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: 10px;
  }

  .collection-icon {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .price-collections {
    grid-template-columns: 1fr;
  }
}

/* Transparent official Habbo navigation icons */
.nav-art-icon.nav-art-icon--transparent,
html[data-theme="dark"] .nav-art-icon.nav-art-icon--transparent {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.28));
  image-rendering: pixelated;
}

.nav-choice.is-active .nav-art-icon.nav-art-icon--transparent,
.nav-choice.is-menu-open .nav-art-icon.nav-art-icon--transparent,
.nav-choice:hover .nav-art-icon.nav-art-icon--transparent,
html[data-theme="dark"] .nav-choice.is-active .nav-art-icon.nav-art-icon--transparent,
html[data-theme="dark"] .nav-choice.is-menu-open .nav-art-icon.nav-art-icon--transparent,
html[data-theme="dark"] .nav-choice:hover .nav-art-icon.nav-art-icon--transparent {
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 7px 4px rgba(0, 0, 0, 0.32));
}

.fan-subnav-choice .subnav-habbo-icon {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
  padding: 3px;
  border: 1px solid rgba(62, 160, 166, 0.22);
  border-radius: 7px;
  background: rgba(25, 100, 108, 0.1);
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.2));
}

.fan-subnav-choice:hover .subnav-habbo-icon,
.fan-subnav-choice.is-active .subnav-habbo-icon {
  border-color: rgba(67, 211, 195, 0.4);
  background: rgba(32, 160, 148, 0.13);
}

html[data-theme="dark"] .fan-subnav-choice .subnav-habbo-icon {
  border-color: rgba(69, 145, 161, 0.28);
  background: rgba(17, 65, 77, 0.72);
}

html[data-theme="dark"] .fan-subnav-choice:hover .subnav-habbo-icon,
html[data-theme="dark"] .fan-subnav-choice.is-active .subnav-habbo-icon {
  border-color: rgba(66, 207, 192, 0.42);
  background: rgba(20, 92, 94, 0.82);
}

/* Founder-only automatic news pool */
.admin-tabs .segment em {
  min-width: 22px;
  margin-left: 5px;
  padding: 2px 6px;
  color: #dffdfa;
  border-radius: 999px;
  background: rgba(41, 181, 165, 0.2);
  font-size: 0.66rem;
  font-style: normal;
}

.news-pool-panel {
  display: grid;
  gap: 18px;
}

.news-pool-heading {
  margin-bottom: 0;
}

.news-pool-sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.news-source-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-elevated);
}

.news-source-card:hover,
.news-source-card.is-active {
  border-color: rgba(24, 181, 163, 0.58);
  background: rgba(36, 194, 175, 0.08);
}

.news-source-card.has-error {
  border-color: rgba(220, 81, 91, 0.45);
}

.news-source-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #17a997;
  border-radius: 8px;
  background: rgba(32, 190, 170, 0.1);
}

.news-source-icon svg {
  width: 19px;
}

.news-source-card strong,
.news-source-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-source-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.66rem;
}

.news-source-card em {
  min-width: 30px;
  padding: 4px 7px;
  color: #087d70;
  border-radius: 999px;
  background: rgba(31, 192, 170, 0.12);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.news-pool-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.news-pool-statuses {
  margin: 0;
}

.news-pool-list {
  display: grid;
  gap: 14px;
}

.news-pool-card {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-elevated);
  box-shadow: 0 10px 24px rgba(10, 42, 58, 0.08);
}

.news-pool-card.approved {
  border-color: rgba(28, 179, 132, 0.34);
}

.news-pool-card.rejected {
  opacity: 0.76;
  border-color: rgba(206, 81, 91, 0.28);
}

.news-pool-media {
  position: relative;
  min-height: 210px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #6dd8ca;
  background:
    radial-gradient(circle, rgba(45, 211, 187, 0.17), transparent 58%),
    linear-gradient(145deg, #0b2d3a, #071b29);
}

.news-pool-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-pool-media > svg {
  width: 46px;
  height: 46px;
}

.news-pool-media > span {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  padding: 6px 8px;
  overflow: hidden;
  color: #f1fbff;
  border-radius: 6px;
  background: rgba(4, 22, 33, 0.82);
  font-size: 0.7rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-pool-copy {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 16px;
}

.news-pool-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.news-source-type {
  padding: 4px 7px;
  color: #087d70;
  border-radius: 999px;
  background: rgba(31, 192, 170, 0.11);
}

.news-source-type.is-fansite {
  color: #526b9b;
  background: rgba(84, 125, 204, 0.11);
}

.news-pool-copy label {
  display: grid;
  gap: 5px;
}

.news-pool-copy label > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.news-pool-copy input,
.news-pool-copy textarea,
.news-pool-copy select {
  width: 100%;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.news-pool-copy input,
.news-pool-copy select {
  min-height: 40px;
  padding: 0 10px;
}

.news-pool-copy textarea {
  padding: 9px 10px;
  resize: vertical;
}

.news-pool-review-row,
.news-pool-actions {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.news-pool-review-row label {
  min-width: 190px;
}

.news-pool-content-editor {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.news-pool-content-editor summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
  cursor: pointer;
  list-style: none;
}

.news-pool-content-editor summary > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 850;
}

.news-pool-content-editor summary svg {
  width: 16px;
}

.news-pool-content-editor textarea {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.news-pool-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.news-pool-empty svg {
  width: 34px;
  height: 34px;
  color: #2ab7a7;
}

html[data-theme="dark"] .news-source-card,
html[data-theme="dark"] .news-pool-card {
  color: #eaf6fb;
  border-color: #29495e;
  background: #091d2a;
}

html[data-theme="dark"] .news-pool-copy input,
html[data-theme="dark"] .news-pool-copy textarea,
html[data-theme="dark"] .news-pool-copy select {
  color: #edf8fc;
  border-color: #31536a;
  background: #071722;
}

@media (max-width: 760px) {
  .news-pool-toolbar,
  .news-pool-review-row,
  .news-pool-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .news-pool-card {
    grid-template-columns: 1fr;
  }

  .news-pool-media {
    min-height: 170px;
  }

  .news-pool-review-row label {
    min-width: 0;
  }
}

/* Optional Habbosal Pixel theme — isolated so it can be removed without touching light/dark */
.theme-controls {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pixel-theme-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: #c8dde8;
  border: 1px solid rgba(120, 179, 202, 0.34);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.065);
  font-size: 0.68rem;
  font-weight: 900;
}

.pixel-theme-button svg {
  width: 15px;
  height: 15px;
}

.pixel-theme-button:hover,
.pixel-theme-button.is-active {
  color: #fff4bc;
  border-color: #e1b84a;
  background: #315b68;
}

html[data-theme="pixel"] {
  color-scheme: light;
  --bg: #7faeb9;
  --paper: #f1e7cf;
  --paper-soft: #e5d8ba;
  --paper-glass: rgba(241, 231, 207, 0.96);
  --surface: #f1e7cf;
  --surface-elevated: #f6edd9;
  --surface-tint: #d9e4d3;
  --ink: #263943;
  --muted: #63747a;
  --line: #8b9b96;
  --line-strong: #526c70;
  --teal: #238f89;
  --blue: #39779c;
  --coral: #bd5c4e;
  --amber: #d8a735;
  --green: #568b51;
  --violet: #75608e;
  --shadow: 5px 5px 0 rgba(35, 57, 65, 0.42);
  --shadow-soft: 3px 3px 0 rgba(35, 57, 65, 0.28);
  --shadow-hover: 6px 6px 0 rgba(35, 57, 65, 0.46);
  --radius: 4px;
}

html[data-theme="pixel"] body {
  color: var(--ink);
  background-color: #79a6b1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    url("assets/habbosal-city-bg.webp");
  background-position: 0 0, 0 0, center top;
  background-size: 24px 24px, 24px 24px, cover;
  background-attachment: fixed;
}

html[data-theme="pixel"] .top-strip {
  color: #e9f3e9;
  border-bottom: 2px solid #142f3b;
  background: #274f5b;
  box-shadow: inset 0 -2px 0 #3d7076;
}

html[data-theme="pixel"] .site-header {
  background: transparent;
}

html[data-theme="pixel"] .nav-shell {
  border: 2px solid #102d3a;
  border-radius: 3px;
  background: #183945;
  box-shadow: 5px 5px 0 rgba(16, 38, 47, 0.42);
}

html[data-theme="pixel"] .nav-logo-row,
html[data-theme="pixel"] .nav-links {
  background-color: #183945;
  background-image: none;
}

html[data-theme="pixel"] .nav-links {
  border-top: 2px solid #4b7275;
}

html[data-theme="pixel"] .nav-choice {
  color: #d8e3de;
  border: 1px solid transparent;
  border-radius: 2px;
  background: #17333f;
  box-shadow: none;
}

html[data-theme="pixel"] .nav-choice:hover,
html[data-theme="pixel"] .nav-choice.is-active,
html[data-theme="pixel"] .nav-choice.is-menu-open {
  color: #fff5bd;
  border-color: #d3a83d;
  background: #2d6065;
  box-shadow: inset 0 -4px 0 #d3a83d;
}

html[data-theme="pixel"] .nav-choice::before,
html[data-theme="pixel"] .nav-choice::after {
  display: none;
}

html[data-theme="pixel"] .pixel-theme-button {
  color: #24373d;
  border: 2px solid #5a4618;
  border-radius: 3px;
  background: #e4bd4f;
  box-shadow: inset -2px -2px 0 #a77a22, inset 2px 2px 0 #fff0a5;
}

html[data-theme="pixel"] .theme-toggle {
  border-radius: 4px;
}

html[data-theme="pixel"] .theme-toggle-thumb {
  border-radius: 3px;
  transform: translateX(0);
}

html[data-theme="pixel"] .command-copy,
html[data-theme="pixel"] .command-scene,
html[data-theme="pixel"] .section-block,
html[data-theme="pixel"] .stat-card,
html[data-theme="pixel"] .article-card,
html[data-theme="pixel"] .badge-item,
html[data-theme="pixel"] .furni-card,
html[data-theme="pixel"] .team-card,
html[data-theme="pixel"] .user-card,
html[data-theme="pixel"] .partner-card,
html[data-theme="pixel"] .profile-card,
html[data-theme="pixel"] .profile-mini,
html[data-theme="pixel"] .reward-card,
html[data-theme="pixel"] .clothing-card,
html[data-theme="pixel"] .admin-command,
html[data-theme="pixel"] .admin-panel,
html[data-theme="pixel"] .modal-card {
  border: 2px solid #405b61;
  border-radius: 4px;
  background-color: #f1e7cf;
  background-image: none;
  box-shadow: 5px 5px 0 rgba(32, 56, 63, 0.38);
  backdrop-filter: none;
}

html[data-theme="pixel"] .command-copy {
  border-left: 6px solid #d4a63b;
}

html[data-theme="pixel"] .command-copy h1,
html[data-theme="pixel"] .command-copy > p,
html[data-theme="pixel"] .section-block h2,
html[data-theme="pixel"] .section-block h3,
html[data-theme="pixel"] .section-block strong,
html[data-theme="pixel"] .admin-panel h2,
html[data-theme="pixel"] .admin-panel h3 {
  color: #263943;
  text-shadow: none;
}

html[data-theme="pixel"] .eyebrow,
html[data-theme="pixel"] .section-heading .eyebrow {
  color: #247f79;
}

html[data-theme="pixel"] .panel-note,
html[data-theme="pixel"] .section-block p,
html[data-theme="pixel"] .section-block small,
html[data-theme="pixel"] .section-block span {
  text-shadow: none;
}

html[data-theme="pixel"] .primary-button,
html[data-theme="pixel"] .ghost-button,
html[data-theme="pixel"] .icon-button,
html[data-theme="pixel"] .icon-text-button,
html[data-theme="pixel"] .segment,
html[data-theme="pixel"] .tab {
  border: 2px solid #34515a;
  border-radius: 3px;
  box-shadow: inset -2px -2px 0 rgba(22, 48, 56, 0.28), inset 2px 2px 0 rgba(255, 255, 255, 0.32);
}

html[data-theme="pixel"] .primary-button {
  color: #fff8cf;
  background: #337f7b;
}

html[data-theme="pixel"] .ghost-button,
html[data-theme="pixel"] .icon-button,
html[data-theme="pixel"] .icon-text-button,
html[data-theme="pixel"] .segment,
html[data-theme="pixel"] .tab {
  color: #2d4148;
  background: #d8cfb8;
}

html[data-theme="pixel"] .primary-button:hover,
html[data-theme="pixel"] .ghost-button:hover,
html[data-theme="pixel"] .segment:hover,
html[data-theme="pixel"] .segment.is-active {
  transform: translate(-1px, -1px);
  border-color: #775b20;
  background: #e0b94b;
  color: #27383d;
  box-shadow: 3px 3px 0 rgba(42, 57, 61, 0.38);
}

html[data-theme="pixel"] input,
html[data-theme="pixel"] select,
html[data-theme="pixel"] textarea,
html[data-theme="pixel"] .search-box,
html[data-theme="pixel"] .rich-editor-canvas {
  color: #263943;
  border: 2px solid #6e817e;
  border-radius: 3px;
  background: #fff9e9;
  box-shadow: inset 2px 2px 0 rgba(56, 75, 78, 0.12);
}

html[data-theme="pixel"] .article-card,
html[data-theme="pixel"] .badge-item,
html[data-theme="pixel"] .furni-card,
html[data-theme="pixel"] .reward-card,
html[data-theme="pixel"] .clothing-card {
  transition: transform 100ms steps(2), box-shadow 100ms steps(2);
}

html[data-theme="pixel"] .article-card:hover,
html[data-theme="pixel"] .badge-item:hover,
html[data-theme="pixel"] .furni-card:hover,
html[data-theme="pixel"] .reward-card:hover,
html[data-theme="pixel"] .clothing-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(32, 56, 63, 0.42);
}

html[data-theme="pixel"] .price-board {
  color: #f1f6e8;
  border: 3px solid #132f3b;
  border-radius: 4px;
  background: #173946;
  box-shadow: 6px 6px 0 rgba(21, 40, 47, 0.45);
}

html[data-theme="pixel"] .price-collections-head,
html[data-theme="pixel"] .price-collection-card {
  border-radius: 3px;
  background-image: none;
  box-shadow: 3px 3px 0 rgba(9, 28, 36, 0.35);
}

html[data-theme="pixel"] .price-collection-card {
  background-color: #224b56;
}

html[data-theme="pixel"] .price-collection-card:hover,
html[data-theme="pixel"] .price-collection-card.is-active {
  border-color: #d4a83b;
  background-color: #2e6266;
}

html[data-theme="pixel"] .price-card {
  border: 2px solid #38535b;
  border-radius: 3px;
  box-shadow: 4px 4px 0 rgba(6, 23, 31, 0.42);
}

html[data-theme="pixel"] .fan-subnav,
html[data-theme="pixel"] .community-subnav {
  border: 2px solid #183744;
  border-radius: 3px;
  background: #eadfc4;
  box-shadow: 5px 5px 0 rgba(22, 44, 52, 0.38);
}

html[data-theme="pixel"] .fan-subnav-choice {
  color: #2c4148;
  border-radius: 2px;
  background: #f3ead6;
}

html[data-theme="pixel"] .fan-subnav-choice:hover,
html[data-theme="pixel"] .fan-subnav-choice.is-active {
  color: #21383e;
  border-color: #b48828;
  background: #e2bd57;
  box-shadow: inset 0 -3px 0 #9b7020;
}

html[data-theme="pixel"] .site-footer {
  color: #dcebe5;
  border-top: 3px solid #102e3a;
  background: #1b414d;
}

/* Pixel theme night tone: intentionally softer than the regular dark theme */
html[data-theme="pixel"][data-pixel-tone="dark"] {
  color-scheme: dark;
  --bg: #263f48;
  --paper: #314952;
  --paper-soft: #3a535a;
  --paper-glass: rgba(49, 73, 82, 0.97);
  --surface: #314952;
  --surface-elevated: #3a535b;
  --surface-tint: #405c61;
  --ink: #edf0df;
  --muted: #b3c0b9;
  --line: #607579;
  --line-strong: #829393;
  --teal: #6bb9ae;
  --blue: #72a6ba;
  --coral: #d88470;
  --amber: #ddb95c;
  --green: #84ad75;
  --violet: #a295b1;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body {
  color: var(--ink);
  background-color: #294751;
  background-image:
    linear-gradient(rgba(222, 235, 222, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(222, 235, 222, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(25, 48, 57, 0.42), rgba(25, 48, 57, 0.42)),
    url("assets/habbosal-city-bg.webp");
  background-position: 0 0, 0 0, center top, center top;
  background-size: 24px 24px, 24px 24px, cover, cover;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .top-strip {
  color: #e6eadb;
  background: #213f49;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .nav-shell,
html[data-theme="pixel"][data-pixel-tone="dark"] .nav-logo-row,
html[data-theme="pixel"][data-pixel-tone="dark"] .nav-links {
  background-color: #1c3741;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .nav-choice {
  color: #cad5cd;
  background: #203d47;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .nav-choice:hover,
html[data-theme="pixel"][data-pixel-tone="dark"] .nav-choice.is-active,
html[data-theme="pixel"][data-pixel-tone="dark"] .nav-choice.is-menu-open {
  color: #fff0b0;
  background: #37646a;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .theme-toggle-thumb {
  transform: translateX(30px);
  border-color: #a9c6d2;
  background: #7799a7;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .theme-toggle .is-moon {
  color: #18333d;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .command-copy,
html[data-theme="pixel"][data-pixel-tone="dark"] .command-scene,
html[data-theme="pixel"][data-pixel-tone="dark"] .section-block,
html[data-theme="pixel"][data-pixel-tone="dark"] .stat-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .article-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .badge-item,
html[data-theme="pixel"][data-pixel-tone="dark"] .furni-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .team-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .user-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .partner-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .profile-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .profile-mini,
html[data-theme="pixel"][data-pixel-tone="dark"] .reward-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .clothing-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .admin-command,
html[data-theme="pixel"][data-pixel-tone="dark"] .admin-panel,
html[data-theme="pixel"][data-pixel-tone="dark"] .modal-card {
  border-color: #789092;
  background-color: #344d55;
  color: #edf0df;
  box-shadow: 5px 5px 0 rgba(15, 33, 39, 0.48);
}

html[data-theme="pixel"][data-pixel-tone="dark"] .command-copy h1,
html[data-theme="pixel"][data-pixel-tone="dark"] .command-copy > p,
html[data-theme="pixel"][data-pixel-tone="dark"] .section-block h2,
html[data-theme="pixel"][data-pixel-tone="dark"] .section-block h3,
html[data-theme="pixel"][data-pixel-tone="dark"] .section-block strong,
html[data-theme="pixel"][data-pixel-tone="dark"] .admin-panel h2,
html[data-theme="pixel"][data-pixel-tone="dark"] .admin-panel h3 {
  color: #f2f1df;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .eyebrow,
html[data-theme="pixel"][data-pixel-tone="dark"] .section-heading .eyebrow {
  color: #83c8ba;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .panel-note,
html[data-theme="pixel"][data-pixel-tone="dark"] .section-block p,
html[data-theme="pixel"][data-pixel-tone="dark"] .section-block small,
html[data-theme="pixel"][data-pixel-tone="dark"] .section-block span {
  color: #bdc9c1;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .hero-status,
html[data-theme="pixel"][data-pixel-tone="dark"] .hero-status span,
html[data-theme="pixel"][data-pixel-tone="dark"] .scene-heading,
html[data-theme="pixel"][data-pixel-tone="dark"] .scene-heading span {
  color: #e5eee3;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .ghost-button,
html[data-theme="pixel"][data-pixel-tone="dark"] .icon-button,
html[data-theme="pixel"][data-pixel-tone="dark"] .icon-text-button,
html[data-theme="pixel"][data-pixel-tone="dark"] .segment,
html[data-theme="pixel"][data-pixel-tone="dark"] .tab {
  color: #e4e7d8;
  border-color: #718488;
  background: #4a6267;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .primary-button {
  color: #fff4bd;
  border-color: #254e52;
  background: #3f817b;
}

html[data-theme="pixel"][data-pixel-tone="dark"] input,
html[data-theme="pixel"][data-pixel-tone="dark"] select,
html[data-theme="pixel"][data-pixel-tone="dark"] textarea,
html[data-theme="pixel"][data-pixel-tone="dark"] .search-box,
html[data-theme="pixel"][data-pixel-tone="dark"] .rich-editor-canvas {
  color: #f0f0df;
  border-color: #71868a;
  background: #263f48;
}

html[data-theme="pixel"][data-pixel-tone="dark"] input::placeholder,
html[data-theme="pixel"][data-pixel-tone="dark"] textarea::placeholder {
  color: #9fb0aa;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .fan-subnav,
html[data-theme="pixel"][data-pixel-tone="dark"] .community-subnav {
  border-color: #122e38;
  background: #344d55;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .fan-subnav-choice {
  color: #e2e7da;
  border-color: #60777b;
  background: #3e5960;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .fan-subnav-choice:hover,
html[data-theme="pixel"][data-pixel-tone="dark"] .fan-subnav-choice.is-active {
  color: #2c3c3e;
  background: #d7b85c;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .price-board {
  color: #eef0df;
  background: #1e3d47;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .price-collection-card {
  background-color: #31545d;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .price-collection-card:hover,
html[data-theme="pixel"][data-pixel-tone="dark"] .price-collection-card.is-active {
  background-color: #3d686a;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .site-footer {
  color: #e2e9df;
  background: #1c3c46;
}

@media (max-width: 680px) {
  .pixel-theme-button span {
    display: none;
  }

  .pixel-theme-button {
    width: 36px;
    justify-content: center;
    padding: 0;
  }
}

/* Pixel dark home: keep every nested surface in the same calm Habbo palette */
html[data-theme="pixel"][data-pixel-tone="dark"] {
  --pixel-dark-inset: #263f48;
  --pixel-dark-card: #3c565d;
  --pixel-dark-card-alt: #415c62;
  --pixel-dark-border: #708689;
  --pixel-dark-text: #f2f0dc;
  --pixel-dark-muted: #bdc9c1;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .section-block {
  border-color: #708689;
  background: #344d55;
  box-shadow:
    5px 5px 0 rgba(15, 33, 39, 0.46),
    inset 0 1px 0 rgba(235, 241, 225, 0.08);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .section-block::before {
  height: 3px;
  background: linear-gradient(90deg, #63b6ab, #d1ae56 58%, #718fa0);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .section-block::after {
  top: 3px;
  background: rgba(234, 239, 219, 0.1);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .section-heading {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(137, 158, 157, 0.72);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .section-heading h2,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .section-heading strong {
  color: var(--pixel-dark-text);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .hero-status,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .scene-heading {
  color: #e7eddd;
  border-color: #71878a;
  background: #425d63;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .hero-status span,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .scene-heading span {
  color: #f1efd9;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .panel-note,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-carousel-page-status {
  color: var(--pixel-dark-muted);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-carousel-controls .icon-button {
  color: #e8ead9;
  border-color: #71878a;
  background: #486168;
  box-shadow: inset -2px -2px 0 rgba(20, 42, 48, 0.34), inset 2px 2px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-badge-rail .badge-item.is-compact,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-price-movements .price-row,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .leader-row,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .new-member-row,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] #homeComments .home-comment-card,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message {
  color: var(--pixel-dark-text);
  border-color: var(--pixel-dark-border);
  background: var(--pixel-dark-card);
  box-shadow:
    inset 3px 0 0 rgba(101, 184, 173, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-badge-rail .badge-item.is-compact:nth-child(even),
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-price-movements .price-row:nth-child(even),
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .leader-row:nth-child(even),
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .new-member-row:nth-child(even),
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] #homeComments .home-comment-card:nth-child(even),
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message:nth-child(even) {
  background: var(--pixel-dark-card-alt);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-badge-rail .badge-item.is-compact:hover,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-price-movements .price-row:hover,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .leader-row:hover,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .new-member-row:hover,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] #homeComments .home-comment-card:hover,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message:hover {
  border-color: #91aaa8;
  background: #48656a;
  box-shadow:
    inset 3px 0 0 #d2b45d,
    3px 3px 0 rgba(16, 35, 41, 0.34);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-badge-rail .badge-art,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .price-row-visual,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-avatar,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .comment-avatar,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .leader-row img,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .new-member-row img {
  border-color: #70888a;
  background: #29464f;
  box-shadow: inset 0 0 0 1px rgba(232, 239, 223, 0.05);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-badge-rail .badge-item strong,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .price-row-copy > strong,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .leader-row strong,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .new-member-row strong,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] #homeComments .comment-copy strong,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message-content header strong {
  color: var(--pixel-dark-text);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-badge-rail .badge-item span,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .price-row-copy > span,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .leader-row em,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .new-member-row small,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .new-member-row span,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] #homeComments .comment-row p,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] #homeComments .comment-row span,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message-content time,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message-content p {
  color: var(--pixel-dark-muted);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .price-row em {
  color: #f0d379;
  border-color: rgba(221, 185, 92, 0.48);
  background: #29444b;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .habbo-credit-amount {
  color: #f4efd6;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .leader-row > span {
  color: #3d3519;
  border: 1px solid #f0d475;
  background: #d6b658;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-new-members,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-panel {
  border-color: #708689;
  background: #344d55;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-log {
  padding: 8px;
  border: 1px solid #657d81;
  border-radius: 3px;
  background: #29434c;
  scrollbar-color: #477b88 #29434c;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message.chat-message-vip {
  color: #f4e7b1;
  border-color: #9f874b;
  background: linear-gradient(90deg, #554f36, #3d5b5d);
  box-shadow: inset 3px 0 0 #d8b550;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message.chat-message-aqua {
  color: #dcf0e9;
  border-color: #68a69f;
  background: linear-gradient(90deg, #365d5d, #3a5663);
  box-shadow: inset 3px 0 0 #6bc9bb;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message.chat-message-neon {
  color: #edf0e5;
  border-color: #8e809f;
  background: linear-gradient(100deg, #354f5a, #4b405b 58%, #36575a);
  box-shadow: inset 3px 0 0 #78cbbf;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message.chat-message-vip p,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message.chat-message-aqua p,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-message.chat-message-neon p {
  color: #e4e9dc;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .chat-form {
  padding-top: 10px;
  border-top: 1px solid #6b8184;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .moderation-delete {
  color: #f0a69a;
  border-color: rgba(230, 132, 116, 0.48);
  background: #4c4446;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-article {
  border-color: #789092;
  background: #284852;
  box-shadow: inset 0 1px 0 rgba(239, 242, 222, 0.06);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-art {
  border-right: 2px solid #708689;
  background: #29454e;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-art::after {
  background:
    linear-gradient(90deg, transparent 72%, rgba(30, 61, 70, 0.34)),
    linear-gradient(0deg, rgba(19, 41, 48, 0.24), transparent 45%);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-copy,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-copy h3,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-copy strong {
  color: #fff1ca;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-copy > p,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-copy span,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-copy time {
  color: #d4ddd4;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-news-section .article-card,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-furni-section .furni-card {
  color: var(--pixel-dark-text);
  border-color: var(--pixel-dark-border);
  background: var(--pixel-dark-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-news-section .article-card-footer,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-news-section .article-card-copy,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-furni-section .furni-card-copy {
  border-color: #6b8184;
  background: #3a545b;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-news-section .article-card h3,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-furni-section .furni-card strong {
  color: var(--pixel-dark-text);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-news-section .article-card p,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-news-section .article-card span,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-news-section .article-card time,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-furni-section .furni-card span,
html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-furni-section .furni-card p {
  color: var(--pixel-dark-muted);
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .home-furni-section .furni-icon-img {
  border-color: #70888a;
  background: #29464f;
}

html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .online-dot {
  color: #cce6d2;
}

@media (max-width: 720px) {
  html[data-theme="pixel"][data-pixel-tone="dark"] body[data-active-view="home"] .spotlight-art {
    border-right: 0;
    border-bottom: 2px solid #708689;
  }
}

/* Habbo animated fan games */
.habbo-game-panel {
  overflow: hidden;
}

.game-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  color: #176c67;
  border: 1px solid #82bdb1;
  border-radius: 5px;
  background: #e8f7ed;
  font-size: 0.75rem;
  font-weight: 900;
}

.game-live-chip svg {
  width: 15px;
}

.wheel-cooldown-chip {
  min-width: 150px;
  justify-content: center;
}

.wheel-cooldown-chip b {
  font: inherit;
  white-space: nowrap;
}

.subnav-frank-icon {
  object-fit: cover;
  object-position: center 7%;
  image-rendering: pixelated;
}

.fan-subnav-choice .subnav-game-icon {
  padding: 0;
  border-color: rgba(52, 111, 119, 0.32);
  background: #dce9e6;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.18));
}

.fan-subnav-choice .subnav-frank-icon {
  object-fit: cover;
  object-position: center 7%;
  padding: 1px 6px 0;
  background: linear-gradient(180deg, #edf6ee 0%, #d6e8df 100%);
}

.fan-subnav-choice .subnav-wheel-icon {
  object-fit: contain;
  image-rendering: auto;
}

.wheel-game-layout {
  display: grid;
  grid-template-columns: minmax(380px, 1.2fr) minmax(280px, 0.8fr);
  gap: 20px;
}

.wheel-room-scene,
.frank-game-stage {
  position: relative;
  overflow: hidden;
  border: 2px solid #48636a;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 244, 207, 0.06), rgba(38, 64, 70, 0.12)),
    url("assets/habbosal-city-bg.webp") center / cover no-repeat;
  box-shadow: inset 0 -54px 0 rgba(155, 119, 65, 0.2), 4px 4px 0 rgba(34, 55, 59, 0.24);
}

.wheel-room-scene {
  min-height: 500px;
  display: grid;
  place-items: center;
}

.wheel-machine {
  position: relative;
  width: 360px;
  height: 430px;
  display: grid;
  place-items: start center;
  padding-top: 24px;
}

.prize-wheel {
  position: relative;
  width: 330px;
  height: 330px;
  border: 10px solid #364f56;
  border-radius: 50%;
  background:
    conic-gradient(
      #f3c64f 0 72deg,
      #53c6bc 72deg 144deg,
      #ef8067 144deg 216deg,
      #7b83d7 216deg 288deg,
      #91c76f 288deg 360deg
    );
  box-shadow:
    inset 0 0 0 7px #fff1b5,
    0 0 0 4px #d8a83b,
    8px 10px 0 rgba(27, 48, 54, 0.35);
  transition: transform 4.2s cubic-bezier(0.12, 0.78, 0.14, 1);
}

.prize-wheel::before {
  content: "";
  position: absolute;
  inset: 28px;
  border: 3px dashed rgba(255, 255, 255, 0.68);
  border-radius: 50%;
}

.wheel-pointer {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
  border-top: 0;
  border-bottom: 42px solid #e54f40;
  filter: drop-shadow(3px 3px 0 #69372f);
  transform: translateX(-50%) rotate(180deg);
}

.wheel-hub {
  position: absolute;
  z-index: 3;
  inset: 50%;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #f5cc4a;
  border: 7px solid #f9e6a0;
  border-radius: 50%;
  background: #284c58;
  box-shadow: 3px 4px 0 rgba(31, 48, 51, 0.42);
  transform: translate(-50%, -50%);
}

.wheel-hub svg {
  width: 30px;
  fill: currentColor;
}

.wheel-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  color: #233d46;
  font-size: 1.25rem;
  font-weight: 1000;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
}

.wheel-label-1 { transform: translate(-50%, -50%) rotate(36deg) translateY(-118px) rotate(-36deg); }
.wheel-label-2 { transform: translate(-50%, -50%) rotate(108deg) translateY(-118px) rotate(-108deg); }
.wheel-label-3 { transform: translate(-50%, -50%) rotate(180deg) translateY(-118px) rotate(-180deg); }
.wheel-label-4 { transform: translate(-50%, -50%) rotate(252deg) translateY(-118px) rotate(-252deg); }
.wheel-label-5 { transform: translate(-50%, -50%) rotate(324deg) translateY(-118px) rotate(-324deg); }

.wheel-machine-base {
  position: absolute;
  bottom: 8px;
  width: 210px;
  padding: 15px;
  color: #fff0b0;
  border: 5px solid #344f56;
  border-radius: 5px;
  background: #287b77;
  box-shadow: 6px 7px 0 rgba(28, 48, 52, 0.34);
  font-size: 1.15rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-align: center;
}

.game-control-card {
  align-self: center;
  padding: 22px;
  border: 2px solid #6b7f7d;
  border-radius: 5px;
  background: rgba(248, 241, 219, 0.96);
  box-shadow: 4px 4px 0 rgba(40, 61, 63, 0.24);
}

.game-control-card h3 {
  margin: 5px 0 16px;
}

.wheel-prize-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.wheel-prize-list span {
  padding: 10px;
  color: #40545a;
  border: 1px solid #aab8b1;
  border-radius: 4px;
  background: #fffaf0;
  font-size: 0.76rem;
  font-weight: 750;
}

.wheel-prize-list b {
  color: #176f6b;
  font-size: 1rem;
}

.game-start-button {
  justify-content: center;
}

.game-status {
  margin-top: 12px;
}

.frank-game-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.frank-game-hud > span {
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border: 2px solid #6a817f;
  border-radius: 4px;
  background: #f9f2dd;
  box-shadow: 3px 3px 0 rgba(37, 58, 61, 0.2);
}

.frank-game-hud small {
  color: #567076;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.frank-game-hud strong {
  color: #193b45;
  font-size: 1.2rem;
}

.frank-game-stage {
  height: 560px;
}

.frank-game-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 88px;
  background: linear-gradient(180deg, rgba(191, 155, 91, 0.12), rgba(131, 90, 44, 0.38));
  pointer-events: none;
}

.frank-game-room-label {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: #fff4cf;
  border: 2px solid #6b8584;
  border-radius: 4px;
  background: rgba(28, 64, 72, 0.9);
  font-size: 0.73rem;
  font-weight: 900;
}

.frank-game-room-label svg {
  width: 14px;
}

.frank-game-intro {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  width: min(420px, calc(100% - 32px));
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  color: #29434a;
  border: 3px solid #496369;
  border-radius: 6px;
  background: rgba(255, 248, 225, 0.96);
  box-shadow: 6px 7px 0 rgba(29, 48, 52, 0.35);
  text-align: center;
  transform: translate(-50%, -50%);
}

.frank-intro-avatar {
  width: 126px;
  height: 136px;
  overflow: hidden;
}

.frank-intro-avatar img {
  width: 126px;
  height: 136px;
  object-fit: contain;
  image-rendering: pixelated;
}

.frank-game-intro strong {
  font-size: 1.25rem;
}

.frank-game-intro p {
  margin: 0;
  line-height: 1.5;
}

.frank-target {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 112px;
  height: 126px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
  transform: translate(var(--frank-x, 50px), var(--frank-y, 90px));
  transition: transform 180ms steps(3);
}

.frank-target img {
  width: 112px;
  height: 118px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(3px 5px 2px rgba(26, 42, 45, 0.32));
  pointer-events: none;
}

.frank-target span {
  position: absolute;
  top: -6px;
  left: 50%;
  padding: 5px 7px;
  color: #3e3619;
  border: 2px solid #465d62;
  border-radius: 4px;
  background: #fff7d2;
  box-shadow: 2px 2px 0 rgba(30, 47, 50, 0.26);
  font-size: 0.64rem;
  font-weight: 1000;
  transform: translateX(-50%);
  pointer-events: none;
}

.frank-target.is-popping {
  animation: frank-pop 260ms steps(3);
}

@keyframes frank-pop {
  0% { scale: 0.72; opacity: 0.35; }
  70% { scale: 1.08; opacity: 1; }
  100% { scale: 1; }
}

.frank-hit-effect {
  position: absolute;
  z-index: 8;
  inset: 50% auto auto 50%;
  color: #fff7bd;
  font-size: 2rem;
  font-weight: 1000;
  text-shadow: 3px 3px 0 #8a472e;
  pointer-events: none;
}

.frank-hit-effect.is-active {
  animation: frank-score-pop 380ms ease-out both;
}

@keyframes frank-score-pop {
  from { opacity: 1; transform: translate(-50%, -20%) scale(0.75); }
  to { opacity: 0; transform: translate(-50%, -130%) scale(1.3); }
}

html[data-theme="pixel"][data-pixel-tone="dark"] .game-control-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .frank-game-hud > span,
html[data-theme="pixel"][data-pixel-tone="dark"] .frank-game-intro {
  color: #edf0df;
  border-color: #789092;
  background: rgba(52, 77, 85, 0.97);
}

html[data-theme="pixel"][data-pixel-tone="dark"] .frank-game-hud strong,
html[data-theme="pixel"][data-pixel-tone="dark"] .game-control-card h3 {
  color: #edf0df;
}

@media (max-width: 900px) {
  .wheel-game-layout {
    grid-template-columns: 1fr;
  }

  .wheel-room-scene {
    min-height: 460px;
  }
}

@media (max-width: 560px) {
  .wheel-machine {
    width: 300px;
    height: 380px;
  }

  .prize-wheel {
    width: 275px;
    height: 275px;
  }

  .wheel-label-1 { transform: translate(-50%, -50%) rotate(36deg) translateY(-96px) rotate(-36deg); }
  .wheel-label-2 { transform: translate(-50%, -50%) rotate(108deg) translateY(-96px) rotate(-108deg); }
  .wheel-label-3 { transform: translate(-50%, -50%) rotate(180deg) translateY(-96px) rotate(-180deg); }
  .wheel-label-4 { transform: translate(-50%, -50%) rotate(252deg) translateY(-96px) rotate(-252deg); }
  .wheel-label-5 { transform: translate(-50%, -50%) rotate(324deg) translateY(-96px) rotate(-324deg); }

  .frank-game-stage {
    height: 500px;
  }

  .frank-game-hud {
    grid-template-columns: repeat(3, 1fr);
  }

  .frank-game-hud > span {
    padding: 8px;
  }
}

/* Pixel light readability pass */
html[data-theme="pixel"][data-pixel-tone="light"] {
  --muted: #4e6268;
  --teal: #176f6b;
  --blue: #2d6687;
}

html[data-theme="pixel"][data-pixel-tone="light"] .eyebrow,
html[data-theme="pixel"][data-pixel-tone="light"] .section-heading .eyebrow {
  color: #126d68;
}

html[data-theme="pixel"][data-pixel-tone="light"] .panel-note,
html[data-theme="pixel"][data-pixel-tone="light"] .home-carousel-page-status,
html[data-theme="pixel"][data-pixel-tone="light"] .article-card p,
html[data-theme="pixel"][data-pixel-tone="light"] .article-card span,
html[data-theme="pixel"][data-pixel-tone="light"] .article-card time,
html[data-theme="pixel"][data-pixel-tone="light"] .reward-card p,
html[data-theme="pixel"][data-pixel-tone="light"] .reward-card span,
html[data-theme="pixel"][data-pixel-tone="light"] .furni-card span,
html[data-theme="pixel"][data-pixel-tone="light"] .furni-card em {
  color: #4e6268;
}

html[data-theme="pixel"][data-pixel-tone="light"] input::placeholder,
html[data-theme="pixel"][data-pixel-tone="light"] textarea::placeholder {
  color: #5a696d;
  opacity: 1;
}

html[data-theme="pixel"][data-pixel-tone="light"] .primary-button {
  color: #fffbe8;
  background: #276e6b;
}

html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-copy,
html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-copy h3,
html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-copy strong {
  color: #fff2c9;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .spotlight-article {
  border-color: #586d5d;
  background: #4b5c4e;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 210, 0.1),
    3px 3px 0 rgba(56, 59, 45, 0.24);
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .spotlight-art {
  border-right: 2px solid #796d4b;
  background: #d8cfb2;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .spotlight-art::after {
  background:
    linear-gradient(90deg, transparent 76%, rgba(61, 72, 57, 0.22)),
    linear-gradient(0deg, rgba(45, 51, 38, 0.2), transparent 42%);
}

html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-copy > p,
html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-copy small,
html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-copy span,
html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-copy time {
  color: #e0e5d2;
}

html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-copy .pill {
  color: #fff8d2;
  border-color: #d2b75d;
  background: #667252;
  box-shadow: 2px 2px 0 rgba(43, 48, 35, 0.28);
}

html[data-theme="pixel"][data-pixel-tone="light"] .spotlight-index {
  color: #fff4be;
  text-shadow: 2px 2px 0 rgba(20, 48, 56, 0.72);
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .spotlight-author .author-mark {
  color: #ffe584;
  border-color: #a3925c;
  background: #596555;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .spotlight-copy .primary-button {
  color: #fff8cf;
  border-color: #4d5e49;
  background: #6a7655;
  box-shadow:
    inset -2px -2px 0 #4a5843,
    inset 2px 2px 0 rgba(255, 246, 188, 0.22),
    3px 3px 0 rgba(43, 48, 35, 0.34);
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .spotlight-copy .primary-button:hover {
  color: #304034;
  border-color: #775b20;
  background: #dfbc58;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-board,
html[data-theme="pixel"][data-pixel-tone="light"] .price-board h2,
html[data-theme="pixel"][data-pixel-tone="light"] .price-board h3,
html[data-theme="pixel"][data-pixel-tone="light"] .price-board strong {
  color: #f4f1d9;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-board .eyebrow {
  color: #66d2c5;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-search-panel {
  padding-bottom: 16px;
  border-bottom: 1px solid #527780;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-collections-head {
  padding: 12px 14px;
  border: 1px solid #527780;
  background: #1c414c;
  box-shadow: inset 0 1px 0 rgba(232, 246, 237, 0.08);
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-collections-title strong {
  color: #f7f1d7;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-collections-title small {
  color: #b8d0ce;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-collection-card {
  color: #edf0dc;
  border-color: #527780;
  background-color: #28535d;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-collection-card strong {
  color: #f5f0d8;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-collection-card span {
  color: #b9cfcb;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-collection-card em {
  color: #fff;
  border-color: #6d9198;
  background: #132f3a;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-collection-card:hover,
html[data-theme="pixel"][data-pixel-tone="light"] .price-collection-card.is-active {
  color: #fff6cc;
  border-color: #e0b642;
  background-color: #37676a;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-results-head h3,
html[data-theme="pixel"][data-pixel-tone="light"] .price-results-head h3 span {
  color: #f1e9c9;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-results-head strong {
  color: #b9d6d7;
}

html[data-theme="pixel"][data-pixel-tone="light"] .price-board .select-control {
  color: #f3efda;
  border-color: #5b8390;
  background: #163746;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-command {
  color: #263943;
  border-color: #405b61;
  background: #f1e7cf;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-command h2,
html[data-theme="pixel"][data-pixel-tone="light"] .admin-command .eyebrow {
  color: #263943;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-command .eyebrow {
  color: #126d68;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-command .panel-note {
  color: #4e6268;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-health {
  color: #24464b;
  border-color: #7b928e;
  background: #ddd3b8;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-summary article {
  border-color: #9aa49a;
  background: #e5dbc0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-summary svg {
  color: #178b84;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-summary span {
  color: #435a60;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-summary strong {
  color: #20343c;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-summary article em {
  color: #53666b;
}

html[data-theme="pixel"][data-pixel-tone="light"] .admin-tabs .segment em {
  color: #245d58;
  background: #b8d9c9;
}

html[data-theme="pixel"][data-pixel-tone="light"] .preview-label,
html[data-theme="pixel"][data-pixel-tone="light"] .reward-card > span,
html[data-theme="pixel"][data-pixel-tone="light"] .reward-card .reward-availability {
  color: #176f6b;
}

html[data-theme="pixel"][data-pixel-tone="light"] .article-card-media .pill,
html[data-theme="pixel"][data-pixel-tone="light"] .article-preview .pill,
html[data-theme="pixel"][data-pixel-tone="light"] .admin-article-card .pill {
  color: #fff;
  border-color: #6dc8c0;
  background: #087b80;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row {
  min-height: 88px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 10px;
  border-color: #b7c7c1;
  background: #f8f6ed;
  box-shadow: inset 3px 0 0 #86c9c1;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row > img {
  border: 1px solid #54777b;
  border-radius: 4px;
  background: #173c47;
  box-shadow: 3px 3px 0 rgba(45, 65, 68, 0.2);
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row > div {
  gap: 1px;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row > div strong {
  color: #203740;
  font-size: 0.92rem;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row > div small,
html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row > div span {
  color: #536970;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-role {
  width: 88px;
  max-width: 88px;
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  justify-self: end;
  gap: 5px;
  padding: 5px 6px;
  color: #29454b;
  border: 1px solid #718b89;
  border-radius: 4px;
  background: #e2dbc6;
  box-shadow:
    inset -2px -2px 0 rgba(70, 88, 84, 0.16),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5);
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-role > .role-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-role > span {
  min-width: 0;
  display: block;
  color: #29454b;
  font-size: 0.65rem;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: left;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-role:not(:has(.role-icon)) {
  grid-template-columns: 1fr;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-role:not(:has(.role-icon)) > span {
  text-align: center;
}

html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row.is-profile-link:hover,
html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row.is-profile-link:focus-visible {
  border-color: #4b8f89;
  background: #fffbed;
  box-shadow: inset 3px 0 0 #d6ad42, 3px 3px 0 rgba(45, 65, 68, 0.2);
  transform: translate(-1px, -1px);
}

@media (max-width: 420px) {
  html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
  }

  html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-row > img {
    width: 50px;
    height: 50px;
  }

  html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-role {
    width: 88px;
    max-width: 88px;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 4px;
  }

  html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .new-member-role > .role-icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 720px) {
  html[data-theme="pixel"][data-pixel-tone="light"] body[data-active-view="home"] .spotlight-art {
    border-right: 0;
    border-bottom: 2px solid #796d4b;
  }
}

html[data-theme="pixel"] .article-page-card {
  border: 2px solid #405b61;
  border-radius: 4px;
  background: #f1e7cf;
  box-shadow: 5px 5px 0 rgba(32, 56, 63, 0.38);
}

html[data-theme="pixel"] .article-page-toolbar {
  padding: 10px 12px;
  border: 2px solid #405b61;
  border-radius: 4px;
  background: #e5d8ba;
  box-shadow: 3px 3px 0 rgba(32, 56, 63, 0.28);
}

html[data-theme="pixel"] .article-page .article-body {
  color: #34494e;
}

html[data-theme="pixel"] .article-page .article-detail-lead {
  color: #2f494f;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .article-page-card,
html[data-theme="pixel"][data-pixel-tone="dark"] .article-page-toolbar {
  color: #edf0df;
  border-color: #789092;
  background: #344d55;
  box-shadow: 5px 5px 0 rgba(15, 33, 39, 0.48);
}

html[data-theme="pixel"][data-pixel-tone="dark"] .article-page .article-body,
html[data-theme="pixel"][data-pixel-tone="dark"] .article-page .article-detail-lead {
  color: #d4ddd4;
}

@media (max-width: 720px) {
  .article-page-card {
    padding: 0 16px 22px;
  }

  .article-page .article-detail-hero {
    height: 300px;
    min-height: 0;
    margin: 0 -16px;
  }

  .article-page .article-detail-overlay {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .article-page .article-detail-overlay h2 {
    font-size: clamp(1.65rem, 8vw, 2.35rem);
  }

  .article-page-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Final room sizing overrides must stay after the legacy responsive hero rules. */
body[data-active-view="home"] .command-center {
  width: min(1180px, calc(100% - 40px));
  min-height: 446px;
  display: block;
  padding: 26px 0 30px;
}

body[data-active-view="home"] .command-scene {
  width: 100%;
  height: 390px;
  min-height: 390px;
  display: block;
  transform: none;
}

body[data-active-view="home"] .scene-room-wall {
  z-index: 3;
  overflow: visible;
}

body[data-active-view="home"] .command-scene::before {
  z-index: 2;
}

body[data-active-view="home"] .command-scene::after {
  z-index: 1;
}

body[data-active-view="home"] .scene-heading,
body[data-active-view="home"] .scene-speech,
body[data-active-view="home"] .scene-caption {
  z-index: 7;
}

@media (max-width: 1040px) {
  body[data-active-view="home"] .command-center {
    width: min(760px, calc(100% - 28px));
    min-height: 390px;
    padding: 18px 0 26px;
  }

  body[data-active-view="home"] .command-scene {
    height: 340px;
    min-height: 340px;
    display: block;
  }
}

@media (max-width: 620px) {
  body[data-active-view="home"] .command-center {
    width: min(430px, calc(100% - 20px));
    min-height: 326px;
    padding: 14px 0 20px;
  }

  body[data-active-view="home"] .command-scene {
    height: 292px;
    min-height: 292px;
  }
}

/* Compact online users strip at the end of the home page */
.home-online-users {
  margin-top: 16px;
  padding: 16px 18px;
}

.home-online-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.home-online-heading h2 {
  margin-top: 2px;
  font-size: 1.15rem;
}

.home-online-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.home-online-count strong {
  color: var(--ink);
}

.home-online-count .live-pulse {
  width: 8px;
  height: 8px;
}

.home-online-list {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 13px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.home-online-user {
  width: 74px;
  flex: 0 0 74px;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 7px 4px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-elevated);
  font: inherit;
  cursor: pointer;
}

.home-online-user > span:last-child {
  width: 100%;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-online-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #e7f2f5;
}

.home-online-avatar img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  transform: translateY(5px);
}

.home-online-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #25bd6a;
}

.home-online-user:hover,
.home-online-user:focus-visible {
  border-color: var(--teal);
  outline: none;
  transform: translateY(-2px);
}

html[data-theme="pixel"] .home-online-users {
  border: 2px solid #405b61;
  border-radius: 4px;
  background: #f1e7cf;
  box-shadow: 4px 4px 0 rgba(32, 56, 63, 0.34);
}

html[data-theme="pixel"] .home-online-user {
  border: 2px solid #71817d;
  border-radius: 3px;
  background: #f8f5e8;
  box-shadow: 2px 2px 0 rgba(41, 60, 63, 0.2);
}

html[data-theme="pixel"] .home-online-avatar {
  border-radius: 3px;
  background: #dcebef;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .home-online-users {
  border-color: #789092;
  background: #344d55;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .home-online-user {
  color: #edf0df;
  border-color: #708689;
  background: #3c565d;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .home-online-avatar {
  background: #29464f;
}

@media (max-width: 620px) {
  .home-online-users {
    padding: 13px;
  }

  .home-online-heading {
    align-items: flex-start;
  }

  .home-online-user {
    width: 68px;
    flex-basis: 68px;
  }
}

/* Article reading balance and Habbo comment portraits */
@media (min-width: 901px) {
  body[data-active-view="article"] .app-shell {
    width: min(1480px, calc(100% - 32px));
  }

  body[data-active-view="article"] .article-page {
    width: 100%;
  }

  .article-page-card {
    grid-template-columns: minmax(0, 680px) 300px;
    justify-content: center;
    column-gap: 28px;
  }

  .article-community-sidebar {
    position: sticky;
    top: 16px;
    align-self: start;
  }
}

@media (min-width: 1380px) {
  .article-page-card {
    grid-template-columns: 300px minmax(0, 680px) 300px;
  }

  .article-main-column {
    grid-column: 2;
  }

  .article-community-sidebar {
    grid-column: 3;
  }
}

@media (min-width: 1220px) and (max-width: 1379px) {
  .article-page-card {
    grid-template-columns: 260px minmax(0, 600px) 260px;
    column-gap: 24px;
  }

  .article-main-column {
    grid-column: 2;
  }

  .article-community-sidebar {
    grid-column: 3;
  }
}

.article-side-comment {
  grid-template-columns: 48px minmax(0, 1fr);
}

.article-side-comment .comment-avatar {
  width: 48px;
  height: 52px;
  place-items: center;
  overflow: hidden;
}

.article-side-comment .comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
  image-rendering: auto;
}

/* Online Habbo avatars: no cards, name bubble and wave on hover */
.home-online-list {
  min-height: 132px;
  align-items: flex-end;
  gap: 4px;
  padding: 22px 8px 0;
  overflow-y: visible;
}

.home-online-user,
html[data-theme="pixel"] .home-online-user,
html[data-theme="pixel"][data-pixel-tone="dark"] .home-online-user {
  position: relative;
  width: 82px;
  height: 112px;
  flex: 0 0 82px;
  display: block;
  padding: 0;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}

.home-online-user:hover,
.home-online-user:focus-visible {
  border: 0;
  outline: none;
  transform: translateY(-3px);
}

.home-online-avatar,
html[data-theme="pixel"] .home-online-avatar,
html[data-theme="pixel"][data-pixel-tone="dark"] .home-online-avatar {
  position: absolute;
  inset: 0;
  width: 82px;
  height: 112px;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home-online-avatar img {
  position: absolute;
  inset: 0;
  width: 82px;
  height: 112px;
  object-fit: contain;
  object-position: center bottom;
  transform: none;
  image-rendering: auto;
  transition: opacity 120ms ease;
}

.home-online-avatar-wave {
  opacity: 0;
}

.home-online-user:hover .home-online-avatar-idle,
.home-online-user:focus-visible .home-online-avatar-idle {
  opacity: 0;
}

.home-online-user:hover .home-online-avatar-wave,
.home-online-user:focus-visible .home-online-avatar-wave {
  opacity: 1;
}

.home-online-name {
  position: absolute;
  z-index: 3;
  top: -20px;
  left: 50%;
  max-width: 140px;
  padding: 6px 9px;
  color: #263d46;
  border: 2px solid #4e666c;
  border-radius: 4px;
  background: #fffdf3;
  box-shadow: 2px 2px 0 rgba(28, 50, 57, 0.22);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.home-online-name::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #4e666c;
  border-bottom: 2px solid #4e666c;
  background: #fffdf3;
  transform: translate(-50%, -4px) rotate(45deg);
}

.home-online-user:hover .home-online-name,
.home-online-user:focus-visible .home-online-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.home-online-dot {
  z-index: 2;
  right: 10px;
  bottom: 8px;
}

@media (max-width: 620px) {
  .home-online-list {
    min-height: 118px;
    padding-inline: 0;
  }

  .home-online-user,
  html[data-theme="pixel"] .home-online-user,
  html[data-theme="pixel"][data-pixel-tone="dark"] .home-online-user {
    width: 72px;
    height: 100px;
    flex-basis: 72px;
  }

  .home-online-avatar,
  html[data-theme="pixel"] .home-online-avatar,
  html[data-theme="pixel"][data-pixel-tone="dark"] .home-online-avatar,
  .home-online-avatar img {
    width: 72px;
    height: 100px;
  }
}

/* Home comment links and correctly centered Habbo heads */
#homeComments .comment-avatar {
  padding: 0;
  overflow: hidden;
  font: inherit;
  cursor: pointer;
}

#homeComments .comment-avatar img {
  width: 58px;
  height: 66px;
  object-fit: contain;
  object-position: center;
  transform: none;
}

#homeComments .home-comment-profile-link:hover,
#homeComments .home-comment-profile-link:focus-visible {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 179, 166, 0.12);
}

#homeComments .home-comment-author,
#homeComments .home-comment-body,
#homeComments .home-comment-article-link,
#homeComments .comment-profile-cue {
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#homeComments .home-comment-author {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#homeComments .home-comment-body {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: var(--ink-soft, var(--ink));
  font-size: 0.8rem;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#homeComments .home-comment-article-link,
#homeComments .comment-profile-cue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

#homeComments .home-comment-article-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#homeComments .home-comment-author:hover,
#homeComments .home-comment-author:focus-visible,
#homeComments .comment-profile-cue:hover,
#homeComments .comment-profile-cue:focus-visible {
  color: var(--teal);
  outline: none;
}

#homeComments .home-comment-body:hover,
#homeComments .home-comment-body:focus-visible,
#homeComments .home-comment-article-link:hover,
#homeComments .home-comment-article-link:focus-visible {
  color: var(--teal);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#homeComments button:disabled {
  cursor: default;
}

/* Reward shop purchase button contrast */
.reward-card-footer .primary-button,
.reward-card-footer .primary-button span,
.reward-card-footer .primary-button svg {
  color: #fffbe8;
}

.reward-card-footer .primary-button span {
  font-weight: 900;
}

html[data-theme="pixel"][data-pixel-tone="light"] .reward-card-footer .primary-button,
html[data-theme="pixel"][data-pixel-tone="light"] .reward-card-footer .primary-button span,
html[data-theme="pixel"][data-pixel-tone="light"] .reward-card-footer .primary-button svg {
  color: #fffbe8;
}

.reward-card-footer .primary-button:disabled,
html[data-theme="pixel"] .reward-card-footer .primary-button:disabled {
  color: #344950;
  border-color: #71817d;
  background: #c9d0ca;
  box-shadow: inset -2px -2px 0 rgba(52, 73, 80, 0.18), inset 2px 2px 0 rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.reward-card-footer .primary-button:disabled span,
.reward-card-footer .primary-button:disabled svg,
html[data-theme="pixel"][data-pixel-tone="light"] .reward-card-footer .primary-button:disabled span,
html[data-theme="pixel"][data-pixel-tone="light"] .reward-card-footer .primary-button:disabled svg {
  color: #344950;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .reward-card-footer .primary-button:disabled,
html[data-theme="pixel"][data-pixel-tone="dark"] .reward-card-footer .primary-button:disabled span,
html[data-theme="pixel"][data-pixel-tone="dark"] .reward-card-footer .primary-button:disabled svg {
  color: #b9c9c9;
}

/* Expandable Habbo room chat */
.chat-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-expand-button {
  width: 34px;
  height: 34px;
}

.chat-expand-button svg {
  width: 16px;
}

.chat-avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  display: block;
}

.chat-avatar-full {
  display: none;
}

.chat-window-backdrop {
  position: fixed;
  z-index: 149;
  inset: 0;
  background: rgba(7, 23, 31, 0.78);
  backdrop-filter: blur(5px);
}

body.chat-window-open {
  overflow: hidden;
}

body.chat-window-open .back-to-top {
  display: none !important;
}

body.chat-window-open .top-strip,
body.chat-window-open .site-header {
  display: none !important;
}

.chat-panel.is-expanded {
  position: fixed;
  z-index: 150;
  inset: clamp(16px, 4vh, 44px) clamp(16px, 5vw, 76px);
  width: auto;
  min-width: 0;
  max-width: 1380px;
  max-height: none;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 3px solid #294b55;
  border-radius: 7px;
  background: #e9dfc7;
  box-shadow: 8px 8px 0 rgba(7, 22, 29, 0.5), 0 24px 80px rgba(0, 0, 0, 0.44);
}

.chat-panel.is-expanded .section-heading {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 15px 18px;
  color: #eef7ec;
  border-bottom: 3px solid #294b55;
  background:
    linear-gradient(90deg, rgba(57, 166, 159, 0.14) 1px, transparent 1px) 0 0 / 22px 100%,
    #173c47;
}

.chat-panel.is-expanded .section-heading h2 {
  color: #fff5cf;
  font-size: 1.25rem;
}

.chat-panel.is-expanded .section-heading .eyebrow {
  color: #75ded2;
}

.chat-panel.is-expanded .online-dot {
  color: #bff4d5;
}

.chat-panel.is-expanded .chat-expand-button {
  color: #fff5cf;
  border-color: #8aa2a1;
  background: #31545d;
}

.chat-panel.is-expanded .chat-log {
  position: relative;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 38px clamp(18px, 4vw, 54px) 46px;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(18, 47, 57, 0.08), rgba(239, 216, 166, 0.28)),
    url("assets/habbosal-city-bg.webp") center / cover no-repeat;
  box-shadow: inset 0 -82px 0 rgba(206, 179, 125, 0.34);
  scrollbar-color: #4d7f83 #d8ceb6;
  scroll-padding-block: 18px;
}

.chat-panel.is-expanded .chat-log::after {
  content: "";
  flex: 0 0 72px;
}

.chat-panel.is-expanded .chat-message {
  width: min(760px, 86%);
  min-height: 138px;
  flex: 0 0 auto;
  align-self: flex-start;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px 18px 15px 10px;
  border: 2px solid rgba(55, 79, 80, 0.72);
  border-radius: 7px;
  background: rgba(255, 250, 235, 0.94);
  box-shadow: 4px 4px 0 rgba(34, 54, 58, 0.32);
  backdrop-filter: blur(3px);
}

.chat-panel.is-expanded .chat-message {
  align-self: flex-start;
}

.chat-panel.is-expanded .chat-message.is-own-message {
  align-self: flex-end;
  margin-left: 0;
  border-color: rgba(37, 126, 123, 0.76);
  background: rgba(231, 251, 243, 0.96);
  box-shadow: -4px 4px 0 rgba(34, 84, 83, 0.28);
}

.chat-panel.is-expanded .chat-message-vip,
.chat-panel.is-expanded .chat-message-aqua,
.chat-panel.is-expanded .chat-message-neon {
  padding: 15px 18px 15px 10px;
}

.chat-panel.is-expanded .chat-avatar-wrap {
  width: 86px;
  height: 108px;
  align-self: center;
  overflow: hidden;
}

.chat-panel.is-expanded .chat-avatar-head {
  display: none;
}

.chat-panel.is-expanded .chat-avatar-full {
  width: 86px;
  height: 108px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  filter: drop-shadow(2px 4px 2px rgba(20, 35, 38, 0.24));
}

.chat-panel.is-expanded .chat-message-content {
  align-self: center;
  padding: 2px 0;
}

.chat-panel.is-expanded .chat-message-content header strong {
  color: #203943;
  font-size: 1rem;
}

.chat-panel.is-expanded .chat-message-content time {
  color: #586c70;
  font-size: 0.7rem;
}

.chat-panel.is-expanded .chat-message-content p {
  margin-top: 8px;
  color: #29434b;
  font-size: 0.95rem;
  line-height: 1.55;
}

.chat-panel.is-expanded .chat-role-line {
  margin-top: 4px;
}

.chat-panel.is-expanded .chat-message > .moderation-delete {
  top: 10px;
  right: 10px;
}

.chat-panel.is-expanded .chat-message:has(> .moderation-delete) .chat-message-content header,
.chat-panel.is-expanded .chat-message:has(> .moderation-delete) .chat-role-line {
  padding-right: 34px;
}

.chat-panel.is-expanded .chat-style-mark {
  top: 11px;
  right: 15px;
}

.chat-panel.is-expanded .chat-message:has(> .moderation-delete) .chat-style-mark {
  right: 50px;
}

.chat-panel.is-expanded .chat-message-neon .chat-message-content header strong,
.chat-panel.is-expanded .chat-message-neon .chat-message-content p,
.chat-panel.is-expanded .chat-message-neon .chat-message-content time,
.chat-panel.is-expanded .chat-message-neon .chat-role,
.chat-panel.is-expanded .chat-message-neon .chat-role span {
  color: #eef7f4;
}

.chat-panel.is-expanded .chat-message-aqua .chat-message-content header strong,
.chat-panel.is-expanded .chat-message-aqua .chat-message-content p {
  color: #16474c;
}

.chat-panel.is-expanded .chat-message-vip .chat-message-content header strong,
.chat-panel.is-expanded .chat-message-vip .chat-message-content p {
  color: #493b14;
}

.chat-panel.is-expanded .chat-form {
  position: relative;
  z-index: 2;
  gap: 10px;
  margin: 0;
  padding: 15px 18px;
  border-top: 3px solid #294b55;
  background: #e9dfc7;
}

.chat-panel.is-expanded .chat-form input {
  min-height: 48px;
  font-size: 0.95rem;
}

.chat-panel.is-expanded .chat-form .icon-button {
  width: 50px;
  height: 48px;
  color: #fff5cf;
  background: #287d78;
}

.chat-panel.is-expanded #chatStatus {
  min-height: 0;
  margin: 0;
  padding: 0 18px 10px;
  color: #4d6266;
  background: #e9dfc7;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .chat-panel.is-expanded {
  border-color: #718b8d;
  background: #344d55;
}

html[data-theme="pixel"][data-pixel-tone="dark"] .chat-panel.is-expanded .chat-form,
html[data-theme="pixel"][data-pixel-tone="dark"] .chat-panel.is-expanded #chatStatus {
  color: #edf0df;
  border-color: #718b8d;
  background: #344d55;
}

@media (max-width: 720px) {
  .chat-panel.is-expanded {
    inset: 0;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .chat-panel.is-expanded .section-heading {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px;
  }

  .chat-panel.is-expanded .chat-heading-actions {
    margin-left: auto;
  }

  .chat-panel.is-expanded .chat-log {
    padding: 22px 10px 30px;
  }

  .chat-panel.is-expanded .chat-message {
    width: 96%;
    min-height: 108px;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .chat-panel.is-expanded .chat-message-vip,
  .chat-panel.is-expanded .chat-message-aqua,
  .chat-panel.is-expanded .chat-message-neon {
    padding: 10px;
  }

  .chat-panel.is-expanded .chat-avatar-wrap,
  .chat-panel.is-expanded .chat-avatar-full {
    width: 64px;
    height: 84px;
  }

  .chat-panel.is-expanded .chat-form {
    padding: 10px;
  }
}

/* Runtime performance: defer below-the-fold paint and avoid expensive mobile compositing. */
body[data-active-view="home"] .main-stack > .section-block,
body[data-active-view="home"] .home-left-stack > .section-block,
body[data-active-view="home"] .side-stack > .section-block {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

@media (max-width: 1100px), (prefers-reduced-motion: reduce) {
  body,
  .chat-panel.is-expanded,
  .wheel-room-scene,
  .frank-game-stage {
    background-attachment: scroll !important;
  }

  .nav-shell,
  .section-block,
  .command-copy,
  .chat-panel.is-expanded {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}