@import url("/fonts.css");
:root {
  color-scheme: dark;
  --bg: #10151e;
  --panel: #19212d;
  --panel2: #202b3a;
  --line: #2b3646;
  --muted: #95a4b8;
  --text: #eef3fa;
  --blue: #63b0ff;
  --green: #69d8a5;
  --sidebar: 218px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    14px/1.6 "Segoe UI",
    Arial,
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  -webkit-user-drag: none;
  user-select: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 5px;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button,
.button {
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  padding: 10px 17px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 4px;
  transition:
    background 0.15s,
    transform 0.15s;
}
button:hover,
.button:hover {
  background: #304259;
}
button:active,
.button:active {
  transform: translateY(1px);
}
.primary {
  color: #101e31;
  background: var(--blue);
  border-color: #85c1ff;
  border-bottom: 4px solid #3776ba;
  box-shadow: inset 0 2px #a5d2ff;
}
.primary:hover {
  background: #89c4ff;
}
.ghost {
  background: transparent;
}
.small {
  font-size: 12px;
  padding: 6px 12px;
}
.icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-button {
  padding: 9px;
  border-color: transparent;
  background: transparent;
}
.topbar {
  height: 72px;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--line);
  background: #141c27;
  display: flex;
  align-items: center;
  padding: 0 26px;
  gap: 32px;
}
.brand {
  width: 166px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 27px;
  font-weight: 950;
  letter-spacing: 3px;
  flex-shrink: 0;
}
.brand img {
  width: 31px;
  height: 36px;
}
.brand span {
  font-size: 9px;
  color: var(--blue);
  letter-spacing: 2px;
  display: block;
  margin-top: -10px;
}
.top-links {
  display: flex;
  gap: 25px;
  font-weight: 650;
}
.top-links a:hover {
  color: var(--blue);
}
.search {
  position: relative;
  flex: 1;
  max-width: 390px;
  margin-left: auto;
}
.search .icon {
  position: absolute;
  left: 12px;
  top: 12px;
  color: var(--muted);
}
.search input {
  padding-left: 40px;
  height: 42px;
  background: #101721;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.balance {
  color: var(--green);
  font-weight: 750;
}
.account {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}
.account .face {
  width: 30px;
  height: 30px;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 72px;
  bottom: 0;
  width: var(--sidebar);
  padding: 27px 16px;
  background: #141b25;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: #697d95;
  padding: 0 16px;
  margin: 9px 0;
}
.sidebar nav a {
  display: flex;
  gap: 14px;
  align-items: center;
  color: #aab7c8;
  padding: 11px 16px;
  margin: 4px 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
}
.sidebar nav a:hover {
  background: #202c3b;
  color: white;
}
.sidebar nav a.active {
  color: #9bceff;
  background: #24364c;
  box-shadow: inset 3px 0 var(--blue);
}
.sidebar hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 22px 10px;
}
.main {
  margin-left: var(--sidebar);
  padding: 104px 36px 28px;
  min-height: 100vh;
  max-width: 1900px;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.page-heading h1 {
  font-size: 29px;
  letter-spacing: -0.8px;
  margin: 2px 0 0;
  line-height: 1.3;
}
.muted {
  color: var(--muted);
}
.page-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.hero {
  position: relative;
  min-height: 345px;
  overflow: hidden;
  border: 1px solid #465d74;
  background:
    linear-gradient(90deg, #14283e 0%, #23496799 65%),
    url("/assets/forest.png") center 47% / cover;
  margin-bottom: 28px;
  padding: 38px 38px 33px;
}
.hero:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 7px;
  background: #4e92c4;
  box-shadow: 0 -4px 0 #305376;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 55%;
}
.hero .eyebrow {
  background: #95d0ff15;
  border: 1px solid #7ab8ed44;
  padding: 4px 10px;
  display: inline-block;
  color: #b5d9fa;
  font-size: 9px;
}
.hero h2 {
  font-size: clamp(30px, 3.3vw, 53px);
  line-height: 1.08;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin: 18px 0;
  font-weight: 950;
  text-shadow: 0 4px #0e253c;
}
.hero h2 em {
  font-style: normal;
  color: #92caff;
}
.hero p {
  color: #c0cfde;
  max-width: 340px;
  font-size: 13px;
  margin-bottom: 23px;
}
.hero-art {
  position: absolute;
  height: 116%;
  right: 1%;
  bottom: -20%;
  filter: drop-shadow(15px 17px 6px #07131d55);
  transform: rotate(-5deg);
}
.hero .button {
  font-size: 12px;
  padding: 10px 18px;
}
.hero-foot {
  font-size: 10px;
  margin-left: 17px;
  color: #c9d7e5;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0 16px;
}
.section-heading h2 {
  font-size: 18px;
  margin: 0;
  letter-spacing: -0.2px;
}
.section-heading a {
  font-size: 12px;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 7px;
}
.friends-strip {
  display: flex;
  gap: 26px;
  overflow: auto;
  padding: 5px 2px 12px;
}
.friend-bubble {
  min-width: 68px;
  text-align: center;
  font-size: 11px;
  color: #bac6d6;
}
.friend-bubble .face {
  width: 58px;
  height: 58px;
  margin: 0 auto 7px;
  border-radius: 50%;
}
.add-friend {
  width: 58px;
  height: 58px;
  border: 1px dashed #52647b;
  background: #1d2a3a;
  border-radius: 50%;
  margin: auto auto 7px;
  color: var(--blue);
  display: grid;
  place-items: center;
}
.friend-empty {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--muted);
  font-size: 13px;
}
.friend-empty p {
  margin: 0;
}
.friend-empty strong {
  color: #d5e2f0;
}
.face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #324657;
  position: relative;
  overflow: visible;
  width: 50px;
  height: 50px;
  border-radius: 8px;
}
.face-art {
  width: 66%;
  height: 66%;
  background: #c99773;
  border-top: 9px solid #503d31;
  position: relative;
  box-shadow: inset -7px -5px #ae7857;
}
.face-art:before {
  content: "";
  position: absolute;
  left: 18%;
  top: 33%;
  width: 14%;
  height: 18%;
  background: #d4e6ff;
  box-shadow: 16px 0 #d4e6ff;
}
.face-art:after {
  content: "";
  position: absolute;
  bottom: 13%;
  left: 35%;
  height: 15%;
  width: 33%;
  background: #674238;
}
.alex .face-art {
  border-color: #b66834;
}
.frost .face-art {
  border-color: #c5dfed;
  background: #88b8ce;
}
.crimson .face-art {
  border-color: #812d41;
  background: #cda38a;
}
.presence-dot {
  position: absolute;
  bottom: 1px;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: #697689;
}
.presence-dot.online {
  background: var(--green);
}
.presence-dot.idle {
  background: #e9ba66;
}
.filters {
  display: flex;
  gap: 9px;
  overflow: auto;
  margin: 0 0 20px;
}
.chip {
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 4px;
  font-size: 11px;
  background: transparent;
  color: #a1b2c8;
}
.chip.active {
  background: #bfdfff;
  color: #18304a;
  border-color: #bfdfff;
}
.server-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.server-card {
  min-width: 0;
  display: block;
  transition: transform 0.2s;
}
.server-card:hover {
  transform: translateY(-4px);
}
.server-art {
  position: relative;
  aspect-ratio: 1.8;
  overflow: hidden;
  border: 1px solid #536378;
  border-radius: 5px;
}
.server-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.server-card:hover .server-art img {
  transform: scale(1.05);
}
.server-art .tag {
  position: absolute;
  left: 12px;
  top: 11px;
  background: #0b1827d9;
  color: #d9e8f6;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.7px;
  font-weight: 700;
}
.server-art .art-title {
  position: absolute;
  left: 18px;
  right: 12px;
  bottom: 17px;
  font-size: 25px;
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: -0.7px;
  text-shadow: 0 3px #111b2c;
}
.server-card h3 {
  font-size: 14px;
  margin: 10px 0 2px;
}
.server-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8e9eb4;
  font-size: 11px;
}
.server-meta .edition {
  margin-left: auto;
  color: #90acd0;
}
.server-meta .icon {
  width: 13px;
  height: 13px;
}
.create-banner {
  margin: 33px 0 15px;
  padding: 26px 30px;
  background: linear-gradient(100deg, #202e40, #1b2533);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
.create-banner > .icon {
  width: 40px;
  height: 40px;
  color: #87b8ea;
}
.create-banner h3 {
  margin: 0;
  font-size: 19px;
}
.create-banner p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
}
.create-banner .button {
  margin-left: auto;
  white-space: nowrap;
  font-size: 12px;
}
.footer {
  margin-top: 42px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #667b96;
  font-size: 10px;
}
.footer p {
  margin: 0;
}
.footer a {
  color: #a7bbd2;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 25px;
  border-radius: 6px;
}
.narrow {
  max-width: 960px;
  margin: 0 auto;
}
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  margin: 25px auto;
  min-height: 600px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.auth-art {
  background:
    linear-gradient(#203e5980, #101e32c9),
    url("/assets/sky.png") center/cover;
  position: relative;
  overflow: hidden;
  padding: 35px;
}
.auth-art h2 {
  font-size: 38px;
  line-height: 1.1;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.auth-art img {
  height: 65%;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
.auth-form {
  padding: 34px;
}
.auth-form h1 {
  font-size: 27px;
  margin: 0 0 4px;
}
.auth-form .form-foot {
  text-align: center;
  font-size: 12px;
  margin-top: 20px;
  color: var(--muted);
}
.auth-form a {
  color: var(--blue);
}
.form {
  display: grid;
  gap: 17px;
}
.form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #c2ccda;
}
.form input,
.form select,
.form textarea,
input,
select,
textarea {
  display: block;
  width: 100%;
  background: #101822;
  border: 1px solid #354356;
  color: var(--text);
  border-radius: 4px;
  padding: 11px 12px;
  min-width: 0;
}
.form textarea {
  min-height: 100px;
  resize: vertical;
}
.form input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  outline: 2px solid #63b0ff22;
}
.form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form .check {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form .check input {
  width: auto;
}
.form-error {
  color: #ffadb2;
  font-size: 12px;
  min-height: 0;
}
.form-error:empty {
  display: none;
}
.captcha-slot {
  background: #131b25;
  border: 1px dashed #425065;
  padding: 13px;
  font-size: 11px;
  color: var(--muted);
}
.captcha-button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  background: #1b2633;
  border: 1px solid #33465c;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.captcha-button:hover {
  background: #202d3d;
  border-color: #4d6b8f;
}
.captcha-button.verified {
  background: #152a22;
  border-color: var(--green);
}
.captcha-check {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  border: 2px solid #6b7e94;
  border-radius: 4px;
}
.captcha-button.verified .captcha-check {
  background: var(--green);
  border-color: var(--green);
}
.captcha-button.verified .captcha-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #0d1610;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.captcha-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.captcha-brand {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.empty {
  padding: 55px 22px;
  text-align: center;
  border: 1px dashed #344459;
  background: #17212d55;
  border-radius: 5px;
}
.empty > .icon {
  width: 36px;
  height: 36px;
  color: #6f91b7;
}
.empty h3 {
  margin: 10px 0 4px;
}
.empty p {
  color: var(--muted);
  font-size: 13px;
  margin: 5px auto 20px;
  max-width: 400px;
}
.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin: 25px 0;
  gap: 6px;
}
.tabs a,
.tabs button {
  background: none;
  flex: 1;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 13px;
  text-align: center;
  color: var(--muted);
}
.tabs .active {
  border-bottom-color: var(--blue);
  color: var(--text);
}
.player-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.player-card {
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.player-card > a {
  display: flex;
  gap: 13px;
  align-items: center;
}
.player-card h3 {
  font-size: 14px;
  margin: 0;
  overflow-wrap: anywhere;
}
.player-card p {
  font-size: 11px;
  color: var(--muted);
  margin: 1px 0;
}
.player-card .actions {
  display: flex;
  margin-top: 15px;
  gap: 7px;
}
.player-card .actions button {
  flex: 1;
  font-size: 11px;
  padding: 7px;
}
.profile-cover {
  height: 290px;
  background: radial-gradient(
    ellipse at 50% 80%,
    #426280,
    #1b2b3b 55%,
    #17202d
  );
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.profile-cover:before {
  content: "";
  position: absolute;
  bottom: 22px;
  width: 220px;
  height: 40px;
  border: 1px solid #6f8ba633;
  transform: rotate(-12deg);
  background: #6f8ba61a;
}
.character {
  height: 255px;
  object-fit: contain;
  filter: drop-shadow(10px 10px 0 #09182744);
  position: relative;
}
.character.frost {
  filter: hue-rotate(155deg) saturate(0.65);
}
.character.crimson {
  filter: hue-rotate(155deg);
}
.profile-info {
  position: relative;
  padding-top: 22px;
}
.profile-info > .face {
  float: left;
  width: 88px;
  height: 88px;
  margin: -48px 18px 10px 0;
  border: 6px solid var(--bg);
}
.profile-info h1 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0;
}
.profile-info p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 13px;
}
.profile-actions {
  float: right;
  display: flex;
  gap: 8px;
}
.profile-counts {
  clear: both;
  display: flex;
  gap: 10px;
  padding-top: 13px;
}
.pill {
  display: inline-flex;
  background: #202d3d;
  padding: 4px 13px;
  border-radius: 20px;
  font-size: 11px;
  color: #c5d8ed;
}
.bio {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.text-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--blue);
  font-size: 12px;
  text-decoration: underline;
}
.item-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
}
.item-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 5px;
  overflow: hidden;
}
.item-card.selected {
  border-color: var(--blue);
}
.item-art {
  height: 175px;
  background: radial-gradient(#35495c, #202a37);
  display: grid;
  place-items: center;
}
.item-art .character {
  height: 155px;
}
.item-details {
  padding: 13px;
}
.item-details h3 {
  font-size: 13px;
  margin: 0 0 7px;
}
.item-details p {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 10px;
}
.avatar-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 25px;
}
.avatar-layout .profile-cover {
  height: 400px;
}
.avatar-layout .profile-cover .character {
  height: 320px;
}
.avatar-layout .item-grid {
  grid-template-columns: repeat(2, 1fr);
}
.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.package {
  position: relative;
  text-align: center;
  padding: 25px;
  background: radial-gradient(ellipse at 50% 15%, #274748, #182531 70%);
  border: 1px solid #365450;
}
.gem {
  color: var(--green);
  font-size: 70px;
  text-shadow:
    5px 5px #246345,
    -3px -3px #abeed3;
  line-height: 1.4;
}
.package h3 {
  font-size: 12px;
  color: #a9c2bf;
  margin: 5px 0;
}
.package strong {
  font-size: 32px;
  display: block;
}
.package button {
  width: 100%;
  margin-top: 20px;
}
.package .pill {
  position: absolute;
  right: 12px;
  top: 12px;
  color: var(--green);
  background: #24483b;
  font-size: 9px;
}
.notice {
  padding: 12px 17px;
  background: #263344;
  color: #a9c8eb;
  border-left: 3px solid var(--blue);
  font-size: 12px;
  margin-bottom: 22px;
}
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 25px;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-nav a {
  padding: 12px;
  color: var(--muted);
  border-radius: 4px;
}
.settings-nav a.active {
  background: var(--panel2);
  color: var(--blue);
}
.table-wrap {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
td,
th {
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
}
.positive {
  color: var(--green);
}
.toolbar {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0;
}
.toolbar input {
  max-width: 300px;
}
.toolbar select {
  width: auto;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 22px 0;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 20px;
}
.stat span {
  font-size: 11px;
  color: var(--muted);
}
.stat strong {
  display: block;
  font-size: 24px;
  margin-top: 5px;
}
.dropdown {
  position: fixed;
  right: 24px;
  top: 65px;
  min-width: 210px;
  max-width: 380px;
  max-height: 75vh;
  overflow: auto;
  z-index: 45;
  background: #202a38;
  border: 1px solid #3b4a5d;
  box-shadow: 0 15px 50px #0008;
  padding: 10px;
  border-radius: 6px;
}
.dropdown a,
.dropdown > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  text-align: left;
  border: 0;
  background: transparent;
  justify-content: start;
}
.dropdown a:hover,
.dropdown > button:hover {
  background: #304052;
}
.dropdown h3 {
  padding: 0 10px;
  font-size: 13px;
}
.notification {
  padding: 14px;
  background: #17212e;
  margin: 8px 0;
  font-size: 12px;
}
.notification p {
  margin: 0 0 12px;
}
.notification small {
  color: var(--muted);
}
.notification .actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
dialog {
  color: var(--text);
  background: var(--panel);
  border: 1px solid #46556a;
  border-radius: 7px;
  padding: 30px;
  max-width: 540px;
  width: calc(100% - 32px);
}
dialog::backdrop {
  background: #050c16c9;
  backdrop-filter: blur(4px);
}
dialog h2 {
  margin-top: 0;
}
dialog .close {
  float: right;
  padding: 5px;
  background: none;
  border: 0;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #314b67;
  border: 1px solid #6b91b7;
  color: white;
  padding: 13px 22px;
  border-radius: 5px;
  z-index: 100;
  max-width: 90%;
  box-shadow: 0 8px 30px #0005;
  font-size: 13px;
}
#toast:empty {
  display: none;
}
.error-page {
  text-align: center;
  padding: 70px 20px;
}
.error-page .code {
  font-size: 110px;
  line-height: 1;
  font-weight: 950;
  color: var(--blue);
  text-shadow: 5px 5px #31537d;
}
.error-page h1 {
  font-size: 28px;
}
.error-page p {
  color: var(--muted);
}
.server-detail-art {
  height: 340px;
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 25px;
  margin-top: 25px;
}
.detail-grid h2 {
  margin-top: 0;
}
.detail-grid .button {
  width: 100%;
  margin-top: 15px;
}
.loading {
  padding: 100px;
  text-align: center;
  color: var(--muted);
}
.skip {
  position: fixed;
  top: -100px;
  z-index: 100;
  background: var(--blue);
  color: #111;
  padding: 10px;
}
.skip:focus {
  top: 5px;
}
.mobile-toggle {
  display: none;
}
.subtle-link {
  font-size: 11px;
  color: var(--muted);
}
.full {
  grid-column: 1/-1;
}
.spaced {
  margin-top: 25px;
}
.status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status:before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
}
.status.offline:before {
  background: #718098;
}
.presence-select {
  max-width: 165px;
  margin-top: 15px;
  font-size: 12px;
}
.count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 7px;
}
@media (min-width: 1550px) {
  .server-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hero {
    min-height: 380px;
  }
  .hero-art {
    right: 8%;
  }
  .hero h2 {
    font-size: 55px;
  }
}
@media (max-width: 1150px) {
  :root {
    --sidebar: 185px;
  }
  .topbar {
    gap: 20px;
    padding: 0 18px;
  }
  .brand {
    width: 148px;
  }
  .top-links {
    gap: 15px;
    font-size: 12px;
  }
  .search {
    max-width: 260px;
  }
  .main {
    padding: 98px 24px 25px;
  }
  .account > span {
    display: none;
  }
  .hero {
    padding: 28px;
    min-height: 325px;
  }
  .server-grid {
    gap: 16px;
  }
  .server-art .art-title {
    font-size: 21px;
  }
  .player-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .item-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .top-links {
    display: none;
  }
  .server-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-art {
    right: -15%;
    height: 100%;
    bottom: -13%;
  }
  .hero-content {
    max-width: 65%;
  }
  .hero-foot {
    display: none;
  }
  .avatar-layout {
    grid-template-columns: 1fr;
  }
  .avatar-layout .profile-cover {
    height: 300px;
  }
  .avatar-layout .profile-cover .character {
    height: 260px;
  }
  .auth-layout {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .auth-art {
    display: none;
  }
  .packages {
    grid-template-columns: repeat(2, 1fr);
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    flex-direction: row;
  }
  .profile-actions {
    float: none;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 650px) {
  :root {
    --sidebar: 0px;
  }
  .topbar {
    height: 62px;
    padding: 0 12px;
    gap: 9px;
  }
  .brand {
    width: auto;
    font-size: 21px;
    letter-spacing: 2px;
  }
  .brand img {
    width: 26px;
  }
  .brand span {
    display: none;
  }
  .mobile-toggle {
    display: inline-flex;
  }
  .search {
    display: none;
  }
  .top-actions {
    margin-left: auto;
  }
  .top-actions .account {
    display: none;
  }
  .top-actions .button {
    padding: 6px 9px;
    font-size: 11px;
  }
  .sidebar {
    width: 220px;
    top: 62px;
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 25px 0 70px #000b;
  }
  .main {
    padding: 85px 18px 25px;
  }
  .page-heading h1 {
    font-size: 24px;
  }
  .page-heading .subtle-link {
    display: none;
  }
  .hero {
    padding: 25px;
    min-height: 360px;
  }
  .hero-content {
    max-width: 88%;
  }
  .hero h2 {
    font-size: 35px;
    max-width: 300px;
  }
  .hero p {
    max-width: 220px;
    font-size: 12px;
  }
  .hero-art {
    opacity: 0.65;
    right: -32%;
    height: 85%;
    bottom: -9%;
  }
  .hero .button {
    font-size: 11px;
  }
  .hero-content {
    z-index: 2;
  }
  .server-grid {
    gap: 18px 12px;
  }
  .server-art {
    aspect-ratio: 1.45;
  }
  .server-art .art-title {
    font-size: 18px;
    left: 10px;
    bottom: 12px;
  }
  .server-art .tag {
    font-size: 8px;
    left: 8px;
    top: 8px;
  }
  .server-card h3 {
    font-size: 12px;
  }
  .server-meta {
    font-size: 10px;
    gap: 7px;
  }
  .server-meta .edition {
    display: none;
  }
  .create-banner {
    padding: 20px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .create-banner > .icon {
    display: none;
  }
  .create-banner .button {
    margin-left: 0;
  }
  .footer {
    flex-direction: column;
    gap: 8px;
  }
  .player-grid {
    grid-template-columns: 1fr;
  }
  .item-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .packages {
    gap: 12px;
  }
  .package {
    padding: 20px 12px;
  }
  .package strong {
    font-size: 26px;
  }
  .package .pill {
    font-size: 8px;
  }
  .stats {
    gap: 8px;
  }
  .stat {
    padding: 13px;
  }
  .stat strong {
    font-size: 20px;
  }
  .auth-form {
    padding: 24px;
  }
  .profile-counts {
    gap: 6px;
  }
  .profile-counts .pill {
    font-size: 10px;
    padding: 4px 9px;
  }
  .profile-actions button,
  .profile-actions .button {
    font-size: 11px;
    padding: 8px;
  }
  .dropdown {
    right: 10px;
    top: 61px;
    max-width: calc(100% - 20px);
  }
  .form .row {
    grid-template-columns: 1fr;
  }
  .profile-cover {
    height: 250px;
  }
  .profile-cover .character {
    height: 220px;
  }
  .tabs a {
    padding: 11px 6px;
    font-size: 12px;
  }
  .toolbar {
    gap: 10px;
  }
  .toolbar input {
    max-width: none;
  }
  .server-detail-art {
    height: 230px;
  }
  .settings-nav a {
    padding: 8px;
    font-size: 12px;
  }
}
.character.frost,
.character.crimson {
  filter: drop-shadow(10px 10px 0 #09182744);
}
.gem-pile {
  height: 120px;
  position: relative;
  margin: 10px auto 0;
  width: 150px;
  filter: drop-shadow(0 10px 10px #051b1870);
}
.gem-pile img {
  height: 100px;
  position: absolute;
  left: 38px;
  top: 4px;
  transform: rotate(7deg);
}
.gem-pile img:nth-child(2) {
  height: 72px;
  left: 6px;
  top: 40px;
  transform: rotate(-22deg);
}
.gem-pile img:nth-child(3) {
  height: 65px;
  left: 89px;
  top: 49px;
  transform: rotate(28deg);
}
.pile-0 img:nth-child(n + 2) {
  display: none;
}
.pile-1 img:nth-child(3) {
  display: none;
}
.pile-3,
.pile-4,
.pile-5 {
  transform: scale(1.1);
}
.brand span {
  font-size: 8px;
  letter-spacing: 1.25px;
  white-space: nowrap;
}
.main{max-width:none}
#page,.footer{max-width:1480px;margin-left:auto;margin-right:auto}
.guest .main{margin-left:0}
.topbar{display:grid;grid-template-columns:178px 340px minmax(220px,390px) minmax(170px,1fr);gap:18px}
.top-links{justify-content:space-around;gap:14px}
.search{width:100%;max-width:none;margin:0}
.top-actions{justify-content:flex-end}
.rank-badge{width:17px;height:17px;object-fit:contain;vertical-align:middle;margin-left:3px}
.chart-section{margin:28px 0 44px}
.chart-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(165px,195px);gap:16px;overflow-x:auto;padding-bottom:16px;scroll-snap-type:x mandatory}
.chart-card{scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;gap:5px}
.chart-card strong{font-size:14px;line-height:1.3}
.chart-card small{font-size:11px;color:var(--muted)}
.chart-art{height:170px;overflow:hidden;border-radius:7px;position:relative;background:#233145;border:1px solid var(--line)}
.chart-art img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.chart-card:hover img{transform:scale(1.06)}
.chart-art .tag{position:absolute;left:8px;top:8px;background:#102037db;font-size:10px;padding:3px 7px;border-radius:3px}
.catalog-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px}
.catalog-filters{align-self:start;position:sticky;top:94px;padding:17px;background:var(--panel);border:1px solid var(--line);border-radius:7px}
.catalog-filters label{display:block;font-size:12px;font-weight:700;margin-bottom:16px}
.catalog-filters input,.catalog-filters select{width:100%;margin-top:6px}
.catalog-filters h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.catalog-category{width:100%;display:flex;justify-content:flex-start;background:transparent;border:0;padding:9px 11px;border-radius:4px}
.catalog-category.active{background:#2b4767;color:#a7d2ff}
.catalog-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.catalog-card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.catalog-art{height:185px;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#354b63,#17212f 70%)}
.catalog-art img{max-width:85%;max-height:86%;object-fit:contain}
.catalog-art .character{height:95%;max-height:none}
.owned-mark{position:absolute;top:10px;left:10px;background:var(--blue);color:#111b2a;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.catalog-info{padding:12px}
.catalog-info h3{font-size:13px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-info p{font-weight:800;color:var(--green);margin:6px 0 8px}
.catalog-info button{width:100%}
.item-art>img:not(.character){max-width:85%;max-height:85%;object-fit:contain}
.avatar-editor{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px}
.avatar-preview{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px;align-self:start;position:sticky;top:94px}
.avatar-preview .profile-cover{height:330px}
.avatar-preview .profile-cover .character{height:290px}
.avatar-preview .profile-cover .equipped-asset{position:absolute;z-index:2;width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 8px 10px #0009);pointer-events:none}
.avatar-preview .profile-cover .slot-Head{top:2px;left:51%;transform:translateX(-50%)}
.avatar-preview .profile-cover .slot-Back{top:112px;right:4px;z-index:0}
.avatar-preview .profile-cover .slot-Shoulder{top:108px;left:4px;width:65px;height:65px}
.avatar-preview .profile-cover .slot-Hand{bottom:12px;right:4px;width:105px;height:105px}
.avatar-preview h3{margin:8px 0 0}
.equipped-slots>div{border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:8px 0;font-size:12px}
.equipped-slots strong{min-width:62px}
.equipped-slots span{flex:1;color:var(--muted)}
.equipped-slots button{padding:4px}
.slot-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:17px}
#avatar-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.creator-hero{min-height:390px;position:relative;overflow:hidden;border:1px solid #355271;border-radius:7px;display:flex;align-items:center;background:radial-gradient(circle at 80% 50%,#28658a,#111b2b 65%);margin-bottom:32px;padding:50px}
.creator-hero:before{content:"";position:absolute;inset:0;background:url('/assets/forest.png') center/cover;opacity:.16}
.creator-copy{position:relative;z-index:2;max-width:580px}
.creator-copy h1{font-size:clamp(38px,5vw,70px);line-height:1.05;margin:14px 0}
.creator-copy p{font-size:18px;color:#c2d6e5}
.creator-hero>img{position:absolute;right:10%;bottom:-30px;height:95%;object-fit:contain}
.creator-hero>.creator-mob{right:2%;height:40%;bottom:0}
.premium-section{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px;margin:24px 0;background:linear-gradient(120deg,#2b364a,#183650);border:1px solid #546c81;border-radius:7px}
.premium-section h2{margin:5px 0}.premium-section .rank-badge{width:26px;height:26px}.premium-section p{margin:0;color:var(--muted)}
.session-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:16px 0;gap:15px}
.session-row p{margin:3px 0 0}
.auth-layout{max-width:470px;display:block;margin:34px auto;border-radius:8px;overflow:hidden;box-shadow:0 28px 90px #0007}
body:has(.auth-layout) .main{isolation:isolate}
body:has(.auth-layout) .main::before{content:"";position:fixed;inset:72px 0 0;z-index:-1;pointer-events:none;background-image:linear-gradient(#0b121be0,#0b121be8),url('/assets/theme/Pig.avif'),url('/assets/theme/Zombie.avif'),url('/assets/theme/Sheep.avif'),url('/assets/theme/Pillager.avif');background-size:cover,260px,270px,290px,280px;background-position:center,8% 20%,91% 20%,16% 83%,87% 80%;background-repeat:no-repeat}
.auth-art{min-height:150px;padding:24px 30px;background:linear-gradient(90deg,#112035e0,#142434a0),url('/assets/builders.png') center 34%/cover}
.auth-art h2{font-size:24px;margin:7px 0}
.auth-art p{margin:0;position:relative;z-index:2}
.auth-art img{height:140px;right:0;left:auto;transform:none;bottom:-25px}
.auth-form{padding:27px 32px 32px}
.auth-form h1{text-align:center}
.auth-form>.muted{text-align:center;margin:4px 0 22px}
@media(max-width:1350px){.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.topbar{grid-template-columns:160px 320px minmax(150px,300px) minmax(150px,1fr)}}
@media(max-width:1050px){.topbar{display:flex}.search{flex:1}.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.catalog-layout{grid-template-columns:1fr}.catalog-filters{position:static}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-editor{grid-template-columns:1fr}.avatar-preview{position:static}.creator-hero{padding:24px;min-height:360px}.creator-hero>img{opacity:.35;right:-30px}.creator-copy{z-index:2}.guest .main{padding-left:18px;padding-right:18px}}
@media(max-width:480px){.catalog-grid{gap:9px}.catalog-art{height:135px}.catalog-info{padding:8px}.top-links{display:none}.auth-form{padding:23px}}
:root{--sidebar:230px}
.topbar{height:46px;padding:0 16px;grid-template-columns:185px minmax(280px,560px) minmax(230px,1fr) auto;gap:12px}
.brand{font-size:22px;letter-spacing:1px;width:auto;gap:6px;line-height:1}
.brand img{width:24px;height:28px}
.top-links{font-size:12px;gap:8px;justify-content:space-around}
.search{max-width:510px;z-index:40}
.search input{height:30px;padding:4px 30px;background:#20252e;border:1px solid #353b46;border-radius:6px}
.search .icon{top:6px;left:9px}
.top-actions{gap:3px;white-space:nowrap}
.top-actions .icon-button{padding:5px}
.top-actions .face{width:25px;height:25px}
.top-actions .account{font-size:11px}
.sidebar{top:46px;background:#12141a;padding:12px 15px;width:var(--sidebar)}
.sidebar-account{display:flex;align-items:center;gap:12px;padding:10px 12px;font-weight:700}
.sidebar-account .face{width:28px;height:28px}
.sidebar nav a{font-size:14px;padding:9px 12px;color:#e5e6ea;border-radius:7px}
.sidebar nav a.active{background:#26282e;box-shadow:none;color:#fff}
.main{padding:68px 20px 28px}
#page,.footer{max-width:none}
.guest .main{margin-left:0}
.discover-title{font-size:28px;line-height:1.1;margin:0 0 15px}
.chart-section{margin:0 0 28px}
.chart-section .section-heading{margin:0 0 10px}
.chart-section .section-heading h2{font-size:16px;margin:0}
.chart-section .section-heading .icon{font-size:12px}
.chart-strip{grid-auto-columns:120px;gap:12px;padding-bottom:8px}
.chart-card{gap:4px}
.chart-art{height:120px;border-radius:6px;background:#282b32}
.chart-card strong{font-size:12px;line-height:1.2;min-height:30px}
.chart-card small{font-size:10px;line-height:1.25}
.home-section{margin:0 0 32px}
.home-section .section-heading h2,.profile-section .section-heading h2{font-size:20px;margin:0}
.friends-strip{overflow-x:auto;flex-wrap:nowrap;padding-bottom:7px}
.friend-bubble{min-width:86px;width:86px;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-bubble .face,.friend-bubble .add-friend{width:76px;height:76px;border-radius:50%}
.friend-bubble>span:last-child{max-width:86px;overflow:hidden;text-overflow:ellipsis}
.recommended-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 15px}
.recommend-card{min-width:0;display:flex;flex-direction:column;gap:4px}
.recommend-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#262a31;border-radius:7px}
.recommend-card strong{font-size:13px;line-height:1.25}
.recommend-card small{font-size:11px;color:var(--muted)}
.face{overflow:visible;background:#292d37;border-radius:50%;width:50px;height:50px;flex-shrink:0}
.face-art{width:100%;height:100%;border:0;border-radius:50%;object-fit:cover;image-rendering:pixelated;box-shadow:none;background:none}
.face-art:before,.face-art:after{display:none}
.presence-dot{width:16px;height:16px;bottom:-1px;right:-1px;border:3px solid var(--bg);box-shadow:0 0 0 1px #fff3}
.presence-dot.online{background:#21c576}
.presence-dot.idle{background:#f2bc52}
.presence-dot.offline{background:#737984}
.status-label{text-transform:capitalize;display:inline-flex;align-items:center;gap:5px}
.status-label:before{content:'';width:8px;height:8px;border-radius:50%;background:#737984}
.status-label.online:before{background:#21c576}.status-label.idle:before{background:#f2bc52}
.search-suggestions{position:absolute;top:33px;left:0;right:0;background:#191b21;border:1px solid #333740;border-radius:5px;box-shadow:0 15px 32px #0009;overflow:hidden}
.search-suggestions[hidden]{display:none}
.search-suggestions button{width:100%;justify-content:flex-start;border:0;border-radius:0;background:transparent;padding:13px;font-size:13px;font-weight:400}
.search-suggestions button:hover{background:#2a2c33}
.search-suggestions strong{font-weight:650}.search-suggestions span{color:#a0a2ab}
.search-page{max-width:850px;margin:0 auto}.search-page h1{font-size:17px;margin:0 0 12px}
.search-people-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.search-people-grid .player-card{display:flex;flex-direction:column;justify-content:space-between;min-height:148px;padding:12px}
.search-people-grid .player-card>a{min-width:0}.search-people-grid .player-card .face{width:72px;height:72px}
.search-people-grid .player-card button{width:100%;padding:6px}
.profile-page{max-width:1180px;margin:0 auto}.profile-page .profile-cover{height:300px}.profile-page .profile-info{margin-bottom:24px}
.profile-page .profile-cover{background:url('/assets/banner.png') center/cover no-repeat}
.profile-page .profile-cover:before{display:none}
.profile-section{margin:25px 0}.profile-section .chart-strip{grid-auto-columns:150px}.profile-section .chart-art{height:150px}
.profile-menu-wrap{position:relative}.profile-menu{position:absolute;z-index:15;right:0;top:36px;min-width:170px;background:#20232b;border:1px solid #343843;border-radius:10px;padding:5px;box-shadow:0 16px 40px #0009}
.profile-menu[hidden]{display:none}.profile-menu>a,.profile-menu>button{width:100%;display:block;text-align:left;background:transparent;border:0;border-radius:5px;padding:9px 12px;font-size:13px}.profile-menu>a:hover,.profile-menu>button:hover{background:#343842}
.skin-canvas{display:block;width:100%;height:100%;max-width:300px;margin:auto;background:transparent}
.skin-item-head{image-rendering:pixelated;border-radius:6px}
.item-art .skin-item-head,.catalog-art .skin-item-head{width:96px;height:96px;max-width:none;max-height:none;object-fit:cover}
.server-vote{display:flex;align-items:center;gap:8px;margin-top:16px}.server-vote button{padding:5px 10px}.server-vote button.active{border-color:var(--blue);background:#24486a}
.skin-upload{max-width:760px;margin:24px auto;padding:22px}.skin-upload .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.skin-upload .form>button,.skin-upload .form>.form-error{grid-column:1/-1}
.check-row{display:flex!important;align-items:center;gap:8px}.check-row input{width:auto!important;margin:0!important}
.catalog-extra{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.catalog-extra .price-fields{display:flex;gap:6px}.catalog-extra .price-fields label{min-width:0}.catalog-extra>button{width:100%;margin:4px 0}
@media(max-width:1200px){.recommended-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.topbar{display:flex}.top-links{flex:1}.search{flex:1;min-width:160px}}
@media(max-width:900px){.recommended-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.search-people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.topbar{height:52px;padding:0 9px;gap:8px}.brand{font-size:17px}.brand img{width:20px}.top-links{display:none}.search{min-width:0}.top-actions .account span,.balance{display:none}.sidebar{top:52px}.main{padding-top:72px}.recommended-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-people-grid{grid-template-columns:1fr}.skin-upload .form{grid-template-columns:1fr}}
.topbar .presence-dot,.sidebar .presence-dot{display:none}
.main{display:flex;flex-direction:column;min-height:100vh}
#page{width:100%;flex:1 0 auto}
.footer{margin-top:42px;flex-shrink:0}
.search>.icon{position:absolute;left:9px;top:6px}
.search-suggestions .icon{position:static;left:auto;top:auto;color:#aeb8c6;width:18px;height:18px}
.search-suggestions button{display:flex;align-items:center;gap:8px;min-width:0}
.search-suggestions strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-suggestions button span{flex-shrink:0}
.friend-bubble{display:flex;flex-direction:column;align-items:center;gap:0;white-space:normal;overflow:visible;text-overflow:clip}
.friend-bubble .face,.friend-bubble .add-friend{display:flex;flex-shrink:0;margin:0 auto 7px}
.friend-bubble>span:last-child{display:block;width:100%;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.friend-bubble>.add-friend:last-child{display:grid;place-items:center;width:76px;max-width:76px;overflow:visible}
.catalog-layout{grid-template-columns:280px minmax(0,1fr);gap:24px}
.catalog-filters{min-width:0}
.catalog-card{display:flex;flex-direction:column;min-height:310px;isolation:isolate}
.catalog-art{height:180px;flex:0 0 180px;overflow:hidden;pointer-events:none}
.catalog-art>img{display:block;position:static;max-width:calc(100% - 16px);max-height:160px;object-fit:contain}
.catalog-art .character{height:160px;max-height:160px}
.catalog-info{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;background:var(--panel)}
.catalog-info h3{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.25;min-height:2.5em}
.catalog-info>.muted{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-info p{margin:auto 0 6px}
.catalog-info button{position:relative;z-index:2;min-height:34px;cursor:pointer}
.dropdown:has(.notification){width:320px;max-width:calc(100vw - 24px);padding:12px}
.dropdown .notification{min-width:0;overflow:hidden}
.dropdown .notification .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dropdown .notification .actions button,.dropdown .notification .actions a{width:100%;min-width:0;min-height:34px;margin:0;padding:7px 9px;justify-content:center;text-align:center}
.dropdown .notification .actions a.primary{background:var(--blue);border:1px solid #85c1ff;border-bottom:3px solid #3776ba;color:#101e31}
.dropdown .notification .actions a.primary:hover{background:#89c4ff}
@media(max-width:900px){.catalog-layout{grid-template-columns:245px minmax(0,1fr)}}
@media(max-width:760px){.catalog-layout{grid-template-columns:1fr}.catalog-filters{position:static}}
.server-detail-page{width:min(100%,1020px);margin:0 auto;color:#f5f7fb}
.server-detail-hero{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(260px,.9fr);gap:20px;align-items:stretch}
.server-gallery{position:relative;aspect-ratio:16/9;background:#222a34;overflow:hidden;border-radius:5px}
.server-gallery>img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;padding:0;border:0;border-radius:50%;background:#11141cde;color:white;font-size:36px;font-weight:300;line-height:1;opacity:0;transition:opacity .16s ease,background .16s ease;z-index:2}
.gallery-arrow:hover{background:#222a38}
.gallery-arrow:active{transform:translateY(calc(-50% + 1px))}
.gallery-arrow.previous{left:16px}.gallery-arrow.next{right:16px}
.server-gallery:hover .gallery-arrow,.server-gallery:focus-within .gallery-arrow{opacity:1}
.gallery-count{position:absolute;bottom:10px;right:12px;padding:4px 7px;border-radius:4px;background:#1119;font-size:11px;color:#fff;opacity:0;transition:opacity .16s ease}
.server-gallery:hover .gallery-count,.server-gallery:focus-within .gallery-count{opacity:1}
.server-detail-summary{display:flex;flex-direction:column;min-width:0;padding:4px 0}
.server-detail-summary h1{font-size:28px;line-height:1.15;margin:0 0 10px;overflow-wrap:anywhere}
.server-byline{font-size:12px;margin:0 0 24px;color:#b2c0d4}
.server-byline a{color:#eaf1ff;font-weight:700}
.server-play{width:100%;min-height:48px;margin-top:auto;background:#3768ee;border-color:#3768ee;color:white;font-size:16px;font-weight:800}
.server-play:hover{background:#4c79f1}
.server-quick-actions{display:flex;justify-content:space-around;gap:8px;margin-top:8px}
.server-quick-actions button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:62px;padding:4px 6px;border:0;background:transparent;color:#d7e2f2;font-size:22px;line-height:1.1}
.server-quick-actions button:hover,.server-quick-actions button.active{color:#67b5ff}
.server-quick-actions small{font-size:10px;color:#b4c1d3}
.server-description{margin-top:32px}
.server-description h2{font-size:18px;margin:0 0 12px}
.server-description>p{font-size:14px;line-height:1.6;margin:0 0 18px;white-space:normal}
.server-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.server-stats>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;min-width:0}
.server-stats small{color:#91a4be;font-size:11px}
.server-stats strong{font-size:12px;overflow-wrap:anywhere}
.thumbnail-choices{border:1px solid var(--line);padding:12px;border-radius:6px}
.thumbnail-choices legend{padding:0 5px;font-weight:700}
.thumbnail-choices p{font-size:12px;margin:0 0 10px}
.thumbnail-choices>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.thumbnail-choices label{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--line);border-radius:5px;font-size:11px;text-transform:capitalize;cursor:pointer}
.thumbnail-choices input{width:auto!important;margin:0!important}
.thumbnail-choices img{width:46px;height:32px;object-fit:cover;border-radius:3px}
@media(max-width:760px){.server-detail-hero{grid-template-columns:1fr}.server-detail-summary{min-height:190px}.server-play{margin-top:15px}.server-stats{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}}
@media(hover:none){.gallery-arrow,.gallery-count{opacity:1}}
.main>.footer{box-sizing:border-box;width:calc(100% + 40px);max-width:none;margin-left:-20px;margin-right:-20px;padding:20px 20px 0}
.profile-page .profile-info{padding:12px 0 0 124px;min-height:103px}
.profile-page .profile-info>.face{position:absolute;left:0;top:-25px;float:none;margin:0;width:106px;height:106px;box-sizing:border-box;z-index:2}
.profile-page .profile-info h1{padding-top:0}
.profile-page .profile-info>p:first-of-type{margin-top:4px}
.profile-info h1 .rank-badge{vertical-align:middle;transform:translateY(-5px)}
.avatar-editor{grid-template-columns:minmax(320px,380px) minmax(0,1fr)}
@media(max-width:760px){.avatar-editor{grid-template-columns:1fr}.main>.footer{width:calc(100% + 40px)}}
.catalog-info a:hover{color:var(--blue);text-decoration:underline}
.catalog-tile-link{display:block}
.catalog-art .skin-canvas,.item-art .skin-canvas{width:100%;height:100%;max-width:none;max-height:none}
.skin-upload[hidden]{display:none}
.catalog-detail{border:1px solid var(--line);border-radius:9px;padding:34px;min-height:570px}
.catalog-detail-main{display:grid;grid-template-columns:minmax(300px,440px) minmax(280px,430px);justify-content:center;gap:30px}
.catalog-detail-preview{position:relative;display:grid;place-items:center;min-height:420px;background:#10141c;border:1px solid var(--line);border-radius:7px}
.catalog-detail-preview>img{max-width:80%;max-height:320px;object-fit:contain}
.catalog-detail-preview>.skin-canvas{width:100%;height:400px;max-width:none}
.catalog-detail-preview button{position:absolute;right:15px;bottom:15px}
.catalog-detail-info h1{font-size:24px;margin:8px 0 2px}
.catalog-detail-info>.muted{font-size:12px;margin:0 0 24px}
.catalog-detail-info>.muted a{text-decoration:underline}
.catalog-detail-description{font-size:14px;color:#a9b9ce;line-height:1.5;min-height:52px}
.catalog-detail-price{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;padding:15px 0;color:#a9b9ce}
.catalog-detail-price strong{color:#f5f7fb}
.catalog-detail-info>button{width:100%;background:var(--blue);border-color:#85c1ff;color:#101e31}
.catalog-detail-info>button:hover{background:#89c4ff}
.catalog-detail-info>button:disabled{opacity:.55}
.catalog-detail-meta{max-width:900px;margin:20px auto;color:#9eb0c7;font-size:12px}
.catalog-detail-meta strong{color:#f5f7fb;margin-left:8px}
.try-on-scene{position:relative;width:min(340px,100%);height:340px;display:grid;place-items:center;margin:auto;background:#26384b}
.try-on-scene>img:first-child{height:300px;max-width:90%;object-fit:contain}
.try-on-accessory{position:absolute;width:100px;max-height:110px;object-fit:contain;top:28px}
.try-on-accessory.slot-Back,.try-on-accessory.slot-Hand{top:150px;right:22px}
.try-on-accessory.slot-Shoulder{top:110px;left:22px}
@media(max-width:800px){.catalog-detail-main{grid-template-columns:1fr}.catalog-detail-preview{min-height:320px}.catalog-detail-preview>.skin-canvas{height:310px}.catalog-detail{padding:15px}}

.server-detail-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.server-detail-menu-wrap{position:relative;flex-shrink:0}
.server-detail-menu-wrap>button{border:0;background:transparent;font-size:20px;padding:0 5px}
.server-detail-menu{position:absolute;right:0;top:28px;z-index:8;min-width:170px;padding:5px;background:#202630;border:1px solid var(--line);border-radius:7px;box-shadow:0 12px 28px #0009}
.server-detail-menu[hidden]{display:none}
.server-detail-menu>a,.server-detail-menu>button{display:block;width:100%;padding:9px 12px;text-align:left;font-size:13px;border:0;background:transparent;color:var(--text)}
.server-detail-menu>a:hover,.server-detail-menu>button:hover{background:#303a49}
.server-socials{margin:25px 0}
.server-socials>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.server-socials a{display:flex;align-items:center;gap:12px;min-height:72px;padding:16px;border:1px solid #394456;border-radius:7px;font-weight:700}
.server-socials a:hover{background:#232d3b}
.server-socials .fa-brands{font-size:30px}
.server-socials .fa-youtube{color:#f33}.server-socials .fa-tiktok{color:#fff}.server-socials .fa-discord{color:#7289ff}
.server-socials a>.icon{margin-left:auto}
.server-social-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.server-social-fields h3{grid-column:1/-1;margin:5px 0 0}
.server-social-fields input{width:100%}
.catalog-preview-art{width:100%;height:100%;min-height:370px;display:grid;place-items:center;position:relative;overflow:hidden}
.catalog-preview-art>img{max-width:80%;max-height:310px;object-fit:contain}
.catalog-preview-art>.skin-canvas{height:390px;max-width:none}
.catalog-preview-controls{position:absolute;left:15px;right:15px;bottom:15px;display:flex;justify-content:space-between;gap:10px}
.catalog-detail-preview .catalog-preview-controls button{position:static;min-width:66px}
.avatar-preview .preview-mode-toggle{position:absolute;top:15px;right:20px;z-index:5}
.try-on-inline{position:relative;display:grid;place-items:center;width:100%;height:370px}
.try-on-inline>.character{max-height:320px;max-width:80%;object-fit:contain}
.try-on-inline>.try-on-accessory{top:45px;z-index:2}
.try-on-inline>.slot-Back,.try-on-inline>.slot-Hand{top:160px}
.try-on-inline>.slot-Shoulder{top:120px}
.pseudo-3d{animation:preview-turn 5s linear infinite;transform-style:preserve-3d;backface-visibility:visible}
@keyframes preview-turn{from{transform:perspective(750px) rotateY(0deg)}to{transform:perspective(750px) rotateY(360deg)}}
.avatar-page{max-width:none}
.avatar-editor{grid-template-columns:minmax(340px,385px) minmax(0,1fr);align-items:start;gap:42px}
.avatar-preview{position:sticky;top:64px;padding:12px;background:#182230}
.avatar-preview .profile-cover{height:360px;background:#10141c;border:1px solid #2a3545;border-radius:4px}
.avatar-preview .profile-cover:before{display:none}
.avatar-preview .profile-cover .character{height:335px;max-width:100%}
.avatar-preview .preview-mode-toggle{top:318px;left:25px;right:auto}
.avatar-identity{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}
.avatar-identity h3{margin:0 0 4px}.avatar-identity p{margin:0}
.avatar-identity .primary{min-width:74px}
.avatar-section{margin-bottom:27px}.avatar-section h2{font-size:21px;margin:0 0 12px}
#avatar-items{display:block}
.avatar-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.avatar-tile{position:relative;min-width:0}.avatar-tile .item-art{height:165px}
.avatar-tile .item-details{padding:9px}.avatar-tile .item-details h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-tile .item-details button{width:100%}
.avatar-delete{position:absolute;right:7px;top:7px;width:27px;height:27px;display:grid;place-items:center;padding:0;background:#1b2635e8;border:1px solid #52677d;border-radius:5px;z-index:2}
.avatar-upload-tile{min-height:253px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#1b2938;border:1px dashed #65809c;border-radius:5px;text-align:center;color:var(--text)}
.avatar-upload-tile>span{font-size:30px;color:var(--blue)}.avatar-upload-tile small{color:var(--muted)}
.sidebar-admin{border-top:1px solid var(--line);margin:18px 10px 0;padding:13px 0}
.sidebar-admin>span{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;padding:0 12px 8px}
.sidebar-admin a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;font-size:13px}.sidebar-admin a:hover,.sidebar-admin a.active{background:#263448}
.marketplace-page{max-width:1200px}.marketplace-editor{display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);gap:22px}
.marketplace-editor>.panel{padding:20px}.marketplace-editor .form label{display:block}.marketplace-editor input,.marketplace-editor select,.marketplace-editor textarea{width:100%}
.marketplace-editor .check-row input{width:auto}.marketplace-preview{background:#10141c;border:1px solid var(--line);padding:18px;border-radius:6px;align-self:start;position:sticky;top:62px}
.marketplace-preview .skin-canvas{height:390px;max-width:100%}.marketplace-preview p{font-size:12px}
.marketplace-preview-scene{position:relative}
.marketplace-preview-scene .skin-canvas{display:block;width:100%}
.marketplace-mode-toggle{position:absolute;left:12px;bottom:12px;z-index:1}
.marketplace-page button.primary{background:var(--blue);border-color:#85c1ff;color:#101e31}
.market-transform{display:flex;gap:9px;border:1px solid var(--line);margin:9px 0;padding:8px}.market-transform legend{padding:0 5px}.market-transform label{flex:1;font-size:12px}
.marketplace-list{display:grid;gap:8px}.marketplace-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);padding:10px;border-radius:5px}
.marketplace-row>div:first-child{width:82px;height:92px;flex:none;overflow:hidden;background:#10141c}.marketplace-row .skin-canvas,.marketplace-row img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.marketplace-row section{flex:1;display:flex;flex-direction:column;gap:4px}.marketplace-row span{color:var(--muted);font-size:12px}
.marketplace-row-actions{display:flex;gap:8px;align-items:center}
.accessory-canvas{display:block;width:100%;height:100%;min-width:0;min-height:0;touch-action:none}
@media(max-width:850px){.avatar-editor,.marketplace-editor{grid-template-columns:1fr}.avatar-preview,.marketplace-preview{position:static}.avatar-preview .profile-cover{height:340px}}
@media(max-width:700px){.server-socials>div,.server-social-fields{grid-template-columns:1fr}.catalog-preview-art{min-height:300px}}
.inventory-page{width:100%;max-width:1800px;margin:0 auto}
.inventory-page h1{margin:0 0 5px}
.inventory-page>.section-heading{align-items:center;margin-bottom:22px}
.inventory-page>.section-heading p{margin:0}
.inventory-toolbar{justify-content:flex-start;gap:12px;margin-bottom:26px}
.inventory-toolbar input{width:min(450px,100%);flex:0 1 450px}
.inventory-toolbar select{width:200px;flex:0 1 200px}
.inventory-section{margin-bottom:30px}
.inventory-section .section-heading{margin-bottom:14px;align-items:center}
.inventory-section h2{font-size:18px;margin:0}
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,140px));gap:14px}
.inventory-card{display:block;min-width:0;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--text);text-decoration:none}
.inventory-card:hover,.inventory-card:focus-visible{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:2px;text-decoration:none}
.inventory-art{height:165px;position:relative;background:#0f141c;overflow:hidden;display:grid;place-items:center;pointer-events:none}
.inventory-art>img{width:100%;height:100%;object-fit:contain}
.inventory-art .skin-canvas{width:100%;height:100%;max-width:none;max-height:none}
.inventory-owned{position:absolute;top:8px;right:8px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#101820;font-size:12px}
.inventory-limited{position:absolute;top:8px;left:6px;border-radius:12px;background:#244568;color:#cce5ff;font-size:10px;padding:3px 6px}
.inventory-details{padding:10px 9px}
.inventory-details h3{font-size:13px;margin:0 0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.inventory-details p{font-size:12px;color:var(--muted);margin:0}
@media(max-width:540px){.inventory-grid{grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:10px}.inventory-toolbar{flex-wrap:wrap}.inventory-art{height:150px}}
.avatar-preview-controls{position:absolute;z-index:5;top:318px;left:25px;display:flex;gap:8px}.avatar-preview .avatar-preview-controls .preview-mode-toggle{position:static}.avatar-preview .avatar-pose-toggle{position:static}.avatar-tile .item-art .skin-canvas{width:100%;height:100%;max-width:none;max-height:none}
.marketplace-preview-controls{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;gap:8px}
.marketplace-preview-scene .marketplace-preview-controls .marketplace-mode-toggle,.marketplace-preview-scene .marketplace-pose-toggle{position:static}
.market-transform{flex-wrap:wrap}
#market-shoulder-side{flex:0 0 100%}
#market-shoulder-side[hidden]{display:none}
.market-file{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 7px;margin:3px 6px 3px 0;border:1px solid var(--line);border-radius:4px;background:#101926;font-size:12px}
.market-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.market-file button{border:0;background:#27384c;color:#fff;width:22px;height:22px;border-radius:3px;padding:0;flex:none}
.market-file button:hover{background:#35577b}
.transactions-page{max-width:1100px;margin:0 auto;padding:28px 0 60px}
.transactions-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.transactions-heading h1{font-size:27px;margin:0}
.transactions-heading select,#transaction-type{width:auto;min-width:150px;background:#252b3b}
#transaction-type{margin-bottom:16px}
.transaction-table-wrap{border:1px solid var(--line);border-radius:9px;overflow:auto}
.transaction-table{min-width:700px;font-size:13px}
.transaction-table th{padding:14px 16px;font-size:13px;font-weight:500;white-space:nowrap}
.transaction-table th:last-child,.transaction-table td:last-child{text-align:right}
.transaction-table td{padding:10px 16px;border:0;height:56px}
.transaction-table tbody tr:nth-child(even){background:#0d1019}
.transaction-table tbody tr:nth-child(odd){background:#121621}
.transaction-date{color:var(--muted);white-space:nowrap}
.transaction-party{display:flex;align-items:center;gap:8px;white-space:nowrap}
.transaction-party small{color:var(--muted);min-width:31px}
.transaction-party>a,.transaction-party>span{display:inline-flex;align-items:center;gap:8px}
.transaction-party .face{flex:none}
.transaction-source-icon,.transaction-art{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#222838;border-radius:4px}
.transaction-item{display:flex;align-items:center;gap:12px;min-width:170px}
.transaction-item,.transaction-party a{color:#fff}
a.transaction-item:hover,.transaction-party a:hover{color:var(--blue)}
.transaction-art{overflow:hidden}
.transaction-art img,.transaction-art canvas{width:100%;height:100%;object-fit:contain;display:block}
.transaction-amount{font-weight:700;white-space:nowrap}
.transaction-amount .icon{color:#aa5cf7;margin-right:3px}
.transaction-amount.credit{color:#6baaff}
.transaction-amount.debit{color:#ff5c73}
.currency-icon{width:14px;height:16px;object-fit:contain;vertical-align:-3px;margin-right:4px}
.transaction-source-icon .currency-icon,.transaction-art .currency-icon{width:18px;height:21px;margin:0}
.transaction-table{width:100%;table-layout:fixed}
.transaction-table th:nth-child(1){width:126px}.transaction-table th:nth-child(2){width:215px}.transaction-table th:nth-child(4){width:125px}
.transaction-table td{height:56px}.transaction-party .face{width:29px;height:29px}
.transaction-party a,.transaction-item{font-weight:600}
.settings-page{max-width:1200px;margin:38px auto 90px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px}
.settings-sidebar{align-self:start;position:sticky;top:62px}
.settings-person,.settings-sidebar nav{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.settings-person{display:flex;align-items:center;gap:12px;padding:12px 15px;margin-bottom:18px}
.settings-person .face{width:38px;height:38px}
.settings-sidebar nav{padding:18px}
.settings-sidebar nav a{display:flex;align-items:center;gap:13px;padding:10px 15px;border-radius:9px;color:var(--muted);margin:2px 0}
.settings-sidebar nav a i{width:18px;text-align:center}
.settings-sidebar nav a.active{background:#3864f4;color:white;font-weight:700}
.settings-sidebar nav a:hover:not(.active){background:var(--panel2);color:var(--text)}
.settings-main{min-width:0}.settings-main h1{font-size:23px;margin:0 0 24px}.settings-main h2{font-size:18px;margin:0 0 9px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 0;border-bottom:1px solid var(--line)}
.setting-row>div:first-child{min-width:0}.setting-row strong{display:block}.setting-row p{color:var(--muted);margin:3px 0 0;overflow-wrap:anywhere}
.setting-row .small{flex:none}.setting-row-actions{display:flex;align-items:center;gap:9px}
.setting-status{display:inline-block;margin-left:7px;color:#ff727a;font-size:12px}.setting-status.verified{color:#51d890}
.setting-section{margin:36px 0 25px}.setting-section>p{margin-top:0}
.settings-main form:not(.form){display:grid;gap:13px}.settings-main form label{display:grid;gap:6px;font-weight:600}
.settings-main form label.check-row,.setting-radio-list label{display:flex;align-items:center;gap:10px;font-weight:500}
.settings-main form .setting-radio-list label{display:flex;flex-direction:row;justify-content:flex-start}
.settings-main input:not([type=checkbox]):not([type=radio]),.settings-main select,.settings-main textarea{width:100%}
.setting-inline{grid-template-columns:1fr auto;align-items:end;margin:22px 0}.setting-inline .form-error{grid-column:1/-1}
.setting-radio-list{display:grid;gap:9px;background:var(--panel);border-radius:9px;padding:17px 20px;margin:12px 0 22px}
.setting-radio-list input{accent-color:#a64ff0}
.setting-list{border-top:1px solid var(--line)}.setting-list>a{padding:18px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-weight:600}.setting-list>a span{font-size:25px;line-height:1;color:var(--muted)}
.setting-back{display:inline-block;margin-bottom:16px;font-weight:700}.setting-pagination{display:flex;align-items:center;justify-content:center;gap:15px;margin:26px}
.session-row .blurred-ip,.device-details .blurred-ip{filter:blur(5px);user-select:none;transition:filter .15s}
.blurred-ip:hover,.blurred-ip:focus{filter:none;user-select:text}
.device-details{display:grid;gap:5px}.device-details dt{font-weight:700;text-transform:uppercase;font-size:12px;margin-top:16px}.device-details dd{margin:0 0 10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.totp-key{display:block;padding:14px;margin:15px 0;border:1px solid var(--line);border-radius:7px;letter-spacing:2px;overflow-wrap:anywhere}
.screen-time{background:var(--panel);padding:22px;border-radius:11px}.screen-time strong{font-size:24px}.screen-time p{margin:0;color:var(--muted)}
.screen-chart{height:190px;display:flex;align-items:end;gap:16px;margin-top:22px}.screen-day{height:100%;display:flex;flex:1;flex-direction:column;justify-content:flex-end;text-align:center;gap:8px}.screen-bar{background:#3864f4;border-radius:8px 8px 0 0;min-height:3px}.screen-day span{font-size:12px;color:var(--muted)}
.profile-socials{display:flex;gap:13px;flex-wrap:wrap}.profile-socials a{color:var(--blue)}
.blocked-profile .tabs{margin-top:22px}.blocked-profile .profile-counts,.blocked-profile .bio{display:none}
.locked-account{min-height:100vh;display:grid;place-items:center;padding:20px}.locked-account section{width:min(440px,100%);padding:35px;border:1px solid var(--line);background:var(--panel);border-radius:12px;text-align:center}.locked-account h1{font-size:26px}.locked-account button{margin:5px}
#toast{left:auto;right:25px;bottom:25px;transform:none;max-width:min(400px,calc(100vw - 35px));background:#fafafa;color:#171b22;border:1px solid #d5d7dc;border-radius:9px;padding:14px 12px 14px 17px;font-weight:600;box-shadow:0 14px 35px #0006;display:flex;align-items:center;gap:10px}
#toast:empty{display:none}
.toast-symbol{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #30343c;border-radius:50%;flex:none;font-size:12px}
#toast[data-type=error] .toast-symbol{border-color:#c8414d;color:#c8414d}
.toast-message{flex:1}
#toast button{background:none!important;border:0!important;color:#333!important;padding:2px 6px;font-size:21px;line-height:1}
@media(max-width:760px){.settings-page{grid-template-columns:1fr;gap:22px;margin:15px auto}.settings-sidebar{position:static}.settings-sidebar nav{display:flex;overflow:auto;padding:8px}.settings-sidebar nav a{white-space:nowrap}.transaction-table{table-layout:auto}.transaction-table th:nth-child(n){width:auto}}
.transaction-pagination{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:42px;color:var(--muted);font-size:13px}
.transaction-pagination .disabled{opacity:.45;cursor:default}
.settings-sidebar nav a.active{background:#3864f4;color:#fff}
.settings-main form .setting-radio-list label{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;justify-content:start;gap:12px;text-align:left;line-height:1.35}
.setting-radio-list input[type=radio],.setting-radio-list input[type=checkbox]{width:16px;height:16px;margin:1px 0 0;justify-self:start;accent-color:#3864f4}
.gender-setting{display:grid;grid-template-columns:minmax(130px,1fr) minmax(190px,310px);align-items:center;gap:15px;padding:19px 0;border-bottom:1px solid var(--line)}
.gender-setting .form-error{grid-column:1/-1}.gender-options{display:grid;grid-template-columns:1fr 1fr}
.settings-main .gender-options label{display:grid;place-items:center;position:relative;height:42px;border:1px solid var(--line);cursor:pointer;font-size:20px}
.settings-main .gender-options label+label{border-left:0}.gender-options input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.gender-options label:has(input:checked){background:#3864f4;color:white}.gender-options label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.totp-qr{display:block;width:220px;height:220px;margin:16px auto;border:9px solid white;border-radius:8px}
.profile-page .profile-counts,.profile-page .profile-info>.bio,.profile-page .profile-info>[data-action=about]{margin-left:-124px}
.profile-page .profile-counts{padding-top:26px}
[data-form=account-bio] textarea{resize:none}
.profile-socials a{display:inline-flex;align-items:center;gap:7px}
.profile-socials a i{font-size:17px}
@media(max-width:560px){.gender-setting{grid-template-columns:1fr}.gender-options{grid-column:1;grid-row:2}}
.catalog-detail-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.catalog-detail-title h1{margin:0}
.admin-page{max-width:1200px;margin:20px auto 80px}.admin-page h1{font-size:27px;margin:0 0 16px}.admin-page h2{font-size:19px}
.admin-type-tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);padding-bottom:13px;margin:15px 0 24px}
.admin-type-tabs a{padding:8px 13px;border-radius:7px;color:var(--muted);font-weight:600}.admin-type-tabs a:hover{background:var(--panel2);color:var(--text)}.admin-type-tabs a.active{background:#3864f4;color:white}
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:18px 0;color:var(--muted)}.admin-toolbar label{display:flex;align-items:center;gap:10px}.admin-toolbar select{min-width:140px}
.admin-report-list,.admin-targets{display:grid;gap:12px}.admin-report,.admin-empty{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.admin-report-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.admin-report-head>a{font-size:17px;font-weight:700;color:var(--text)}.admin-report-head small{font-size:12px;color:var(--muted)}
.admin-report p{margin:8px 0}.admin-report .muted a{color:var(--blue)}.admin-report-details{white-space:pre-wrap;overflow-wrap:anywhere}.admin-row-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.admin-status{display:inline-block;border-radius:20px;padding:3px 10px;background:var(--panel2);color:var(--muted);font-size:11px;font-weight:700;text-transform:capitalize;white-space:nowrap}.admin-status-open{color:#f2bc62}.admin-status-restricted,.admin-status-mildly_restricted{color:#f2bc62}.admin-status-suspended,.admin-status-banned{color:#fa747e}.admin-status-none,.admin-status-actioned{color:var(--green)}
.admin-search{display:flex;gap:9px;margin-bottom:18px}.admin-search input{width:min(420px,100%)}.admin-target{background:var(--panel);padding:13px 17px;border:1px solid var(--line);border-radius:8px}.admin-target>div{flex:1}.admin-audit{margin-top:38px}.admin-audit .setting-row{font-size:13px}.admin-audit .setting-row strong{text-transform:capitalize}.admin-empty{padding:35px;text-align:center;color:var(--muted)}
@media(max-width:700px){.admin-target{flex-wrap:wrap}.admin-target>div{flex-basis:100%}.admin-toolbar{align-items:flex-start;flex-direction:column}}

.auth-layout .captcha-slot.captcha-score{min-height:0;padding:10px;text-align:center;font-size:11px}

.auth-layout{min-height:0}