:root {
  --bg: #080b0a;
  --surface: #111513;
  --surface-2: #171c19;
  --line: #263029;
  --text: #f2f7f3;
  --muted: #8e9a92;
  --green: #8eea75;
  --green-deep: #58c75b;
  --green-glow: rgba(115, 229, 105, 0.18);
  --danger: #ff756d;
  --warning: #f8c66d;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(97, 166, 90, 0.11),
      transparent 36rem
    ),
    var(--bg);
  font-family:
    "Manrope",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  color: inherit;
}

.topbar {
  width: min(1160px, calc(100% - 40px));
  height: 76px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  position: relative;
  z-index: 10;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.5px;
}
.brand-cube {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #071008;
  font-size: 15px;
  background: linear-gradient(145deg, #a8fa84, #54b959);
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(119, 231, 102, 0.18);
  clip-path: polygon(50% 0, 93% 22%, 93% 76%, 50% 100%, 7% 76%, 7% 22%);
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-link {
  color: #adb8b0;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s;
}
.nav-link:hover {
  color: var(--text);
}
.nav-user {
  color: var(--muted);
  font-size: 13px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.button {
  border: 0;
  border-radius: 10px;
  min-height: 44px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-weight: 750;
  font-size: 14px;
  cursor: pointer;
  transition: 0.18s ease;
}
.button:hover {
  transform: translateY(-1px);
}
.button:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
.button-small {
  min-height: 37px;
  padding: 0 15px;
  background: #e8f4e9;
  color: #101611;
  font-size: 13px;
}
.button-primary {
  background: linear-gradient(180deg, #9cef7e, #71d66b);
  color: #0b150c;
  box-shadow: 0 8px 28px rgba(104, 211, 99, 0.16);
}
.button-primary:hover {
  box-shadow: 0 10px 34px rgba(104, 211, 99, 0.25);
}
.button-ghost {
  background: #171c19;
  color: #dce4de;
  border: 1px solid #2a332d;
}
.button-ghost:hover {
  border-color: #455348;
  background: #1c221e;
}
.button-large {
  min-height: 52px;
  padding: 0 24px;
}
.button-full {
  width: 100%;
}

.hero {
  min-height: 730px;
  padding: 104px 20px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  width: 620px;
  height: 380px;
  background: rgba(104, 208, 98, 0.075);
  filter: blur(90px);
  top: 20px;
  left: calc(50% - 310px);
  pointer-events: none;
}
.eyebrow {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 10px;
  font-weight: 800;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  margin: 0 5px 1px 0;
}
.hero h1 {
  font-size: clamp(54px, 7vw, 88px);
  line-height: 0.99;
  letter-spacing: -5px;
  margin: 23px 0 25px;
  font-weight: 800;
}
.hero h1 span {
  color: transparent;
  -webkit-text-stroke: 1.5px #839087;
}
.hero-copy {
  max-width: 630px;
  margin: auto;
  color: #99a69d;
  font-size: 17px;
  line-height: 1.72;
}
.hero-actions {
  margin-top: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 21px;
}
.hero-note {
  color: #68736c;
  font-size: 12px;
}
.server-window {
  width: min(790px, calc(100% - 20px));
  height: 308px;
  margin: 66px auto 0;
  position: relative;
  overflow: hidden;
  background: #101512;
  border: 1px solid #303b33;
  border-radius: 14px 14px 0 0;
  text-align: left;
  box-shadow:
    0 -20px 90px rgba(95, 196, 87, 0.08),
    0 35px 80px #000;
}
.window-bar {
  height: 40px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #161c18;
  border-bottom: 1px solid #283129;
  font-size: 10px;
  color: #68736b;
}
.window-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39423b;
}
.window-bar span {
  margin-left: 8px;
}
.window-bar b {
  margin-left: auto;
  color: #74da6f;
  font-size: 8px;
  letter-spacing: 1px;
}
.terminal {
  width: 64%;
  height: 100%;
  padding: 25px 23px;
  color: #a8d8a7;
  font:
    10px/2.15 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  position: relative;
  z-index: 2;
}
.terminal .muted {
  color: #536159;
}
.terminal .prompt {
  color: var(--green);
  margin-right: 7px;
}
.cursor {
  width: 5px;
  height: 11px;
  display: inline-block;
  background: #7be574;
  animation: blink 1s steps(2) infinite;
  vertical-align: -2px;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.world-art {
  position: absolute;
  right: 0;
  top: 40px;
  bottom: 0;
  width: 42%;
  background: linear-gradient(160deg, #111814, #1b2b1d);
  overflow: hidden;
}
.world-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #101512 0, transparent 35%);
}
.moon {
  width: 42px;
  height: 42px;
  position: absolute;
  top: 38px;
  right: 55px;
  background: #cbf4ac;
  box-shadow: 0 0 40px rgba(183, 239, 161, 0.28);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 75%, 75% 100%, 0 100%);
}
.hill {
  position: absolute;
  bottom: -40px;
  background: #24472a;
  transform: rotate(45deg);
}
.hill-a {
  width: 190px;
  height: 190px;
  right: -30px;
}
.hill-b {
  width: 125px;
  height: 125px;
  right: 130px;
  background: #1e3b24;
}
.tree {
  position: absolute;
  bottom: 45px;
  width: 9px;
  height: 58px;
  background: #382f24;
  z-index: 1;
}
.tree:before,
.tree:after {
  content: "";
  position: absolute;
  background: #37603a;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tree:before {
  width: 54px;
  height: 55px;
  left: -22px;
  top: -22px;
}
.tree:after {
  width: 43px;
  height: 44px;
  left: -17px;
  top: -2px;
}
.t1 {
  right: 195px;
}
.t2 {
  right: 50px;
  bottom: 65px;
  transform: scale(0.8);
}

.steps-section,
.plans-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 115px 20px;
}
.steps-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.section-heading {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 55px;
}
.section-heading h2 {
  font-size: clamp(31px, 4vw, 44px);
  letter-spacing: -2px;
  margin: 15px 0 13px;
}
.section-heading p {
  color: var(--muted);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}
.steps:before {
  content: "";
  position: absolute;
  top: 58px;
  left: 17%;
  right: 17%;
  border-top: 1px dashed #354037;
}
.steps article {
  text-align: center;
  padding: 0 35px;
  position: relative;
}
.steps article > span {
  position: absolute;
  color: #39433c;
  font: 700 10px ui-monospace;
  top: 18px;
  left: calc(50% + 35px);
}
.step-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border: 1px solid #354238;
  border-radius: 16px;
  background: #111713;
  color: var(--green);
  font-size: 24px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 10px var(--bg);
}
.steps h3 {
  font-size: 17px;
  margin: 0 0 9px;
}
.steps p {
  color: #7e8b82;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}
.plans-section {
  padding-top: 90px;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.plan-card {
  background: linear-gradient(145deg, #111613, #0e120f);
  border: 1px solid #252d27;
  border-radius: var(--radius);
  padding: 30px;
  position: relative;
  transition: 0.2s;
}
.plan-card:hover {
  transform: translateY(-4px);
  border-color: #3e4a41;
}
.plan-card.featured {
  border-color: #5d945e;
  box-shadow: 0 0 45px rgba(91, 183, 88, 0.08);
}
.popular {
  position: absolute;
  right: 22px;
  top: 20px;
  color: #80db72;
  background: #18291a;
  border: 1px solid #305336;
  border-radius: 99px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 6px 9px;
  font-weight: 800;
}
.plan-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #334038;
  background: #182019;
  border-radius: 10px;
  color: var(--green);
  margin-bottom: 23px;
}
.plan-card h3 {
  font-size: 22px;
  margin: 0 0 9px;
}
.plan-card > p {
  color: #758078;
  font-size: 12px;
  line-height: 1.6;
  min-height: 39px;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 26px 0 22px;
}
.price strong {
  font-size: 29px;
  letter-spacing: -1.5px;
}
.price span {
  font-size: 11px;
  color: #69736c;
}
.plan-card ul,
.order-summary ul {
  list-style: none;
  padding: 20px 0;
  margin: 0 0 24px;
  border-top: 1px solid #252d27;
}
.plan-card li,
.order-summary li {
  font-size: 12px;
  color: #9aa59d;
  padding: 7px 0;
}
.plan-card li:before,
.order-summary li:before {
  content: "✓";
  color: var(--green);
  margin-right: 9px;
}
.plan-card .button {
  width: 100%;
}

footer {
  width: min(1120px, calc(100% - 40px));
  margin: 50px auto 0;
  padding: 28px 0 38px;
  border-top: 1px solid #1b211d;
  display: flex;
  justify-content: space-between;
  color: #4f5952;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.narrow {
  width: min(960px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}
.dashboard {
  width: min(1120px, calc(100% - 40px));
  margin-left: auto;
  margin-right: auto;
}
.page-head {
  padding-top: 70px;
  padding-bottom: 36px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.page-head h1 {
  font-size: 42px;
  letter-spacing: -2.3px;
  margin: 10px 0 8px;
}
.page-head p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}
.panel {
  background: linear-gradient(145deg, #121714, #0f1311);
  border: 1px solid #263029;
  border-radius: var(--radius);
  padding: 28px;
}

.auth-wrap {
  width: min(1000px, calc(100% - 40px));
  min-height: 650px;
  margin: 55px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #273029;
  border-radius: 24px;
  overflow: hidden;
  background: #101411;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.35);
}
.auth-aside {
  position: relative;
  padding: 65px 55px;
  background: linear-gradient(150deg, #162019, #101411);
  overflow: hidden;
}
.auth-aside h1 {
  font-size: 45px;
  line-height: 1.08;
  letter-spacing: -2px;
  margin: 18px 0;
}
.auth-aside p {
  color: #8a978e;
  line-height: 1.7;
}
.auth-card {
  padding: 64px 58px;
  background: #0d110f;
}
.auth-card h2 {
  font-size: 28px;
  margin: 0 0 8px;
}
.auth-card > p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 30px;
}
.pixel-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 270px;
  background: linear-gradient(transparent, #17291a);
}
.pixel-moon {
  position: absolute;
  width: 55px;
  height: 55px;
  background: #b9ec9b;
  right: 80px;
  top: 60px;
  box-shadow: 0 0 50px rgba(167, 231, 139, 0.2);
}
.pixel-ground {
  position: absolute;
  bottom: 0;
  width: 110%;
  height: 105px;
  background: #203e25;
  clip-path: polygon(
    0 68%,
    8% 68%,
    8% 44%,
    18% 44%,
    18% 70%,
    27% 70%,
    27% 29%,
    38% 29%,
    38% 56%,
    46% 56%,
    46% 17%,
    58% 17%,
    58% 70%,
    67% 70%,
    67% 41%,
    79% 41%,
    79% 61%,
    88% 61%,
    88% 31%,
    100% 31%,
    100% 100%,
    0 100%
  );
}
.stack-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stack-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #bac3bc;
  font-size: 12px;
  font-weight: 650;
}
.stack-form input,
.stack-form select,
.stack-form textarea {
  width: 100%;
  border: 1px solid #303a33;
  background: #111613;
  color: var(--text);
  border-radius: 10px;
  padding: 0 13px;
  height: 47px;
  outline: 0;
  transition: 0.15s;
}
.stack-form textarea {
  height: 85px;
  padding-top: 12px;
  resize: vertical;
}
.stack-form input:focus,
.stack-form select:focus,
.stack-form textarea:focus {
  border-color: #67a765;
  box-shadow: 0 0 0 3px rgba(101, 184, 98, 0.09);
}
.form-switch {
  text-align: center;
  color: #69756c;
  font-size: 12px;
  margin-top: 25px;
}
.form-switch a,
.check a,
.summary-top a {
  color: var(--green);
}
.alert {
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.5;
}
.alert-error {
  color: #ffaaa4;
  background: #281716;
  border: 1px solid #532a27;
}
.alert-success {
  color: #a9eca3;
  background: #142618;
  border: 1px solid #2d5131;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.85fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 80px;
}
.order-summary {
  position: sticky;
  top: 20px;
}
.summary-top {
  display: flex;
  justify-content: space-between;
  color: #7f8a82;
  font-size: 11px;
}
.order-summary h2 {
  font-size: 27px;
  margin: 16px 0;
}
.big-slots {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -3px;
  color: var(--green);
}
.big-slots span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: #7f8a82;
  margin-left: 8px;
}
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.summary-total span {
  font-size: 11px;
  color: var(--muted);
}
.summary-total b {
  font-size: 20px;
}
.pack-list {
  display: grid;
  gap: 8px;
}
.pack-list article {
  border: 1px solid #273029;
  background: #101411;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 15px;
}
.pack-list b {
  font-size: 12px;
}
.pack-list span {
  grid-column: 1;
  color: #77847a;
  font-size: 10px;
}
.pack-list em {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  color: var(--green);
  font: normal 9px ui-monospace;
  background: #162219;
  padding: 5px 7px;
  border-radius: 5px;
}
.check {
  flex-direction: row !important;
  align-items: flex-start;
  line-height: 1.5;
}
.check input {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto;
  margin-top: 2px;
}
.center {
  text-align: center;
}
.muted-text {
  color: var(--muted);
  font-size: 11px;
}

.server-list {
  display: grid;
  gap: 12px;
  min-height: 200px;
}
.server-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  align-items: center;
  gap: 30px;
  background: #111613;
  border: 1px solid #273029;
  border-radius: 14px;
  padding: 20px 22px;
  transition: 0.18s;
}
.server-card:hover {
  border-color: #3a473e;
  background: #131915;
}
.server-card-main {
  display: flex;
  align-items: center;
  gap: 15px;
}
.server-avatar {
  width: 45px;
  height: 45px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #395a3c, #1c3020);
  color: #a7ed9a;
  border: 1px solid #47694a;
  font-weight: 800;
}
.server-avatar.large {
  width: 58px;
  height: 58px;
  font-size: 19px;
}
.server-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.server-title h3 {
  font-size: 15px;
  margin: 0;
}
.server-card-main p {
  margin: 6px 0 0;
  color: #78847b;
  font-size: 10px;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 99px;
  padding: 5px 8px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 800;
  background: #1d231f;
  color: #98a39b;
}
.status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status-running {
  background: #16271a;
  color: #7cde76;
}
.status-running i {
  box-shadow: 0 0 7px currentColor;
}
.status-failed {
  background: #2b1817;
  color: #fa827b;
}
.status-provisioning,
.status-pending,
.status-restarting {
  background: #292416;
  color: #f0ca73;
}
.server-address > span {
  display: block;
  color: #647067;
  font-size: 9px;
  margin-bottom: 7px;
}
.server-address button {
  border: 0;
  background: 0;
  color: #c8d1ca;
  font: 12px ui-monospace;
  cursor: pointer;
  padding: 0;
}
.server-address b {
  font-family: inherit;
  color: #677269;
  margin-left: 7px;
}
.logout-form {
  margin-top: 24px;
}
.text-button {
  border: 0;
  background: 0;
  color: #748078;
  font-size: 11px;
  cursor: pointer;
  padding: 4px;
}
.text-button:hover {
  color: var(--text);
}
.empty-state {
  text-align: center;
  padding: 75px 30px;
}
.empty-state h1,
.empty-state h2 {
  margin: 18px 0 9px;
}
.empty-state p {
  color: var(--muted);
  margin: 0 0 25px;
}
.empty-icon {
  font-size: 39px;
  color: var(--green);
}

.back-link {
  display: inline-block;
  color: #7f8a82;
  font-size: 11px;
  margin-bottom: 23px;
}
.server-heading {
  display: flex;
  align-items: center;
  gap: 17px;
}
.server-heading h1 {
  margin: 0 0 8px;
}
.control-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
}
.panel-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #748078;
  font-weight: 800;
}
.address-large {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
}
.address-large code {
  font-size: 20px;
  color: #ccf2c7;
}
.copy-button {
  border: 1px solid #3e4b41;
  background: #19201b;
  border-radius: 8px;
  padding: 8px 11px;
  color: #aeb8b0;
  font-size: 10px;
  cursor: pointer;
}
.connection-panel p {
  color: #748078;
  font-size: 11px;
  margin: 0;
}
.power-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.power-actions form {
  flex: 1;
}
.power {
  width: 100%;
  height: 67px;
  border: 1px solid #303a33;
  background: #151a17;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  cursor: pointer;
}
.power span {
  font-size: 8px;
  color: #7e8981;
}
.power.start {
  color: #79dc72;
}
.power.stop {
  color: #ef7770;
}
.power:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.full-span {
  grid-column: 1/-1;
}
.specs-panel dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 22px 0 0;
}
.specs-panel dl div {
  border-left: 1px solid #2c352e;
  padding-left: 11px;
}
.specs-panel dt {
  color: #68736c;
  font-size: 9px;
  margin-bottom: 5px;
}
.specs-panel dd {
  margin: 0;
  font-size: 12px;
  color: #d2dad4;
}
.console-panel {
  padding: 0;
  overflow: hidden;
}
.console-head {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #263029;
}
.console-panel pre {
  height: 160px;
  overflow: auto;
  margin: 0;
  padding: 17px 20px;
  color: #8fc68e;
  background: #0b0f0c;
  font:
    9px/1.8 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: pre-wrap;
}

.players-panel {
  padding: 22px;
}
.players-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.players-head h2 {
  margin: 7px 0 0;
  font-size: 18px;
  letter-spacing: -0.4px;
}
.add-player-form,
.role-form {
  display: flex;
  gap: 8px;
}
.add-player-form input,
.add-player-form select,
.role-form select {
  min-height: 42px;
  border: 1px solid #303a33;
  border-radius: 9px;
  background: #0d110f;
  color: var(--text);
  padding: 0 12px;
  outline: none;
}
.add-player-form input:focus,
.add-player-form select:focus,
.role-form select:focus {
  border-color: #69a765;
  box-shadow: 0 0 0 3px rgba(105, 167, 101, 0.12);
}
.add-player-form input {
  width: 170px;
}
.cracked-note {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid #355439;
  border-radius: 10px;
  background: rgba(72, 119, 69, 0.11);
  color: #9eaa9f;
  font-size: 11px;
  line-height: 1.65;
}
.cracked-note b {
  color: #a9e2a5;
}
.cracked-note code {
  color: #caf0c4;
}
.player-list {
  display: grid;
  gap: 8px;
}
.player-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 9px 12px;
  border: 1px solid #27302a;
  border-radius: 10px;
  background: #101512;
}
.player-identity {
  display: flex;
  align-items: center;
  gap: 11px;
}
.player-identity b {
  display: block;
  font-size: 13px;
}
.player-identity small {
  display: block;
  margin-top: 3px;
  color: #69756c;
  font-size: 9px;
}
.presence {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #4b534e;
}
.presence.online {
  background: var(--green);
  box-shadow: 0 0 11px rgba(142, 234, 117, 0.65);
}
.role-form select {
  min-width: 145px;
}
.role-form .button {
  min-height: 42px;
}
.remove-player {
  width: 35px;
  height: 35px;
  border: 1px solid #4b302f;
  border-radius: 8px;
  background: #211414;
  color: #ef7770;
  cursor: pointer;
  font-size: 20px;
}
.remove-player:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.access-revoked {
  color: #7c8780;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.players-empty {
  padding: 28px 10px 14px;
  text-align: center;
  color: #717d75;
  font-size: 11px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}
.stats-grid article {
  background: #111613;
  border: 1px solid #263029;
  border-radius: 13px;
  padding: 18px;
}
.stats-grid span {
  color: #78837b;
  font-size: 10px;
}
.stats-grid b {
  display: block;
  font-size: 26px;
  margin-top: 9px;
  letter-spacing: -1px;
}
.admin-grid {
  display: grid;
  grid-template-columns: 1.7fr 0.8fr;
  gap: 14px;
  align-items: start;
}
.table-panel {
  padding: 0;
  overflow: hidden;
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 20px 22px;
  border-bottom: 1px solid #263029;
}
.panel-title h2 {
  font-size: 15px;
  margin: 0;
}
.panel-title > span {
  font-size: 9px;
  background: #222a24;
  color: #879289;
  padding: 4px 7px;
  border-radius: 99px;
}
.table-scroll {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 680px;
}
th {
  text-align: left;
  color: #69756c;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 16px;
  background: #0e120f;
}
td {
  border-top: 1px solid #202722;
  padding: 13px 16px;
  font-size: 10px;
  color: #bdc6bf;
}
td a {
  color: var(--green);
}
td small {
  display: block;
  color: #626e65;
  font-size: 8px;
  margin-top: 5px;
}
td code {
  font-size: 9px;
}
.compact {
  padding-top: 20px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pack-admin-list {
  border-top: 1px solid #263029;
  margin-top: 22px;
  padding-top: 14px;
}
.pack-admin-list div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
}
.pack-admin-list b {
  font-size: 10px;
}
.pack-admin-list span {
  color: #657168;
  font-size: 8px;
}

@media (max-width: 850px) {
  .hero {
    padding-top: 75px;
  }
  .hero h1 {
    letter-spacing: -3px;
  }
  .server-window {
    margin-top: 50px;
  }
  .steps,
  .plans {
    grid-template-columns: 1fr;
  }
  .steps {
    gap: 45px;
  }
  .steps:before {
    display: none;
  }
  .plans {
    max-width: 520px;
    margin: auto;
  }
  .plan-card > p {
    min-height: 0;
  }
  .auth-wrap {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .auth-aside {
    display: none;
  }
  .checkout-grid,
  .admin-grid,
  .control-grid {
    grid-template-columns: 1fr;
  }
  .order-summary {
    position: static;
    grid-row: 1;
  }
  .server-card {
    grid-template-columns: 1fr auto;
  }
  .server-address {
    grid-row: 2;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .players-head {
    align-items: stretch;
    flex-direction: column;
  }
  .add-player-form input {
    width: auto;
    flex: 1;
  }
}
@media (max-width: 560px) {
  .topbar {
    width: calc(100% - 28px);
    height: 65px;
  }
  .topbar nav {
    gap: 12px;
  }
  .nav-user,
  .topbar .nav-link:first-child {
    display: none;
  }
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }
  .hero h1 {
    font-size: 50px;
    letter-spacing: -3px;
  }
  .hero-copy {
    font-size: 14px;
  }
  .hero-actions {
    flex-direction: column;
  }
  .server-window {
    width: 100%;
    height: 260px;
  }
  .terminal {
    width: 100%;
    font-size: 8px;
  }
  .world-art {
    opacity: 0.35;
    width: 65%;
  }
  .steps-section,
  .plans-section {
    padding: 80px 14px;
  }
  .page-head {
    padding-top: 45px;
    align-items: flex-start;
    gap: 20px;
  }
  .page-head h1 {
    font-size: 34px;
  }
  .dashboard,
  .narrow {
    width: calc(100% - 28px);
  }
  .auth-wrap {
    width: calc(100% - 28px);
    margin: 30px auto;
    min-height: 0;
  }
  .auth-card {
    padding: 38px 24px;
  }
  .checkout-grid {
    width: calc(100% - 28px);
  }
  .server-card {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .server-card > .button {
    width: 100%;
  }
  .specs-panel dl {
    grid-template-columns: 1fr 1fr;
  }
  .power-actions {
    flex-wrap: wrap;
  }
  .power-actions form {
    flex: 1 0 40%;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stats-grid b {
    font-size: 21px;
  }
  .topbar .button-small {
    padding: 0 10px;
  }
  .page-head > .button {
    white-space: nowrap;
  }
  .address-large {
    align-items: flex-start;
    flex-direction: column;
  }
  .address-large code {
    font-size: 16px;
  }
  .add-player-form,
  .role-form {
    display: grid;
    grid-template-columns: 1fr;
  }
  .player-row {
    grid-template-columns: 1fr auto;
  }
  .role-form {
    grid-column: 1 / -1;
  }
  .role-form select {
    min-width: 0;
  }
  footer {
    flex-direction: column;
    gap: 10px;
  }
}

/* Commerce workspace */
.app-body {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --line: #e6e8ef;
  --text: #171a26;
  --muted: #73798c;
  --green: #5b55e7;
  --green-deep: #4841cf;
  margin: 0;
  color: var(--text);
  background: var(--bg);
}
.commerce-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
}
.commerce-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 26px 18px 22px;
  color: #d9dcf1;
  background: #17182a;
  border-right: 1px solid #22243b;
}
.commerce-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 27px;
  font-size: 17px;
  font-weight: 800;
}
.commerce-logo .brand-cube {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: linear-gradient(145deg, #8b86ff, #5c55e7);
  color: #fff;
  clip-path: none;
}
.commerce-logo small {
  margin-left: auto;
  color: #747791;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.commerce-nav {
  display: grid;
  gap: 5px;
}
.commerce-nav a {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 12px;
  color: #a7abc5;
  border-radius: 10px;
  font-size: 13px;
  transition: 0.18s ease;
}
.commerce-nav a.active,
.commerce-nav a:hover {
  color: #fff;
  background: #262842;
}
.commerce-nav-label {
  margin: 0 12px 9px;
  color: #686c88;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.commerce-nav a span {
  width: 22px;
  color: #8d88ff;
  font-size: 17px;
  text-align: center;
}
.commerce-nav a b {
  font-weight: 650;
}
.commerce-help {
  margin-top: auto;
  padding: 15px;
  border: 1px solid #30334e;
  border-radius: 12px;
  background: #20223a;
}
.commerce-help span {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.commerce-help p {
  margin: 7px 0 0;
  color: #878ba6;
  font-size: 9px;
  line-height: 1.55;
}
.commerce-workspace {
  min-width: 0;
}
.commerce-topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e8e9ef;
  backdrop-filter: blur(12px);
}
.commerce-topbar > div:first-child {
  display: grid;
  gap: 3px;
}
.topbar-kicker {
  color: #8a90a2;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.commerce-topbar > div:first-child b {
  font-size: 14px;
}
.commerce-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.commerce-user > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #716bf3, #4e48ce);
  font-weight: 800;
}
.commerce-user div {
  display: grid;
  gap: 2px;
}
.commerce-user b {
  font-size: 11px;
}
.commerce-user small {
  color: #858b9b;
  font-size: 8px;
}
.app-body .dashboard,
.app-body .narrow,
.app-body .checkout-grid {
  width: min(1280px, calc(100% - 56px));
}
.commerce-page-head {
  min-height: 176px;
  margin: 0 auto;
  padding: 42px 0 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.commerce-page-head > div > span,
.commerce-section-head > div > span {
  display: block;
  margin-bottom: 7px;
  color: #6d66e6;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.commerce-page-head h1 {
  margin: 0;
  color: #171a26;
  font-size: 34px;
  letter-spacing: -1.5px;
}
.commerce-page-head p {
  margin: 8px 0 0;
  color: #73798c;
  font-size: 12px;
}
.project-head-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.app-body .button-primary {
  color: #fff;
  background: linear-gradient(180deg, #6c66ee, #554fd8);
  box-shadow: 0 8px 22px rgba(85, 79, 216, 0.2);
}
.app-body .button-ghost {
  color: #414657;
  background: #fff;
  border-color: #dcdee7;
}
.commerce-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin: 0 auto 18px;
}
.commerce-kpis article {
  min-height: 122px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(31, 34, 51, 0.025);
}
.commerce-kpis article > span {
  color: #7b8192;
  font-size: 10px;
  font-weight: 650;
}
.commerce-kpis article > b {
  margin-top: 13px;
  font-size: 27px;
  letter-spacing: -1px;
}
.commerce-kpis article > small {
  margin-top: auto;
  color: #a0a4b2;
  font-size: 9px;
}
.commerce-kpis .kpi-status {
  color: #2b9a61;
  font-size: 18px;
}
.commerce-section,
.app-body .panel {
  background: #fff;
  border: 1px solid #e5e7ee;
  border-radius: 14px;
  box-shadow: 0 3px 16px rgba(30, 33, 49, 0.025);
}
.commerce-section {
  margin: 0 auto 18px;
  padding: 22px;
}
.commerce-section-head {
  min-height: 43px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 17px;
}
.commerce-section-head h2 {
  margin: 0;
  color: #1b1e2b;
  font-size: 19px;
  letter-spacing: -0.5px;
}
.commerce-section-head > a,
.commerce-section-head > em {
  color: #625ce0;
  font-size: 10px;
  font-style: normal;
}
.project-commerce-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.project-commerce-card {
  padding: 18px;
  border: 1px solid #e4e6ed;
  border-radius: 12px;
  background: #fbfbfd;
}
.project-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.project-card-top > a {
  color: #777d8d;
  font-size: 9px;
}
.project-store-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #7b75f5, #514bcf);
  font-weight: 800;
}
.project-commerce-card h3 {
  margin: 16px 0 6px;
  font-size: 15px;
}
.project-commerce-card > p {
  min-height: 31px;
  margin: 0;
  color: #818697;
  font-size: 9px;
  line-height: 1.6;
}
.project-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 16px 0;
}
.project-metrics span {
  color: #8d92a1;
  font-size: 8px;
}
.project-metrics b {
  display: block;
  margin-bottom: 3px;
  color: #272a37;
  font-size: 13px;
}
.commerce-link-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #514bd1;
  background: #f0efff;
  border: 1px solid #dddafe;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 750;
}
.commerce-link-button.full {
  width: 100%;
}
.quick-project-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 9px;
  margin: -4px 0 18px;
  padding: 14px;
  background: #f7f7fb;
  border: 1px solid #e5e6ee;
  border-radius: 11px;
}
.quick-project-form[hidden] {
  display: none;
}
.quick-project-form input,
.app-body .stack-form input,
.app-body .stack-form select,
.app-body .stack-form textarea,
.world-settings-panel select,
.app-body .add-player-form input,
.app-body .add-player-form select,
.app-body .role-form select {
  color: #282b38;
  background: #fff;
  border: 1px solid #dcdfe8;
}
.quick-project-form input {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 9px;
  outline: none;
}
.commerce-server-list {
  display: grid;
  gap: 8px;
}
.commerce-server-card {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) minmax(190px, 0.65fr) auto;
  align-items: center;
  gap: 15px;
  padding: 13px 15px;
  border: 1px solid #e7e8ee;
  border-radius: 11px;
  transition: 0.18s ease;
}
.commerce-server-card:hover {
  border-color: #c9c6f4;
  box-shadow: 0 5px 18px rgba(47, 44, 104, 0.05);
}
.server-product-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #514cc5;
  background: #eeedff;
  font-size: 10px;
  font-weight: 850;
}
.server-product-main > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.server-product-main h3 {
  margin: 0;
  font-size: 13px;
}
.server-product-main p {
  margin: 5px 0 0;
  color: #8b90a0;
  font-size: 9px;
}
.server-product-address span {
  display: block;
  margin-bottom: 5px;
  color: #9a9eac;
  font-size: 8px;
}
.server-product-address button,
.wide-kpi button {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  color: #3c4050;
  background: transparent;
  border: 0;
  font: 10px ui-monospace;
  text-overflow: ellipsis;
  cursor: pointer;
}
.app-body .status {
  color: #73798a;
  background: #f0f1f5;
}
.app-body .status-running {
  color: #258655;
  background: #e9f8ef;
}
.app-body .status-failed {
  color: #c84f4f;
  background: #fff0ef;
}
.app-body .status-provisioning,
.app-body .status-pending,
.app-body .status-restarting {
  color: #9a6b20;
  background: #fff6de;
}
.app-body .back-link {
  margin-bottom: 14px;
  color: #777d8e;
}
.app-body .server-avatar {
  color: #fff;
  background: linear-gradient(145deg, #736dec, #4f49c9);
  border: 0;
}
.app-body .control-grid {
  margin-bottom: 34px;
}
.app-body .panel {
  color: #252834;
}
.app-body .panel-label {
  color: #818697;
}
.app-body .address-large code {
  color: #3f3aaf;
}
.app-body .copy-button {
  color: #504acb;
  background: #f0efff;
  border-color: #dad8fa;
}
.app-body .connection-panel p,
.app-body .world-settings-panel p {
  color: #858a99;
}
.app-body .power {
  color: #505565;
  background: #f8f8fb;
  border-color: #e2e4eb;
}
.app-body .power.start {
  color: #2c9a63;
}
.app-body .power.stop {
  color: #d55d59;
}
.world-settings-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.world-settings-panel h2 {
  margin: 8px 0 5px;
  font-size: 17px;
}
.world-settings-panel p {
  margin: 0;
  font-size: 10px;
}
.world-settings-panel form {
  display: flex;
  gap: 8px;
}
.world-settings-panel select {
  min-width: 145px;
  border-radius: 9px;
  padding: 0 12px;
}
.app-body .specs-panel dl div {
  border-color: #e3e5ec;
}
.app-body .specs-panel dt,
.app-body .specs-panel dd {
  color: #73798b;
}
.app-body .specs-panel dd {
  color: #303340;
}
.app-body .console-head {
  border-color: #e5e7ed;
}
.app-body .console-panel pre {
  color: #b9c3ce;
  background: #171a25;
}
.app-body .players-head {
  border-color: #e4e6ed;
}
.app-body .players-head h2 {
  color: #242735;
}
.app-body .cracked-note {
  color: #6e7485;
  background: #f3f3ff;
  border-color: #dcdbfb;
}
.app-body .cracked-note b,
.app-body .cracked-note code {
  color: #504ac3;
}
.app-body .player-row {
  background: #fbfbfd;
  border-color: #e5e7ed;
}
.app-body .player-identity small,
.app-body .access-revoked,
.app-body .players-empty {
  color: #858a99;
}
.project-kpis {
  grid-template-columns: 0.65fr 0.65fr 1.7fr;
}
.wide-kpi button {
  margin-top: 14px;
  color: #514bc9;
  font-size: 11px;
  text-align: left;
}
.project-admin-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
}
.project-admin-grid .commerce-section {
  width: 100%;
}
.project-settings-form label small {
  display: block;
}
.slug-input {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe8;
  border-radius: 9px;
  overflow: hidden;
  background: #f5f6fa;
}
.slug-input span {
  padding-left: 12px;
  color: #8d92a1;
  font-size: 11px;
}
.slug-input input {
  border: 0 !important;
}
.mini-server-list {
  display: grid;
  gap: 8px;
}
.mini-server-list > a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid #e5e7ed;
  border-radius: 10px;
}
.mini-server-list b,
.mini-server-list small {
  display: block;
}
.mini-server-list b {
  font-size: 11px;
}
.mini-server-list small {
  margin-top: 4px;
  color: #8d92a1;
  font-size: 8px;
}
.app-body .commerce-table {
  color: #3f4351;
}
.app-body .commerce-table th {
  color: #8b90a1;
  background: #f7f8fb;
  border-color: #e8e9ef;
}
.app-body .commerce-table td {
  border-color: #eceef2;
}
.app-body .commerce-table a,
.app-body .commerce-table code {
  color: #504ac9;
}
.member-status {
  display: inline-flex;
  padding: 5px 8px;
  color: #278554;
  background: #e9f8ef;
  border-radius: 99px;
  font-size: 8px;
  font-weight: 700;
}
.app-body .admin-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.65fr);
}
.app-body .assortment-panel {
  margin: 0;
}
.app-body .pack-admin-list div {
  border-color: #e7e8ee;
}
.app-body .pack-admin-list span {
  color: #8a8f9f;
}

/* Public project storefront */
.portal-body {
  min-height: 100vh;
  color: #f8f8ff;
  background: #0d1020;
}
.portal-header,
.portal-main,
.portal-footer {
  width: min(1120px, calc(100% - 40px));
  margin: auto;
}
.portal-header {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.portal-header > a {
  display: flex;
  align-items: center;
  gap: 11px;
}
.portal-header > a span,
.portal-avatar {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, #7a72ff, #4d46c9);
  font-weight: 800;
}
.portal-header > div {
  display: grid;
  text-align: right;
}
.portal-header small,
.portal-header-note {
  color: #777e9c;
  font-size: 9px;
}
.portal-header > div b {
  margin-top: 3px;
  font-size: 11px;
}
.portal-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  margin-right: 34px;
}
.portal-header nav a {
  color: #9299b5;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}
.portal-header nav a:hover {
  color: #fff;
}
.portal-hero {
  min-height: 455px;
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: center;
  gap: 70px;
  position: relative;
}
.portal-hero:before {
  content: "";
  position: absolute;
  width: 560px;
  height: 360px;
  left: -160px;
  top: 0;
  background: rgba(91, 79, 229, 0.18);
  filter: blur(110px);
  pointer-events: none;
}
.portal-eyebrow,
.portal-section > div:first-child > span,
.portal-auth-copy > span {
  color: #928cff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.portal-hero h1 {
  position: relative;
  margin: 17px 0 18px;
  font-size: clamp(46px, 7vw, 78px);
  line-height: 0.98;
  letter-spacing: -4px;
}
.portal-hero p {
  max-width: 590px;
  color: #9ba1ba;
  font-size: 15px;
  line-height: 1.75;
}
.portal-hero a {
  display: inline-flex;
  margin-top: 16px;
  padding: 13px 18px;
  color: #fff;
  background: #5b54db;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 750;
}
.portal-hero-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  border: 1px solid #303654;
  border-radius: 22px;
  background: linear-gradient(145deg, #1a1e35, #121527);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3);
}
.portal-hero-card span,
.portal-hero-card small {
  color: #858ca8;
  font-size: 10px;
}
.portal-hero-card b {
  margin: 12px 0 4px;
  font-size: 62px;
  letter-spacing: -4px;
}
.portal-section {
  padding: 45px 0 70px;
}
.portal-section h2 {
  margin: 8px 0 24px;
  font-size: 30px;
  letter-spacing: -1.4px;
}
.portal-server-list {
  display: grid;
  gap: 10px;
}
.portal-server {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 18px;
  border: 1px solid #292e48;
  border-radius: 13px;
  background: #15182a;
}
.portal-server > div {
  display: flex;
  align-items: center;
  gap: 13px;
}
.portal-server-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #aaa6ff;
  background: #282747;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
}
.portal-server h3 {
  margin: 0;
  font-size: 14px;
}
.portal-server p {
  margin: 6px 0 0;
  color: #7f86a0;
  font-size: 9px;
}
.portal-server button {
  padding: 10px 12px;
  color: #dddfff;
  background: #21253c;
  border: 1px solid #343a58;
  border-radius: 8px;
  font: 10px ui-monospace;
  cursor: pointer;
}
.portal-auth,
.portal-account {
  margin-bottom: 80px;
  padding: 35px;
  border: 1px solid #2e3350;
  border-radius: 18px;
  background: linear-gradient(145deg, #191d32, #121527);
}
.portal-auth {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 55px;
}
.portal-auth-copy h2 {
  margin: 14px 0;
  font-size: 28px;
  line-height: 1.15;
}
.portal-auth-copy p {
  color: #8e95af;
  font-size: 11px;
  line-height: 1.75;
}
.portal-auth-forms {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 12px;
}
.portal-auth-forms form {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 20px;
  border: 1px solid #303653;
  border-radius: 12px;
  background: #111426;
}
.portal-auth-forms h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.portal-auth-forms input {
  min-height: 42px;
  padding: 0 12px;
  color: #fff;
  background: #1a1e32;
  border: 1px solid #303653;
  border-radius: 8px;
  outline: none;
}
.portal-auth-forms button,
.portal-account button {
  min-height: 42px;
  color: #fff;
  background: #5b54dc;
  border: 0;
  border-radius: 8px;
  font-weight: 750;
  cursor: pointer;
}
.portal-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.portal-account > div {
  display: flex;
  align-items: center;
  gap: 16px;
}
.portal-account > .portal-account-tools {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 10px;
  margin-left: auto;
  margin-right: 18px;
}
.portal-account h2,
.portal-account p {
  margin: 3px 0;
}
.portal-account small,
.portal-account p {
  color: #8990aa;
  font-size: 10px;
}
.portal-account button {
  min-height: 38px;
  padding: 0 16px;
}
.portal-client-auth {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #334c44;
  border-radius: 10px;
  background: #111d1c;
}
.portal-client-auth > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: #a7ebc2;
  background: #21473b;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}
.portal-client-auth b,
.portal-client-auth small {
  display: block;
}
.portal-client-auth b {
  font-size: 9px;
}
.portal-client-auth small {
  max-width: 210px;
  margin-top: 3px;
  color: #778d88;
  font-size: 7px;
  line-height: 1.4;
}
.portal-client-auth a {
  margin-left: auto;
  padding: 8px 10px;
  color: #ddfff0;
  background: #2f6653;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.launcher-download-card > div {
  min-width: 175px;
}
.launcher-download-card {
  flex-wrap: wrap;
}
.launcher-download-card > a:not(:first-of-type) {
  margin-left: 0;
}
.portal-client-auth a.manual-mod-link {
  margin-left: 0;
  padding-inline: 7px;
  color: #82938e;
  background: transparent;
  border: 1px solid #2a3a36;
}
.portal-message {
  padding: 13px 16px;
  color: #a8e1bd;
  background: #162b24;
  border: 1px solid #28503f;
  border-radius: 10px;
  font-size: 11px;
}
.portal-message.error {
  color: #f1aaa7;
  background: #2b1b21;
  border-color: #543039;
}
.portal-store {
  scroll-margin-top: 25px;
  margin-bottom: 80px;
  padding: 42px;
  border: 1px solid #2e3350;
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0%, rgba(93, 84, 220, 0.19), transparent 32%),
    linear-gradient(145deg, #181c31, #111426);
}
.portal-store-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.portal-store-head > div:first-child > span {
  color: #8b82ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.portal-store-head h2 {
  margin: 9px 0 7px;
  font-size: 31px;
  letter-spacing: -1px;
}
.portal-store-head p {
  max-width: 640px;
  margin: 0;
  color: #8e95af;
  font-size: 10px;
  line-height: 1.65;
}
.portal-store-head > div:last-child {
  min-width: 155px;
  padding: 14px 16px;
  border: 1px solid #393f60;
  border-radius: 11px;
  background: #101326;
  text-align: right;
}
.portal-store-head > div:last-child b {
  display: block;
  color: #bdb9ff;
  font:
    700 13px ui-monospace,
    monospace;
}
.portal-store-head > div:last-child small {
  color: #6f7691;
  font-size: 8px;
}
.portal-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 18px;
}
.portal-product {
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 12px;
  border: 1px solid #2c324d;
  border-radius: 14px;
  background: rgba(14, 17, 33, 0.78);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.portal-product:hover {
  border-color: #504a91;
  transform: translateY(-2px);
}
.portal-product-visual {
  position: relative;
  display: grid;
  min-height: 118px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, #252a45, #181c30);
}
.portal-product-visual:before {
  position: absolute;
  width: 105px;
  height: 105px;
  background: currentColor;
  border-radius: 50%;
  content: "";
  filter: blur(38px);
  opacity: 0.18;
}
.portal-product-visual span {
  position: relative;
  color: #7de6df;
  font-size: 47px;
  line-height: 1;
  text-shadow: 0 7px 25px rgba(88, 226, 216, 0.3);
}
.portal-product-visual em {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 5px 7px;
  color: #e8e9fa;
  background: rgba(8, 10, 20, 0.78);
  border: 1px solid #3b4261;
  border-radius: 6px;
  font:
    700 9px ui-monospace,
    monospace;
}
.portal-product-visual.material-iron_ingot span {
  color: #d9dfea;
}
.portal-product-visual.material-golden_apple span {
  color: #f5c65c;
}
.portal-product-visual.material-elytra span {
  color: #c798ff;
}
.portal-product-visual.material-shulker_box span {
  color: #dd79d7;
}
.portal-product-visual.material-totem_of_undying span {
  color: #7dde8c;
}
.portal-product-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 7px 10px;
}
.portal-product-copy > span {
  color: #686f8b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.portal-product-copy h3 {
  margin: 7px 0;
  font-size: 15px;
}
.portal-product-copy p {
  flex: 1;
  min-height: 46px;
  margin: 0 0 13px;
  color: #858ca6;
  font-size: 9px;
  line-height: 1.55;
}
.portal-product-copy > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.portal-product-copy > div b {
  font-size: 16px;
}
.portal-product-copy > div small {
  color: #626983;
  font-size: 7px;
}
.portal-buy-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 7px;
  padding: 11px 7px 5px;
  border-top: 1px solid #282d47;
}
.portal-buy-form label {
  min-width: 0;
}
.portal-buy-form label span {
  display: block;
  margin-bottom: 5px;
  color: #6f7690;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.portal-buy-form select {
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  color: #dcdff0;
  background: #191d31;
  border: 1px solid #303650;
  border-radius: 7px;
  font-size: 9px;
  outline: 0;
}
.portal-buy-form button,
.portal-store-login {
  grid-column: 1 / -1;
  min-height: 37px;
  color: #fff;
  background: #5b54dc;
  border: 0;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.portal-buy-form button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.portal-store-login {
  display: grid;
  margin: 11px 7px 5px;
  place-items: center;
  text-decoration: none;
}
.portal-store-unavailable {
  margin: 11px 7px 5px;
  padding: 12px;
  color: #8e95ae;
  background: #171a2c;
  border: 1px dashed #353a56;
  border-radius: 8px;
  font-size: 8px;
  text-align: center;
}
.portal-store-note {
  margin: 18px 0 0;
  color: #656d88;
  font-size: 8px;
  line-height: 1.6;
  text-align: center;
}
.portal-warehouse-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
  margin-right: 22px;
  padding: 9px 13px;
  border: 1px solid #373d5b;
  border-radius: 10px;
  background: #111426;
}
.portal-warehouse-summary > span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: #d5d2ff;
  background: #302c65;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
}
.portal-warehouse-summary b,
.portal-warehouse-summary small {
  display: block;
}
.portal-warehouse-summary b {
  font-size: 9px;
}
.portal-warehouse-summary small {
  margin-top: 3px;
  color: #747b96;
  font-size: 7px;
}
.portal-warehouse-summary code {
  color: #aba6ff;
}
.portal-footer {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #747b95;
  border-top: 1px solid #242940;
  font-size: 10px;
}

@media (max-width: 980px) {
  .commerce-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .commerce-sidebar {
    padding: 24px 12px;
  }
  .commerce-logo span:not(.brand-cube),
  .commerce-logo small,
  .commerce-nav b,
  .commerce-help {
    display: none;
  }
  .commerce-logo {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .commerce-nav a {
    justify-content: center;
    padding: 0;
  }
  .commerce-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-commerce-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-body .admin-grid,
  .project-admin-grid {
    grid-template-columns: 1fr;
  }
  .portal-auth {
    grid-template-columns: 1fr;
  }
  .portal-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .commerce-shell {
    display: block;
  }
  .commerce-sidebar {
    position: fixed;
    z-index: 30;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 62px;
    padding: 7px 12px;
    border: 0;
  }
  .commerce-logo,
  .commerce-help {
    display: none;
  }
  .commerce-nav {
    display: flex;
    justify-content: space-around;
  }
  .commerce-nav a {
    width: 52px;
    min-height: 48px;
  }
  .commerce-topbar {
    height: 65px;
    padding: 0 15px;
  }
  .commerce-user div,
  .commerce-topbar > div:first-child .topbar-kicker {
    display: none;
  }
  .app-body .dashboard,
  .app-body .narrow,
  .app-body .checkout-grid {
    width: calc(100% - 26px);
  }
  .commerce-page-head {
    min-height: 150px;
    padding: 30px 0 22px;
    align-items: flex-start;
    flex-direction: column;
  }
  .commerce-page-head h1 {
    font-size: 27px;
  }
  .project-head-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .commerce-kpis,
  .project-kpis,
  .project-commerce-grid {
    grid-template-columns: 1fr;
  }
  .quick-project-form,
  .commerce-server-card {
    grid-template-columns: 1fr;
  }
  .commerce-server-card .server-product-icon {
    display: none;
  }
  .world-settings-panel,
  .world-settings-panel form {
    align-items: stretch;
    flex-direction: column;
  }
  .portal-header,
  .portal-main,
  .portal-footer {
    width: calc(100% - 28px);
  }
  .portal-header nav {
    display: none;
  }
  .portal-hero {
    min-height: 590px;
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 70px 0;
  }
  .portal-hero h1 {
    font-size: 49px;
    letter-spacing: -3px;
  }
  .portal-hero-card {
    min-height: 160px;
  }
  .portal-server,
  .portal-server > div:last-child,
  .portal-account {
    align-items: flex-start;
    flex-direction: column;
  }
  .portal-auth {
    padding: 24px;
  }
  .portal-store {
    padding: 24px 17px;
  }
  .portal-store-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .portal-store-head > div:last-child {
    text-align: left;
  }
  .portal-products {
    grid-template-columns: 1fr;
  }
  .portal-warehouse-summary {
    width: 100%;
    margin: 0;
  }
  .portal-account > .portal-account-tools {
    width: 100%;
    grid-template-columns: 1fr;
    margin: 0;
  }
  .portal-client-auth {
    width: 100%;
  }
  .portal-auth-forms {
    grid-template-columns: 1fr;
  }
  .portal-footer {
    margin-bottom: 62px;
  }
}

/* Project website builder */
.site-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: 20px;
  align-items: start;
}
.site-builder-controls {
  display: grid;
  gap: 14px;
}
.site-builder-block {
  padding: 22px;
}
.site-builder-block-head {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.site-builder-block-head > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #344039;
  border-radius: 8px;
  color: #8eea75;
  background: #141a16;
  font-size: 10px;
  font-weight: 800;
}
.site-builder-block-head h2 {
  margin: 1px 0 4px;
  font-size: 17px;
  letter-spacing: -0.3px;
}
.site-builder-block-head p,
.site-preview-note,
.section-copy {
  margin: 0;
  color: #87928b;
  font-size: 12px;
  line-height: 1.55;
}
.site-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.site-template-card {
  position: relative;
  display: grid;
  gap: 11px;
  padding: 8px 8px 13px;
  border: 1px solid #29312c;
  border-radius: 12px;
  background: #111613;
  cursor: pointer;
  transition: 0.18s ease;
}
.site-template-card:hover {
  border-color: #465249;
  transform: translateY(-1px);
}
.site-template-card:has(input:checked) {
  border-color: #72d86b;
  box-shadow: 0 0 0 2px rgba(114, 216, 107, 0.1);
}
.site-template-card > input {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 2;
  accent-color: #72d86b;
}
.site-template-card > span:last-child {
  display: grid;
  gap: 3px;
  padding: 0 3px;
}
.site-template-card > span b {
  font-size: 13px;
}
.site-template-card > span em {
  color: #74d86e;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-template-card > span small {
  margin-top: 3px;
  color: #7e8982;
  font-size: 9px;
  line-height: 1.4;
}
.site-template-thumb {
  height: 82px;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.site-template-thumb i {
  position: absolute;
  display: block;
  height: 4px;
  border-radius: 3px;
}
.site-template-thumb i:nth-child(1) {
  top: 12px;
  left: 10px;
  width: 25px;
}
.site-template-thumb i:nth-child(2) {
  top: 32px;
  left: 10px;
  width: 52%;
  height: 7px;
}
.site-template-thumb i:nth-child(3) {
  top: 44px;
  left: 10px;
  width: 42%;
}
.site-template-thumb b {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32%;
  height: 43px;
  border-radius: 6px;
}
.template-preview-nova .site-template-thumb {
  background:
    radial-gradient(circle at 80% 20%, #4d31a5, transparent 40%), #10101b;
}
.template-preview-nova .site-template-thumb i {
  background: #a997ff;
}
.template-preview-nova .site-template-thumb b {
  border: 1px solid #493c78;
  background: rgba(23, 18, 49, 0.8);
}
.template-preview-citadel .site-template-thumb {
  border-radius: 2px;
  background:
    radial-gradient(circle at 70% 30%, #70461e, transparent 42%), #17120d;
}
.template-preview-citadel .site-template-thumb i {
  border-radius: 0;
  background: #d3a35f;
}
.template-preview-citadel .site-template-thumb b {
  border: 1px solid #9a6f39;
  border-radius: 0;
  background: #261c12;
}
.template-preview-studio .site-template-thumb {
  background: #f2f0ea;
}
.template-preview-studio .site-template-thumb i {
  border-radius: 0;
  background: #26251f;
}
.template-preview-studio .site-template-thumb i:nth-child(1) {
  background: #ff5b35;
}
.template-preview-studio .site-template-thumb b {
  border-radius: 0;
  background: #dedbd1;
}
.site-editor-fields {
  display: grid;
  gap: 13px;
}
.site-editor-fields label {
  display: grid;
  gap: 6px;
  color: #aeb8b1;
  font-size: 11px;
  font-weight: 700;
}
.site-editor-fields input,
.site-editor-fields textarea {
  width: 100%;
  padding: 11px 12px;
  color: #eef5ef;
  border: 1px solid #2c3730;
  border-radius: 8px;
  outline: none;
  background: #101512;
  font-size: 13px;
}
.site-editor-fields textarea {
  min-height: 82px;
  resize: vertical;
}
.site-editor-fields input:focus,
.site-editor-fields textarea:focus {
  border-color: #62c65f;
  box-shadow: 0 0 0 3px rgba(98, 198, 95, 0.1);
}
.site-accent-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.site-accent-picker label {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 11px 5px 9px;
  border: 1px solid #2a332e;
  border-radius: 9px;
  color: #9ba69e;
  cursor: pointer;
}
.site-accent-picker label:has(input:checked) {
  color: #eef5ef;
  border-color: #657068;
  background: #171d19;
}
.site-accent-picker input {
  position: absolute;
  opacity: 0;
}
.site-accent-picker span {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: var(--swatch);
}
.site-accent-picker b {
  font-size: 9px;
}
.site-accent-picker .accent-violet {
  --swatch: #8f72ff;
}
.site-accent-picker .accent-lime {
  --swatch: #9de548;
}
.site-accent-picker .accent-cyan {
  --swatch: #33d6d1;
}
.site-accent-picker .accent-ember {
  --swatch: #ff713f;
}
.site-accent-picker .accent-rose {
  --swatch: #f15c91;
}
.site-builder-publish {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px 13px 17px;
  border: 1px solid #35423a;
  border-radius: 12px;
  background: rgba(18, 24, 20, 0.94);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}
.site-builder-publish > div {
  display: grid;
  gap: 2px;
}
.site-builder-publish b {
  font-size: 12px;
}
.site-builder-publish span {
  color: #7f8a83;
  font-size: 10px;
}
.site-builder-publish .button {
  min-height: 38px;
  font-size: 12px;
}
.site-preview-column {
  position: sticky;
  top: 18px;
  overflow: hidden;
  border: 1px solid #28322c;
  border-radius: 14px;
  background: #0d110f;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
.site-preview-toolbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid #29312c;
  background: #161b18;
}
.site-preview-toolbar > div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.site-preview-toolbar > div:first-child span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #465049;
}
.site-preview-toolbar > div:first-child b {
  margin-left: 7px;
  color: #8e9992;
  font-size: 9px;
}
.site-preview-toolbar button {
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  color: #77827b;
  background: transparent;
  font-size: 8px;
  cursor: pointer;
}
.site-preview-toolbar button.active {
  color: #e5ebe7;
  background: #28312c;
}
.site-live-preview {
  --preview-accent: #8f72ff;
  width: 100%;
  min-height: 440px;
  padding-bottom: 24px;
  overflow: hidden;
  color: #f7f6ff;
  background:
    radial-gradient(circle at 75% 25%, #34266a, transparent 38%), #0d0d16;
  transition: 0.25s ease;
}
.site-live-preview.accent-lime {
  --preview-accent: #9de548;
}
.site-live-preview.accent-cyan {
  --preview-accent: #33d6d1;
}
.site-live-preview.accent-ember {
  --preview-accent: #ff713f;
}
.site-live-preview.accent-rose {
  --preview-accent: #f15c91;
}
.preview-announcement {
  padding: 6px;
  color: #0b0b0d;
  background: var(--preview-accent);
  text-align: center;
  font-size: 7px;
  font-weight: 800;
}
.site-live-preview > header {
  height: 47px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.site-live-preview > header > span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #0b0b0d;
  background: var(--preview-accent);
  font-size: 8px;
  font-weight: 900;
}
.site-live-preview > header b {
  font-size: 8px;
}
.site-live-preview > header nav {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 6px;
}
.site-live-preview > header i {
  width: 34px;
  height: 14px;
  border-radius: 4px;
  background: var(--preview-accent);
}
.site-live-preview > main {
  width: 78%;
  padding: 62px 0 0 34px;
}
.site-live-preview > main > small {
  color: var(--preview-accent);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.site-live-preview h2 {
  max-width: 300px;
  margin: 9px 0;
  font-size: 30px;
  line-height: 0.98;
  letter-spacing: -1.4px;
}
.site-live-preview main > p {
  max-width: 280px;
  min-height: 30px;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 8px;
  line-height: 1.5;
}
.site-live-preview main > button {
  min-height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  color: #09090c;
  background: var(--preview-accent);
  font-size: 7px;
  font-weight: 900;
}
.preview-metrics {
  display: flex;
  gap: 17px;
  margin-top: 40px;
}
.preview-metrics span {
  display: grid;
  color: rgba(255, 255, 255, 0.5);
  font-size: 6px;
}
.preview-metrics b {
  color: white;
  font-size: 13px;
}
.preview-cards {
  display: none;
}
.site-live-preview.template-citadel {
  color: #f4e5c7;
  background:
    radial-gradient(circle at 76% 28%, #603c1c, transparent 38%),
    linear-gradient(rgba(28, 20, 13, 0.92), rgba(20, 14, 10, 0.98)), #17100b;
  font-family: Georgia, serif;
}
.site-live-preview.template-citadel > header > span,
.site-live-preview.template-citadel > header i,
.site-live-preview.template-citadel main > button {
  border-radius: 0;
}
.site-live-preview.template-citadel h2 {
  letter-spacing: -0.6px;
}
.site-live-preview.template-citadel > main {
  padding-top: 54px;
  border-left: 1px solid rgba(211, 163, 95, 0.4);
}
.site-live-preview.template-studio {
  color: #181815;
  background: #f1efe8;
}
.site-live-preview.template-studio .preview-announcement {
  color: white;
}
.site-live-preview.template-studio > header {
  border-color: #cbc8bd;
}
.site-live-preview.template-studio > header > span,
.site-live-preview.template-studio > header i,
.site-live-preview.template-studio main > button {
  border-radius: 0;
}
.site-live-preview.template-studio > header nav,
.site-live-preview.template-studio main > p,
.site-live-preview.template-studio .preview-metrics span {
  color: #6b6960;
}
.site-live-preview.template-studio .preview-metrics b {
  color: #181815;
}
.site-live-preview.mobile {
  width: 235px;
  min-height: 500px;
  margin: 16px auto;
  border-radius: 18px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
}
.site-live-preview.mobile > header {
  padding: 0 14px;
}
.site-live-preview.mobile > header nav {
  display: none;
}
.site-live-preview.mobile > main {
  width: 100%;
  padding: 54px 22px 0;
}
.site-live-preview.mobile h2 {
  font-size: 27px;
}
.site-preview-note {
  padding: 12px 16px 15px;
  text-align: center;
}
.site-operations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.site-operations-grid > div {
  padding: 22px;
}
.owner-launcher-list {
  display: grid;
  gap: 7px;
  margin: 18px 0 14px;
}
.owner-launcher-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border: 1px solid #2a332e;
  border-radius: 8px;
  background: #121714;
}
.owner-launcher-list b {
  font-size: 12px;
}
.owner-launcher-list span {
  color: #7e8a82;
  font-size: 10px;
}
.commerce-link-button.full {
  width: 100%;
  justify-content: center;
}

/* Multi-page player website */
body.player-site {
  --player-accent: #9276ff;
  --player-accent-rgb: 146, 118, 255;
  --player-bg: #090a10;
  --player-surface: #11131b;
  --player-surface-2: #171a25;
  --player-line: rgba(255, 255, 255, 0.1);
  --player-text: #f6f6fb;
  --player-muted: #9699aa;
  --player-radius: 18px;
  margin: 0;
  color: var(--player-text);
  background: var(--player-bg);
  font-family:
    Inter,
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.45;
}
body.player-accent-lime {
  --player-accent: #a0e84c;
  --player-accent-rgb: 160, 232, 76;
}
body.player-accent-cyan {
  --player-accent: #36d6d0;
  --player-accent-rgb: 54, 214, 208;
}
body.player-accent-ember {
  --player-accent: #ff7245;
  --player-accent-rgb: 255, 114, 69;
}
body.player-accent-rose {
  --player-accent: #f06496;
  --player-accent-rgb: 240, 100, 150;
}
.player-site button,
.player-site input,
.player-site select {
  font: inherit;
}
.player-announcement {
  min-height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 5px 20px;
  color: #0b0c10;
  background: var(--player-accent);
  font-size: 11px;
  font-weight: 750;
}
.player-announcement a {
  padding-left: 14px;
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  font-weight: 900;
}
.player-header {
  width: min(1240px, calc(100% - 48px));
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  margin: auto;
  border-bottom: 1px solid var(--player-line);
}
.player-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.25px;
}
.player-brand > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #090a0c;
  background: var(--player-accent);
  box-shadow: 0 0 24px rgba(var(--player-accent-rgb), 0.18);
  font-size: 12px;
}
.player-header > nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.player-header > nav a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--player-muted);
  font-size: 12px;
  font-weight: 650;
  transition: 0.18s ease;
}
.player-header > nav a:hover,
.player-header > nav a.active {
  color: var(--player-text);
  background: rgba(var(--player-accent-rgb), 0.1);
}
.player-account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  padding: 6px 10px 6px 7px;
  border: 1px solid var(--player-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 11px;
}
.player-account-link > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #090a0c;
  background: var(--player-accent);
  font-size: 9px;
  font-weight: 900;
}
.player-menu-button {
  display: none;
}
.player-main {
  width: min(1180px, calc(100% - 48px));
  min-height: 620px;
  margin: auto;
  padding: 72px 0 100px;
}
.player-page-home {
  padding-top: 50px;
}
.player-overline {
  display: block;
  color: var(--player-accent);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.player-primary,
.player-secondary {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  transition: 0.18s ease;
}
.player-primary {
  color: #090a0d;
  background: var(--player-accent);
  box-shadow: 0 10px 35px rgba(var(--player-accent-rgb), 0.18);
}
.player-secondary {
  color: var(--player-text);
  border-color: var(--player-line);
  background: rgba(255, 255, 255, 0.03);
}
.player-primary:hover,
.player-secondary:hover {
  transform: translateY(-2px);
}
.player-hero {
  min-height: 510px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  align-items: center;
  gap: 70px;
  position: relative;
}
.player-hero::before {
  content: "";
  width: 560px;
  height: 560px;
  position: absolute;
  top: -170px;
  left: -210px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--player-accent-rgb), 0.17),
    transparent 68%
  );
  pointer-events: none;
}
.player-hero-copy h1 {
  max-width: 760px;
  margin: 14px 0 20px;
  font-size: clamp(52px, 7.2vw, 94px);
  line-height: 0.93;
  letter-spacing: -0.065em;
}
.player-hero-copy > p {
  max-width: 620px;
  margin: 0;
  color: var(--player-muted);
  font-size: 17px;
  line-height: 1.65;
}
.player-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}
.player-hero-console {
  overflow: hidden;
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  background: linear-gradient(
    145deg,
    rgba(var(--player-accent-rgb), 0.09),
    rgba(255, 255, 255, 0.015)
  );
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}
.player-hero-console > div {
  height: 43px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  border-bottom: 1px solid var(--player-line);
}
.player-hero-console > div span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #434653;
}
.player-hero-console > div small {
  margin-left: auto;
  color: var(--player-muted);
  font:
    9px ui-monospace,
    monospace;
}
.player-hero-console section {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
}
.player-hero-console section > small {
  color: var(--player-muted);
  font-size: 10px;
}
.player-hero-console section > b {
  margin: 7px 0;
  color: var(--player-accent);
  font-size: 68px;
  line-height: 1;
  letter-spacing: -5px;
}
.player-hero-console section > b em {
  color: var(--player-muted);
  font-size: 24px;
  font-style: normal;
  letter-spacing: -1px;
}
.player-hero-console section > span {
  color: var(--player-muted);
  font-size: 11px;
}
.player-hero-console footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--player-line);
  color: var(--player-muted);
  font-size: 9px;
}
.player-hero-console footer i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #61dc78;
  box-shadow: 0 0 10px #61dc78;
}
.player-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 16px 0 105px;
  border-block: 1px solid var(--player-line);
}
.player-trust-row > div {
  display: grid;
  gap: 3px;
  padding: 25px 24px;
  border-right: 1px solid var(--player-line);
}
.player-trust-row > div:last-child {
  border-right: 0;
}
.player-trust-row b {
  font-size: 24px;
  letter-spacing: -1px;
}
.player-trust-row span {
  color: var(--player-muted);
  font-size: 10px;
}
.player-home-section {
  margin-top: 96px;
}
.player-home-section > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.player-home-section h2,
.player-home-journey h2,
.player-help-banner h2,
.player-stock-card h2 {
  margin: 6px 0 0;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.player-home-section > header > a {
  color: var(--player-muted);
  font-size: 11px;
  font-weight: 750;
}
.player-server-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.player-server-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 26px;
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  background: var(--player-surface);
}
.player-server-card.compact {
  grid-template-columns: 1fr;
  min-height: 270px;
  padding: 22px;
}
.player-server-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
}
.player-server-status small {
  color: var(--player-muted);
  font-size: 9px;
}
.player-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #656875;
}
.player-status-dot.online {
  background: #65dd7a;
  box-shadow: 0 0 9px rgba(101, 221, 122, 0.65);
}
.player-server-card h2 {
  margin: 7px 0;
  font-size: 23px;
  letter-spacing: -0.7px;
}
.player-server-card p {
  margin: 0;
  color: var(--player-muted);
  font-size: 10px;
}
.player-server-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}
.player-server-card.compact .player-server-actions {
  align-items: stretch;
  margin-top: auto;
}
.player-server-actions button,
.player-server-actions a {
  min-height: 43px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid var(--player-line);
  border-radius: 9px;
  color: var(--player-text);
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}
.player-server-actions button span {
  color: var(--player-muted);
  font-size: 8px;
}
.player-server-actions button b {
  font:
    10px ui-monospace,
    monospace;
}
.player-server-actions a {
  color: #090a0c;
  border-color: var(--player-accent);
  background: var(--player-accent);
  font-size: 10px;
  font-weight: 800;
}
.player-home-journey {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 70px;
  align-items: center;
  margin-top: 110px;
  padding: 58px;
  border: 1px solid var(--player-line);
  border-radius: calc(var(--player-radius) + 4px);
  background: linear-gradient(
    135deg,
    rgba(var(--player-accent-rgb), 0.1),
    var(--player-surface) 54%
  );
}
.player-home-journey > div > p {
  max-width: 550px;
  margin: 16px 0 24px;
  color: var(--player-muted);
  font-size: 12px;
  line-height: 1.65;
}
.player-home-journey ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.player-home-journey li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--player-line);
}
.player-home-journey li:last-child {
  border: 0;
}
.player-home-journey li > span {
  color: var(--player-accent);
  font:
    10px ui-monospace,
    monospace;
}
.player-home-journey li div {
  display: grid;
  gap: 2px;
}
.player-home-journey li b {
  font-size: 13px;
}
.player-home-journey li small {
  color: var(--player-muted);
  font-size: 9px;
}
.player-page-head {
  max-width: 810px;
  margin-bottom: 50px;
}
.player-page-head h1 {
  margin: 12px 0 18px;
  font-size: clamp(48px, 7vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.player-page-head p {
  max-width: 700px;
  margin: 0;
  color: var(--player-muted);
  font-size: 15px;
  line-height: 1.65;
}
.player-server-list {
  display: grid;
  gap: 11px;
}
.player-server-list .player-server-card > div:nth-child(2) {
  align-self: center;
}
.player-help-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 55px;
  padding: 37px;
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  background: rgba(var(--player-accent-rgb), 0.08);
}
.player-help-banner h2 {
  font-size: 26px;
}
.player-help-banner p {
  margin: 8px 0 0;
  color: var(--player-muted);
  font-size: 11px;
}
.player-message {
  margin-bottom: 18px;
  padding: 13px 15px;
  border: 1px solid rgba(101, 221, 122, 0.3);
  border-radius: 10px;
  color: #bff6c8;
  background: rgba(101, 221, 122, 0.08);
  font-size: 11px;
}
.player-message.error {
  color: #ffc0bd;
  border-color: rgba(255, 102, 96, 0.3);
  background: rgba(255, 102, 96, 0.08);
}
.player-store-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.player-store-sidebar {
  position: sticky;
  top: 20px;
  overflow: hidden;
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  background: var(--player-surface);
}
.player-store-sidebar > span {
  display: block;
  padding: 16px 17px 9px;
  color: var(--player-muted);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.player-store-sidebar nav {
  display: grid;
  padding: 5px 8px 12px;
}
.player-store-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 9px;
  color: var(--player-muted);
}
.player-store-sidebar nav a.active {
  color: var(--player-text);
  background: rgba(var(--player-accent-rgb), 0.12);
}
.player-store-sidebar nav a div {
  display: grid;
  gap: 1px;
}
.player-store-sidebar nav b {
  font-size: 11px;
}
.player-store-sidebar nav small {
  color: var(--player-muted);
  font-size: 8px;
}
.player-store-sidebar > div {
  display: grid;
  gap: 2px;
  padding: 15px 17px;
  border-top: 1px solid var(--player-line);
  background: rgba(255, 255, 255, 0.02);
}
.player-store-sidebar > div b {
  color: var(--player-accent);
  font:
    13px ui-monospace,
    monospace;
}
.player-store-sidebar > div small {
  color: var(--player-muted);
  font-size: 8px;
}
.player-store-main > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.player-store-main > header h2 {
  margin: 5px 0;
  font-size: 28px;
  letter-spacing: -1px;
}
.player-store-main > header p {
  margin: 0;
  color: var(--player-muted);
  font-size: 10px;
}
.player-site .status {
  border: 1px solid var(--player-line);
  color: var(--player-muted);
  background: var(--player-surface);
}
.player-product-list {
  display: grid;
  gap: 9px;
}
.player-product {
  min-height: 122px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--player-line);
  border-radius: 14px;
  background: var(--player-surface);
  transition: 0.18s ease;
}
.player-product:hover {
  border-color: rgba(var(--player-accent-rgb), 0.38);
  transform: translateY(-1px);
}
.player-product-visual {
  height: 86px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(
    145deg,
    rgba(var(--player-accent-rgb), 0.14),
    rgba(255, 255, 255, 0.025)
  );
}
.player-product-visual > span {
  min-width: 44px;
  min-height: 44px;
  position: relative;
  display: grid;
  place-items: center;
}
.player-product-visual img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}
.player-product-visual img + img {
  position: absolute;
  right: -10px;
  bottom: -7px;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
}
.player-product-visual img:nth-child(3) {
  right: auto;
  bottom: -5px;
  left: -9px;
}
.player-product-visual em {
  position: absolute;
  right: 6px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--player-text);
  background: rgba(5, 6, 9, 0.76);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}
.player-product-copy h3 {
  margin: 4px 0;
  font-size: 15px;
  letter-spacing: -0.25px;
}
.player-product-copy p {
  margin: 0 0 7px;
  color: var(--player-muted);
  font-size: 9px;
}
.player-product-copy > small {
  display: block;
  max-width: 500px;
  overflow: hidden;
  color: color-mix(in srgb, var(--player-muted) 75%, transparent);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-product-buy {
  min-width: 145px;
  display: grid;
  justify-items: end;
  gap: 10px;
}
.player-product-buy > b {
  font-size: 18px;
  letter-spacing: -0.6px;
}
.player-product-buy form {
  display: flex;
  gap: 5px;
}
.player-product-buy select,
.player-product-buy button,
.player-product-link {
  min-height: 35px;
  padding: 0 10px;
  border: 1px solid var(--player-line);
  border-radius: 8px;
  color: var(--player-text);
  background: var(--player-surface-2);
  font-size: 9px;
}
.player-product-buy button,
.player-product-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #090a0c;
  border-color: var(--player-accent);
  background: var(--player-accent);
  font-weight: 850;
  cursor: pointer;
}
.player-product-disabled {
  color: var(--player-muted);
  font-size: 9px;
}
.player-store-note {
  margin: 15px 2px 0;
  color: var(--player-muted);
  font-size: 9px;
}
.player-store-note code {
  color: var(--player-accent);
}
.player-empty {
  padding: 45px 20px;
  border: 1px dashed var(--player-line);
  border-radius: var(--player-radius);
  color: var(--player-muted);
  text-align: center;
  font-size: 11px;
}
.player-launcher-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
}
.player-launcher-downloads {
  display: grid;
  gap: 9px;
}
.player-launcher-downloads > a {
  min-height: 112px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  background: var(--player-surface);
  transition: 0.18s ease;
}
.player-launcher-downloads > a:hover {
  border-color: rgba(var(--player-accent-rgb), 0.5);
  transform: translateX(3px);
}
.player-platform-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #08090c;
  background: var(--player-accent);
  font-size: 21px;
  font-weight: 850;
}
.player-launcher-downloads > a div {
  display: grid;
  gap: 2px;
}
.player-launcher-downloads small,
.player-launcher-downloads em {
  color: var(--player-muted);
  font-size: 9px;
  font-style: normal;
}
.player-launcher-downloads b {
  font-size: 16px;
}
.player-launcher-downloads > a > i {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid var(--player-line);
  border-radius: 50%;
  color: var(--player-accent);
  font-style: normal;
}
.player-launcher-layout > aside {
  padding: 31px;
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  background: linear-gradient(
    145deg,
    rgba(var(--player-accent-rgb), 0.11),
    var(--player-surface)
  );
}
.player-launcher-layout > aside ol {
  display: grid;
  gap: 0;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}
.player-launcher-layout > aside li {
  display: flex;
  gap: 13px;
  padding: 18px 0;
  border-bottom: 1px solid var(--player-line);
}
.player-launcher-layout > aside li:last-child {
  border: 0;
}
.player-launcher-layout > aside li > b {
  color: var(--player-accent);
  font:
    10px ui-monospace,
    monospace;
}
.player-launcher-layout > aside li div {
  display: grid;
  gap: 4px;
}
.player-launcher-layout strong {
  font-size: 13px;
}
.player-launcher-layout li small {
  color: var(--player-muted);
  font-size: 9px;
}
.player-launcher-note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-top: 18px;
  padding: 17px 21px;
  border: 1px solid var(--player-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}
.player-launcher-note span {
  color: var(--player-accent);
  font-size: 10px;
  font-weight: 800;
}
.player-launcher-note p {
  margin: 0;
  color: var(--player-muted);
  font-size: 9px;
}
.player-launcher-note a {
  font-size: 10px;
  font-weight: 750;
}
.player-account-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}
.player-profile-card,
.player-stock-card {
  padding: 32px;
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  background: var(--player-surface);
}
.player-profile-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 16px;
}
.player-profile-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  grid-row: span 1;
  place-items: center;
  border-radius: 18px;
  color: #090a0c;
  background: var(--player-accent);
  font-size: 22px;
  font-weight: 900;
}
.player-profile-card > div > small {
  color: var(--player-muted);
  font-size: 9px;
}
.player-profile-card h2 {
  margin: 3px 0;
  font-size: 23px;
}
.player-profile-card p {
  margin: 0;
  color: var(--player-muted);
  font-size: 10px;
}
.player-profile-card dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 30px 0;
  border-block: 1px solid var(--player-line);
}
.player-profile-card dl > div {
  display: grid;
  gap: 5px;
  padding: 18px 14px;
  border-right: 1px solid var(--player-line);
}
.player-profile-card dl > div:first-child {
  padding-left: 0;
}
.player-profile-card dl > div:last-child {
  border: 0;
}
.player-profile-card dt {
  color: var(--player-muted);
  font-size: 8px;
}
.player-profile-card dd {
  margin: 0;
  font-size: 11px;
  font-weight: 750;
}
.player-profile-card dd i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #65dd7a;
}
.player-profile-card form {
  grid-column: 1 / -1;
}
.player-profile-card form button {
  padding: 9px 13px;
  border: 1px solid var(--player-line);
  border-radius: 8px;
  color: var(--player-muted);
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}
.player-stock-card > b {
  display: block;
  margin-top: 24px;
  color: var(--player-accent);
  font-size: 70px;
  line-height: 0.9;
  letter-spacing: -5px;
}
.player-stock-card h2 {
  margin-top: 7px;
  font-size: 23px;
}
.player-stock-card p {
  margin: 13px 0 20px;
  color: var(--player-muted);
  font-size: 10px;
  line-height: 1.6;
}
.player-stock-card code {
  display: block;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid var(--player-line);
  border-radius: 8px;
  color: var(--player-accent);
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  font-size: 12px;
}
.player-stock-card > a {
  font-size: 10px;
  font-weight: 800;
}
.player-auth-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 18px;
}
.player-auth-benefits,
.player-auth-forms {
  border: 1px solid var(--player-line);
  border-radius: var(--player-radius);
  background: var(--player-surface);
}
.player-auth-benefits {
  padding: 32px;
  background: linear-gradient(
    145deg,
    rgba(var(--player-accent-rgb), 0.12),
    var(--player-surface)
  );
}
.player-auth-benefits h2 {
  margin: 11px 0 28px;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -1px;
}
.player-auth-benefits ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.player-auth-benefits li {
  display: flex;
  gap: 11px;
  padding: 15px 0;
  border-bottom: 1px solid var(--player-line);
}
.player-auth-benefits li:last-child {
  border: 0;
}
.player-auth-benefits li > i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #08090b;
  background: var(--player-accent);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.player-auth-benefits li span {
  display: grid;
  gap: 3px;
}
.player-auth-benefits li b {
  font-size: 11px;
}
.player-auth-benefits li small {
  color: var(--player-muted);
  font-size: 8px;
}
.player-auth-forms {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  overflow: hidden;
}
.player-auth-forms form {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 30px;
}
.player-auth-forms form + form {
  border-left: 1px solid var(--player-line);
  background: rgba(255, 255, 255, 0.018);
}
.player-auth-forms form > span {
  color: var(--player-accent);
  font-size: 9px;
  font-weight: 800;
}
.player-auth-forms h2 {
  margin: -3px 0 8px;
  font-size: 21px;
}
.player-auth-forms label {
  display: grid;
  gap: 5px;
  color: var(--player-muted);
  font-size: 9px;
  font-weight: 700;
}
.player-auth-forms input {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--player-line);
  border-radius: 8px;
  outline: none;
  color: var(--player-text);
  background: rgba(0, 0, 0, 0.16);
  font-size: 11px;
}
.player-auth-forms input:focus {
  border-color: var(--player-accent);
  box-shadow: 0 0 0 3px rgba(var(--player-accent-rgb), 0.1);
}
.player-auth-forms button {
  min-height: 42px;
  margin-top: 3px;
  border: 0;
  border-radius: 8px;
  color: #08090b;
  background: var(--player-accent);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.player-footer {
  width: min(1240px, calc(100% - 48px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: start;
  margin: auto;
  padding: 38px 0 45px;
  border-top: 1px solid var(--player-line);
}
.player-footer > div p {
  max-width: 270px;
  margin: 12px 0 0;
  color: var(--player-muted);
  font-size: 9px;
}
.player-footer > nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 26px;
}
.player-footer > nav a {
  color: var(--player-muted);
  font-size: 9px;
}
.player-footer > small {
  justify-self: end;
  max-width: 310px;
  color: var(--player-muted);
  text-align: right;
  font-size: 8px;
  line-height: 1.6;
}

/* Citadel is framed, warm and world-first. */
body.player-template-citadel {
  --player-bg: #14100c;
  --player-surface: #1e1711;
  --player-surface-2: #281e15;
  --player-line: rgba(218, 176, 111, 0.22);
  --player-text: #f4e6ca;
  --player-muted: #ad9877;
  --player-radius: 2px;
  background:
    linear-gradient(rgba(20, 16, 12, 0.93), rgba(20, 16, 12, 0.97)),
    repeating-linear-gradient(
      90deg,
      transparent 0 78px,
      rgba(218, 176, 111, 0.025) 78px 79px
    ),
    #14100c;
}
.player-template-citadel h1,
.player-template-citadel h2,
.player-template-citadel h3,
.player-template-citadel .player-brand b {
  font-family: Georgia, "Times New Roman", serif;
}
.player-template-citadel .player-header {
  width: min(1180px, calc(100% - 70px));
  min-height: 88px;
  border-color: rgba(218, 176, 111, 0.28);
}
.player-template-citadel .player-main {
  width: min(1120px, calc(100% - 70px));
}
.player-template-citadel .player-brand > span,
.player-template-citadel .player-account-link,
.player-template-citadel .player-header > nav a,
.player-template-citadel .player-primary,
.player-template-citadel .player-secondary,
.player-template-citadel .player-platform-icon,
.player-template-citadel .player-product,
.player-template-citadel .player-product-visual,
.player-template-citadel .player-server-actions button,
.player-template-citadel .player-server-actions a,
.player-template-citadel .player-auth-forms input,
.player-template-citadel .player-auth-forms button {
  border-radius: 0;
}
.player-template-citadel .player-hero {
  min-height: 560px;
  grid-template-columns: minmax(0, 1fr) 390px;
  border-inline: 1px solid rgba(218, 176, 111, 0.14);
  padding-inline: 60px;
}
.player-template-citadel .player-hero-copy h1 {
  font-size: clamp(54px, 7vw, 88px);
  letter-spacing: -0.035em;
}
.player-template-citadel .player-hero::before {
  left: auto;
  right: -170px;
  background: radial-gradient(
    circle,
    rgba(var(--player-accent-rgb), 0.14),
    transparent 68%
  );
}
.player-template-citadel .player-hero-console,
.player-template-citadel .player-home-journey {
  box-shadow: inset 0 0 0 5px rgba(218, 176, 111, 0.025);
}
.player-template-citadel .player-overline {
  letter-spacing: 0.18em;
}
.player-template-citadel .player-trust-row {
  border-color: rgba(218, 176, 111, 0.3);
}
.player-template-citadel .player-page-head {
  padding-left: 30px;
  border-left: 1px solid var(--player-accent);
}
.player-template-citadel .player-page-head h1 {
  letter-spacing: -0.03em;
}
.player-template-citadel .player-footer {
  width: min(1180px, calc(100% - 70px));
}

/* Studio is editorial, bright and intentionally square. */
body.player-template-studio {
  --player-bg: #f2f0ea;
  --player-surface: #fbfaf6;
  --player-surface-2: #e7e4dc;
  --player-line: rgba(26, 26, 22, 0.18);
  --player-text: #1a1a17;
  --player-muted: #6f6e66;
  --player-radius: 0px;
  color: var(--player-text);
  background: var(--player-bg);
}
.player-template-studio .player-announcement {
  color: white;
}
.player-template-studio .player-header {
  width: 100%;
  min-height: 82px;
  padding: 0 max(36px, calc((100vw - 1240px) / 2));
  border-color: #1a1a17;
}
.player-template-studio .player-brand > span,
.player-template-studio .player-account-link > span,
.player-template-studio .player-header > nav a,
.player-template-studio .player-account-link,
.player-template-studio .player-primary,
.player-template-studio .player-secondary,
.player-template-studio .player-hero-console,
.player-template-studio .player-product,
.player-template-studio .player-product-visual,
.player-template-studio .player-platform-icon,
.player-template-studio .player-launcher-downloads > a > i,
.player-template-studio .player-auth-benefits li > i,
.player-template-studio .player-auth-forms input,
.player-template-studio .player-auth-forms button,
.player-template-studio .player-stock-card code {
  border-radius: 0;
}
.player-template-studio .player-header > nav a.active {
  color: var(--player-bg);
  background: var(--player-text);
}
.player-template-studio .player-hero {
  grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.55fr);
  min-height: 540px;
}
.player-template-studio .player-hero::before {
  width: 420px;
  height: 420px;
  top: 20px;
  right: 0;
  left: auto;
  border-radius: 0;
  background: var(--player-accent);
  opacity: 0.075;
}
.player-template-studio .player-hero-copy h1 {
  color: var(--player-text);
  font-size: clamp(62px, 8.4vw, 112px);
  font-weight: 780;
  letter-spacing: -0.075em;
}
.player-template-studio .player-primary,
.player-template-studio .player-server-actions a,
.player-template-studio .player-product-buy button,
.player-template-studio .player-product-link,
.player-template-studio .player-auth-forms button {
  color: white;
}
.player-template-studio .player-hero-console {
  border-color: #1a1a17;
  background: var(--player-surface);
  box-shadow: 12px 12px 0 var(--player-text);
}
.player-template-studio .player-hero-console section > b {
  color: var(--player-text);
}
.player-template-studio .player-trust-row {
  border-color: #1a1a17;
}
.player-template-studio .player-trust-row > div {
  border-color: #1a1a17;
}
.player-template-studio .player-home-section > header,
.player-template-studio .player-store-main > header {
  padding-bottom: 15px;
  border-bottom: 1px solid #1a1a17;
}
.player-template-studio .player-page-head {
  max-width: 960px;
  display: grid;
  grid-template-columns: 130px 1fr;
  column-gap: 28px;
  align-items: start;
}
.player-template-studio .player-page-head .player-overline {
  padding-top: 13px;
}
.player-template-studio .player-page-head h1,
.player-template-studio .player-page-head p {
  grid-column: 2;
}
.player-template-studio .player-page-head h1 {
  margin-top: 0;
  color: var(--player-text);
}
.player-template-studio .player-product:hover,
.player-template-studio .player-launcher-downloads > a:hover {
  border-color: #1a1a17;
  box-shadow: 5px 5px 0 var(--player-accent);
}
.player-template-studio .player-footer {
  border-color: #1a1a17;
}

@media (max-width: 1080px) {
  .site-builder {
    grid-template-columns: 1fr;
  }
  .site-preview-column {
    position: static;
    order: -1;
  }
  .site-live-preview {
    min-height: 390px;
  }
  .player-hero {
    gap: 35px;
  }
  .player-server-grid {
    grid-template-columns: 1fr 1fr;
  }
  .player-home-journey {
    gap: 35px;
    padding: 40px;
  }
  .player-auth-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-template-grid,
  .site-operations-grid {
    grid-template-columns: 1fr;
  }
  .site-accent-picker {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-builder-publish {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }
  .site-live-preview {
    min-height: 360px;
  }
  .site-live-preview > main {
    padding-top: 42px;
  }
  .site-live-preview h2 {
    font-size: 25px;
  }
  .player-announcement {
    justify-content: space-between;
    font-size: 9px;
  }
  .player-header,
  .player-template-citadel .player-header {
    width: calc(100% - 30px);
    min-height: 65px;
    grid-template-columns: 1fr auto;
  }
  .player-template-studio .player-header {
    width: 100%;
    padding: 0 15px;
  }
  .player-header > nav {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 8px 0 14px;
    border-top: 1px solid var(--player-line);
  }
  .player-header.menu-open > nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .player-account-link {
    display: none;
  }
  .player-menu-button {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid var(--player-line);
    border-radius: 8px;
    color: var(--player-text);
    background: var(--player-surface);
  }
  .player-main,
  .player-template-citadel .player-main {
    width: calc(100% - 30px);
    padding: 48px 0 70px;
  }
  .player-page-home {
    padding-top: 28px;
  }
  .player-hero,
  .player-template-citadel .player-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 35px 0;
    border: 0;
  }
  .player-hero-copy h1,
  .player-template-studio .player-hero-copy h1 {
    font-size: clamp(46px, 15vw, 70px);
  }
  .player-hero-copy > p {
    font-size: 13px;
  }
  .player-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .player-hero-console section {
    min-height: 190px;
  }
  .player-trust-row {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 75px;
  }
  .player-trust-row > div:nth-child(2) {
    border-right: 0;
  }
  .player-trust-row > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--player-line);
  }
  .player-server-grid {
    grid-template-columns: 1fr;
  }
  .player-home-journey,
  .player-launcher-layout,
  .player-account-grid {
    grid-template-columns: 1fr;
  }
  .player-home-journey {
    margin-top: 75px;
    padding: 28px;
  }
  .player-page-head,
  .player-template-studio .player-page-head {
    display: block;
    margin-bottom: 35px;
    padding: 0;
    border: 0;
  }
  .player-page-head h1,
  .player-template-studio .player-page-head h1 {
    margin-top: 10px;
    font-size: clamp(43px, 15vw, 67px);
  }
  .player-page-head p {
    font-size: 12px;
  }
  .player-server-card {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 21px;
  }
  .player-server-actions {
    align-items: stretch;
  }
  .player-help-banner {
    align-items: stretch;
    flex-direction: column;
    padding: 27px;
  }
  .player-store-layout {
    grid-template-columns: 1fr;
  }
  .player-store-sidebar {
    position: static;
  }
  .player-store-sidebar nav {
    display: flex;
    overflow-x: auto;
  }
  .player-store-sidebar nav a {
    min-width: 160px;
  }
  .player-product {
    grid-template-columns: 74px 1fr;
    gap: 13px;
  }
  .player-product-visual {
    height: 74px;
  }
  .player-product-buy {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .player-product-buy form {
    margin-left: auto;
  }
  .player-product-copy > small {
    white-space: normal;
  }
  .player-launcher-note {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .player-profile-card,
  .player-stock-card {
    padding: 24px;
  }
  .player-profile-card dl {
    grid-template-columns: 1fr;
  }
  .player-profile-card dl > div,
  .player-profile-card dl > div:first-child {
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid var(--player-line);
  }
  .player-auth-forms {
    grid-template-columns: 1fr;
  }
  .player-auth-forms form + form {
    border-top: 1px solid var(--player-line);
    border-left: 0;
  }
  .player-footer,
  .player-template-citadel .player-footer {
    width: calc(100% - 30px);
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .player-footer > small {
    justify-self: start;
    text-align: left;
  }
}

/* Dense product management and Minecraft item builder */
.store-catalog-table {
  margin: 0;
  padding: 0;
  overflow: visible;
}
.store-table-head {
  padding: 20px 22px 17px;
  margin: 0;
}
.store-table-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.store-create-actions {
  display: flex;
  gap: 7px;
}
.catalog-table-labels,
.catalog-table-row {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.35fr) minmax(230px, 1fr)
    105px 90px 36px;
  align-items: center;
  gap: 16px;
}
.catalog-table-labels {
  padding: 9px 22px;
  color: #9599a7;
  background: #f7f8fb;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.catalog-table-row {
  position: relative;
  min-height: 72px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
}
.catalog-table-row:last-child {
  border-bottom: 0;
}
.catalog-table-row.archived {
  opacity: 0.58;
}
.catalog-product-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
}
.catalog-product-cell > div {
  display: grid;
  min-width: 0;
}
.catalog-product-cell b {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-product-cell small {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-kind {
  margin-bottom: 2px;
  color: #767bcc;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.catalog-row-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: #f0f2f7;
  border: 1px solid #e1e4ec;
  border-radius: 9px;
}
.catalog-row-visual img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  object-position: top;
  image-rendering: pixelated;
}
.catalog-row-visual.bundle img {
  width: 25px;
  height: 25px;
  margin-left: -10px;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
}
.catalog-row-visual.bundle img:first-child {
  margin-left: 5px;
}
.catalog-composition {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.catalog-composition span,
.catalog-composition em {
  padding: 4px 6px;
  color: #5e6372;
  background: #f4f5f8;
  border-radius: 5px;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}
.catalog-row-price {
  display: grid;
}
.catalog-row-price b {
  font-size: 12px;
}
.catalog-row-price small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}
.catalog-row-status {
  justify-self: start;
  padding: 5px 7px;
  color: #777b89;
  background: #eff0f3;
  border-radius: 10px;
  font-size: 8px;
  font-weight: 800;
}
.catalog-row-status.active {
  color: #377150;
  background: #e9f6ee;
}
.catalog-row-actions {
  position: relative;
  justify-self: end;
}
.catalog-row-actions > summary {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #747986;
  background: #f5f6f8;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
}
.catalog-row-actions > summary::-webkit-details-marker {
  display: none;
}
.catalog-row-menu {
  position: absolute;
  z-index: 9;
  top: 38px;
  right: 0;
  width: 310px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 18px 50px rgba(28, 34, 56, 0.18);
}
.catalog-row-menu form:first-child {
  display: grid;
  gap: 8px;
}
.catalog-row-menu label,
.store-builder-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}
.catalog-row-menu input,
.catalog-row-menu textarea,
.store-builder-form input,
.store-builder-form textarea {
  width: 100%;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: 11px inherit;
  resize: vertical;
}
.catalog-danger {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  color: #a04949;
  background: #fff4f4;
  border: 0;
  border-radius: 7px;
  font-size: 9px;
  cursor: pointer;
}
.store-builder-dialog {
  width: min(1120px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 30px 100px rgba(13, 18, 37, 0.35);
}
.store-builder-dialog::backdrop {
  background: rgba(20, 24, 38, 0.58);
  backdrop-filter: blur(3px);
}
.store-builder-dialog > form > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line);
}
.store-builder-dialog header span {
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
}
.store-builder-dialog header h2 {
  margin: 3px 0 0;
  font-size: 18px;
}
.store-builder-dialog header > button {
  width: 34px;
  height: 34px;
  color: #747986;
  background: #f2f3f6;
  border: 0;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
}
.store-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 590px;
}
.store-builder-layout > div:first-child {
  min-width: 0;
  padding: 17px;
  border-right: 1px solid var(--line);
}
.store-builder-form {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 17px;
  background: #fafbfc;
}
.builder-selection-empty {
  display: flex;
  align-items: center;
  min-height: 60px;
  gap: 10px;
  padding: 10px;
  color: var(--muted);
  background: #fff;
  border: 1px dashed #cfd3df;
  border-radius: 9px;
  font-size: 10px;
}
.builder-selection-empty img,
.bundle-selected-item img {
  width: 36px;
  height: 36px;
  object-fit: cover;
  object-position: top;
  image-rendering: pixelated;
}
.builder-selection-empty span,
.builder-selection-empty b,
.builder-selection-empty small {
  display: block;
}
.builder-selection-empty small {
  margin-top: 3px;
  color: var(--muted);
  font:
    8px ui-monospace,
    monospace;
}
.minecraft-picker-search {
  display: flex;
  align-items: center;
  gap: 12px;
}
.minecraft-picker-search input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 11px inherit;
}
.minecraft-picker-search span {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}
.minecraft-picker-filters {
  display: flex;
  gap: 5px;
  margin: 10px 0;
  overflow-x: auto;
}
.minecraft-picker-filters button {
  padding: 7px 9px;
  color: #6f7481;
  background: #f4f5f8;
  border: 1px solid transparent;
  border-radius: 7px;
  font: 750 8px inherit;
  white-space: nowrap;
  cursor: pointer;
}
.minecraft-picker-filters button.active {
  color: var(--primary);
  background: #f0f1ff;
  border-color: #d7d9ff;
}
.minecraft-picker-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 5px;
  height: 492px;
  overflow-y: auto;
}
.minecraft-picker-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.minecraft-picker-item:hover,
.minecraft-picker-item.selected {
  background: #f5f6ff;
  border-color: #b7bcf5;
}
.minecraft-picker-item img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  object-position: top;
  image-rendering: pixelated;
}
.minecraft-picker-item span {
  display: grid;
  min-width: 0;
}
.minecraft-picker-item b {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.minecraft-picker-item small {
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font:
    7px ui-monospace,
    monospace;
  text-overflow: ellipsis;
}
.minecraft-picker-item em {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--primary);
  background: #eff0ff;
  border-radius: 5px;
  font-size: 12px;
  font-style: normal;
}
.picker-loading,
.picker-empty {
  grid-column: 1 / -1;
  padding: 40px;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}
.bundle-selection {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.bundle-selection > div:first-child {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
}
.bundle-selection > div:first-child span {
  color: var(--muted);
}
.bundle-selection [data-bundle-items] {
  display: grid;
  align-content: start;
  max-height: 255px;
  overflow-y: auto;
}
.bundle-selection [data-bundle-items] > p {
  padding: 24px 12px;
  color: var(--muted);
  text-align: center;
  font-size: 9px;
}
.bundle-selected-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 58px 25px;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.bundle-selected-item span,
.bundle-selected-item b,
.bundle-selected-item small {
  display: block;
  min-width: 0;
}
.bundle-selected-item b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bundle-selected-item small {
  margin-top: 2px;
  color: var(--muted);
  font:
    7px ui-monospace,
    monospace;
}
.bundle-selected-item input {
  padding: 7px;
  text-align: center;
}
.bundle-selected-item > button {
  color: #a34c4c;
  background: #fff1f1;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.game-product-stack {
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-product-stack img {
  object-fit: cover;
  object-position: top;
}
.game-product-bundle .game-product-stack img {
  width: 42px;
  height: 42px;
  margin-left: -15px;
}
.game-product-bundle .game-product-stack img:first-child {
  margin-left: 8px;
}
.game-product-contents {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: #adb3c3;
  font-size: 7px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .catalog-table-labels {
    display: none;
  }
  .catalog-table-row {
    grid-template-columns: minmax(240px, 1fr) minmax(190px, 0.8fr) 100px 35px;
  }
  .catalog-row-status {
    display: none;
  }
  .store-builder-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
  .minecraft-picker-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .store-table-head,
  .store-create-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .catalog-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
  }
  .catalog-composition {
    grid-column: 1 / -1;
  }
  .catalog-row-price {
    grid-column: 1;
  }
  .catalog-row-actions {
    grid-column: 2;
    grid-row: 1;
  }
  .catalog-row-menu {
    position: fixed;
    z-index: 30;
    top: 50%;
    right: 12px;
    left: 12px;
    width: auto;
    transform: translateY(-50%);
  }
  .store-builder-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .store-builder-layout {
    display: block;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .store-builder-layout > div:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .minecraft-picker-search {
    align-items: stretch;
    flex-direction: column;
  }
  .minecraft-picker-results {
    height: 320px;
  }
}

/* Focused server admin */
.server-tabs {
  display: flex;
  gap: 6px;
  margin-top: -16px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(26, 31, 54, 0.04);
}
.server-tabs a {
  padding: 10px 16px;
  color: var(--muted);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}
.server-tabs a:hover,
.server-tabs a.active {
  color: var(--ink);
  background: #f1f2ff;
}
.server-tabs a.active {
  color: var(--primary);
}
.server-admin-head {
  padding-bottom: 31px;
}
.server-admin-state {
  display: flex;
  align-items: center;
  gap: 10px;
}
.server-admin-state > button {
  padding: 10px 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  font:
    700 12px ui-monospace,
    monospace;
  cursor: pointer;
}
.server-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
  gap: 16px;
}
.server-overview-grid .commerce-section {
  margin: 0;
}
.server-wide {
  grid-column: 1 / -1;
}
.server-connect-card,
.server-power-card {
  display: flex;
  align-items: center;
  min-height: 104px;
  gap: 16px;
}
.server-connect-card code {
  min-width: 0;
  margin-right: auto;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
}
.server-specs-card dl,
.settings-summary dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.server-specs-card dl > div,
.settings-summary dl > div {
  padding: 13px;
  background: #fff;
}
.server-specs-card dt,
.settings-summary dt {
  color: var(--muted);
  font-size: 10px;
}
.server-specs-card dd,
.settings-summary dd {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 800;
}
.server-quick-card > a {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  color: var(--ink);
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.server-quick-card > a span {
  color: var(--muted);
}
.server-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 16px;
}
.server-settings-layout > * {
  margin: 0;
}
.server-setting-card {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 0.55fr);
  align-items: end;
  gap: 34px;
}
.server-setting-card h2,
.settings-summary h2 {
  margin: 6px 0 8px;
}
.server-setting-card p {
  max-width: 480px;
  color: var(--muted);
  font-size: 13px;
}
.server-setting-card form {
  display: grid;
  gap: 10px;
}
.server-setting-card label,
.server-product-fields label,
.custom-product label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.server-setting-card select,
.server-product-fields input,
.custom-product input {
  width: 100%;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
.setting-hint {
  grid-column: 2;
  color: #ae6e12;
}
.server-players-page {
  margin-top: 0;
}

/* Server catalog and local Minecraft textures */
.store-admin-page {
  display: grid;
  gap: 16px;
}
.store-admin-page > .commerce-section {
  margin: 0;
}
.store-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 8px;
}
.store-library-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  background: #fafbff;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.store-library-card:hover {
  border-color: #b9bdf5;
  box-shadow: 0 8px 20px rgba(62, 69, 160, 0.08);
}
.store-item-picture {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(145deg, #edf0f8, #fff);
  border: 1px solid #e2e5ef;
  border-radius: 9px;
}
.store-item-picture img,
.game-item-image,
.game-product-visual img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}
.store-item-picture em,
.game-product-visual em {
  position: absolute;
  right: 4px;
  bottom: 3px;
  padding: 1px 4px;
  color: #fff;
  background: rgba(19, 23, 39, 0.85);
  border-radius: 4px;
  font:
    700 9px ui-monospace,
    monospace;
}
.minecraft-item-fallback {
  color: #9399aa;
  font-size: 28px;
}
.store-library-copy {
  display: grid;
  min-width: 0;
}
.store-library-copy small {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.store-library-copy b {
  overflow: hidden;
  margin: 2px 0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-library-copy span {
  font-size: 11px;
  font-weight: 800;
}
.store-library-card > button {
  grid-column: 1 / -1;
  padding: 7px;
  color: var(--primary);
  background: #f0f1ff;
  border: 0;
  border-radius: 7px;
  font: 800 10px inherit;
  cursor: pointer;
}
.store-library-card > button.added {
  color: #597063;
  background: #edf6f0;
}
.server-product-edit-list {
  display: grid;
  gap: 8px;
}
.server-product-edit {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.server-product-edit.archived {
  opacity: 0.62;
}
.server-product-fields {
  display: grid;
  gap: 7px;
}
.server-product-edit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.server-product-numbers {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 100px 110px auto;
  align-items: end;
  gap: 7px;
}
.server-product-archive button {
  color: #a34b4b;
  background: none;
  border: 0;
  font-size: 10px;
  cursor: pointer;
}
.custom-product {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.custom-product summary {
  padding: 14px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.custom-product form {
  margin-top: 12px;
}
.catalog-hub-list {
  display: grid;
  gap: 8px;
}
.catalog-hub-row,
.catalog-hub-row > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.catalog-hub-row {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.catalog-hub-row b,
.catalog-hub-row small {
  display: block;
}
.catalog-hub-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

/* Compact player-side storefront */
.game-site {
  margin: 0;
  color: #ecedf5;
  background: #0c0e16;
  font-family: "Manrope", sans-serif;
}
.game-site * {
  box-sizing: border-box;
}
.game-site a {
  color: inherit;
  text-decoration: none;
}
.game-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 62px;
  padding: 0 max(22px, calc((100vw - 1120px) / 2));
  background: rgba(12, 14, 22, 0.9);
  border-bottom: 1px solid #242735;
  backdrop-filter: blur(16px);
}
.game-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}
.game-brand > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #10121b;
  background: #a8ff60;
  border-radius: 8px;
  font-weight: 900;
}
.game-header nav {
  display: flex;
  gap: 26px;
  color: #9499aa;
  font-size: 11px;
  font-weight: 700;
}
.game-header nav a:hover {
  color: #fff;
}
.game-header-account {
  justify-self: end;
  padding: 8px 13px;
  background: #202330;
  border: 1px solid #303442;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
}
.game-site main,
.game-footer {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
}
.game-hero {
  display: grid;
  grid-template-columns: 1fr 170px;
  align-items: center;
  gap: 50px;
  min-height: 290px;
  padding: 46px 0 34px;
}
.game-kicker {
  color: #a8ff60;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.game-hero h1 {
  max-width: 760px;
  margin: 8px 0 10px;
  font-size: clamp(36px, 6vw, 68px);
  line-height: 0.98;
  letter-spacing: -3px;
}
.game-hero p {
  max-width: 600px;
  margin: 0;
  color: #969bad;
  font-size: 14px;
  line-height: 1.6;
}
.game-hero > div > div {
  display: flex;
  gap: 9px;
  margin-top: 22px;
}
.game-primary,
.game-secondary {
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}
.game-primary {
  color: #10121b !important;
  background: #a8ff60;
}
.game-secondary {
  background: #1b1e29;
  border: 1px solid #303440;
}
.game-hero aside {
  display: grid;
  justify-items: center;
  padding: 22px;
  background: radial-gradient(circle at top, #293123, #161923 70%);
  border: 1px solid #343a31;
  border-radius: 16px;
}
.game-hero aside span,
.game-hero aside small {
  color: #8e9489;
  font-size: 9px;
}
.game-hero aside b {
  margin: 3px 0;
  font-size: 31px;
}
.game-panel,
.game-shop {
  background: #151822;
  border: 1px solid #282c3a;
  border-radius: 15px;
}
.game-launcher {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 20px 22px;
  scroll-margin-top: 78px;
}
.game-launcher h2 {
  margin: 4px 0;
  font-size: 18px;
}
.game-launcher p {
  margin: 0;
  color: #8f94a7;
  font-size: 10px;
}
.game-downloads {
  display: flex;
  gap: 6px;
}
.game-downloads a {
  display: grid;
  min-width: 115px;
  padding: 10px 12px;
  background: #20232f;
  border: 1px solid #303442;
  border-radius: 8px;
}
.game-downloads b {
  font-size: 10px;
}
.game-downloads small {
  margin-top: 2px;
  color: #858a9b;
  font-size: 8px;
}
.game-shop {
  margin-top: 18px;
  padding: 22px;
  scroll-margin-top: 78px;
}
.game-section-head,
.game-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.game-section-head h2,
.game-catalog-head h2 {
  margin: 5px 0 0;
  font-size: 20px;
}
.game-section-head > button {
  padding: 8px 11px;
  color: #b7bbc9;
  background: #20232e;
  border: 1px solid #303441;
  border-radius: 7px;
  font:
    700 9px ui-monospace,
    monospace;
  cursor: pointer;
}
.game-server-tabs {
  display: flex;
  gap: 7px;
  margin: 16px 0 20px;
  padding-bottom: 2px;
  overflow-x: auto;
}
.game-server-tabs a {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  min-width: 155px;
  padding: 10px 12px;
  color: #a9adba;
  background: #1b1e29;
  border: 1px solid #2d303d;
  border-radius: 9px;
}
.game-server-tabs a.active {
  color: #fff;
  background: #252a25;
  border-color: #6b864f;
}
.game-server-tabs b {
  margin-left: 7px;
  font-size: 10px;
}
.game-server-tabs small {
  grid-column: 2;
  margin: 2px 0 0 7px;
  color: #787d8d;
  font-size: 8px;
}
.game-server-dot {
  width: 7px;
  height: 7px;
  background: #6f7380;
  border-radius: 50%;
}
.game-server-dot.online {
  background: #87db53;
  box-shadow: 0 0 0 3px rgba(135, 219, 83, 0.1);
}
.game-catalog-head {
  align-items: flex-end;
  padding-top: 18px;
  border-top: 1px solid #292d39;
}
.game-catalog-head p {
  margin: 5px 0 0;
  color: #858a9b;
  font-size: 9px;
}
.game-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.game-product {
  display: grid;
  grid-template-rows: 78px minmax(95px, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  background: #1b1e29;
  border: 1px solid #2b2f3d;
  border-radius: 11px;
}
.game-product-visual {
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #353a47, #222631 70%);
  border-bottom: 1px solid #2d313e;
}
.game-product-visual img {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.35));
}
.game-product-info {
  padding: 10px 11px 6px;
}
.game-product-info small {
  color: #73798a;
  font-size: 7px;
}
.game-product-info h3 {
  margin: 3px 0 5px;
  font-size: 12px;
}
.game-product-info p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #9297a7;
  font-size: 9px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.game-product-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 9px 11px 11px;
}
.game-product-buy > b {
  white-space: nowrap;
  font-size: 12px;
}
.game-product-buy form {
  display: flex;
  gap: 4px;
}
.game-product-buy select,
.game-product-buy button,
.game-product-buy > a {
  padding: 6px 7px;
  border-radius: 6px;
  font: 800 8px inherit;
}
.game-product-buy select {
  color: #bec2cf;
  background: #11131b;
  border: 1px solid #343846;
}
.game-product-buy button,
.game-product-buy > a {
  color: #11131a;
  background: #a8ff60;
  border: 0;
  cursor: pointer;
}
.game-product-disabled {
  color: #8e6570;
  font-size: 8px;
}
.game-shop-note {
  margin: 13px 0 0;
  color: #74798a;
  font-size: 8px;
}
.game-empty {
  grid-column: 1 / -1;
  padding: 30px;
  color: #7e8394;
  text-align: center;
  border: 1px dashed #343846;
  border-radius: 9px;
  font-size: 10px;
}
.game-auth,
.game-account {
  margin: 18px 0 38px;
  padding: 22px;
  scroll-margin-top: 78px;
}
.game-auth {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 36px;
}
.game-auth-copy > span {
  color: #a8ff60;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.game-auth-copy h2 {
  margin: 7px 0;
  font-size: 20px;
}
.game-auth-copy p {
  color: #8f94a5;
  font-size: 10px;
  line-height: 1.55;
}
.game-auth-forms {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 8px;
}
.game-auth-forms form {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px;
  background: #1c1f2a;
  border: 1px solid #2d313e;
  border-radius: 10px;
}
.game-auth-forms h3 {
  margin: 0 0 3px;
  font-size: 12px;
}
.game-auth-forms input {
  min-width: 0;
  padding: 9px 10px;
  color: #fff;
  background: #11131b;
  border: 1px solid #343846;
  border-radius: 7px;
  font: 10px inherit;
}
.game-auth-forms button,
.game-account form button {
  padding: 9px;
  color: #101218;
  background: #a8ff60;
  border: 0;
  border-radius: 7px;
  font: 800 9px inherit;
  cursor: pointer;
}
.game-account {
  display: flex;
  align-items: center;
  gap: 22px;
}
.game-account-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.game-account-user > span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  color: #11131a;
  background: #a8ff60;
  border-radius: 10px;
  font-weight: 900;
}
.game-account-user small,
.game-account-user p,
.game-account-stock small {
  color: #858a9b;
  font-size: 9px;
}
.game-account-user h2,
.game-account-user p {
  margin: 2px 0;
}
.game-account-stock {
  display: flex;
  align-items: center;
  gap: 9px;
}
.game-account-stock > b {
  font-size: 25px;
}
.game-account-stock span,
.game-account-stock small {
  display: block;
}
.game-message {
  margin: 0 0 12px;
  padding: 11px 13px;
  color: #c9efb0;
  background: #1d2b1b;
  border: 1px solid #3e5a35;
  border-radius: 9px;
  font-size: 10px;
}
.game-message.error {
  color: #efb7be;
  background: #2b1a20;
  border-color: #55313b;
}
.game-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 0 30px;
  color: #676c7a;
  border-top: 1px solid #222530;
  font-size: 9px;
}
.game-footer span {
  max-width: 620px;
  text-align: center;
}

@media (max-width: 900px) {
  .server-overview-grid,
  .server-settings-layout,
  .game-auth {
    grid-template-columns: 1fr;
  }
  .server-setting-card {
    grid-template-columns: 1fr;
  }
  .setting-hint {
    grid-column: 1;
  }
  .game-header {
    grid-template-columns: 1fr auto;
  }
  .game-header nav {
    display: none;
  }
  .game-launcher {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .server-tabs {
    width: calc(100% - 26px);
    overflow-x: auto;
  }
  .server-admin-head,
  .server-admin-state,
  .server-connect-card,
  .server-power-card,
  .catalog-hub-row,
  .catalog-hub-row > div {
    align-items: stretch;
    flex-direction: column;
  }
  .server-specs-card dl,
  .settings-summary dl {
    grid-template-columns: repeat(2, 1fr);
  }
  .server-product-edit {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .server-product-archive {
    grid-column: 2;
  }
  .server-product-numbers,
  .server-product-edit-head {
    grid-template-columns: 1fr;
  }
  .game-site main,
  .game-footer {
    width: min(100% - 24px, 1120px);
  }
  .game-header {
    min-height: 54px;
    padding: 0 12px;
  }
  .game-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
    padding: 35px 0 24px;
  }
  .game-hero h1 {
    font-size: 42px;
    letter-spacing: -2px;
  }
  .game-hero aside {
    display: none;
  }
  .game-downloads,
  .game-section-head,
  .game-catalog-head {
    align-items: stretch;
    flex-direction: column;
  }
  .game-downloads a {
    min-width: 0;
  }
  .game-shop,
  .game-auth,
  .game-account {
    padding: 14px;
  }
  .game-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .game-product {
    grid-template-rows: 70px minmax(96px, 1fr) auto;
  }
  .game-product-buy {
    align-items: stretch;
    flex-direction: column;
  }
  .game-product-buy form {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .game-auth-forms {
    grid-template-columns: 1fr;
  }
  .game-account {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Owner / player separation and per-server catalogs */
.project-tabs {
  display: flex;
  gap: 6px;
  margin: 0 auto 18px;
  padding: 5px;
  overflow-x: auto;
  background: #ebecef;
  border-radius: 12px;
}
.project-tabs a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  color: #74798a;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.project-tabs a.active {
  color: #413bb8;
  background: #fff;
  box-shadow: 0 2px 9px rgba(33, 35, 49, 0.08);
}
.owner-player-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin: 0 auto 18px;
}
.owner-player-split article {
  padding: 21px;
  background: #fff;
  border: 1px solid #e5e7ee;
  border-radius: 14px;
}
.owner-player-split article:last-child {
  background: #1a1c30;
  border-color: #262941;
}
.owner-player-split span {
  color: #655fe0;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.owner-player-split article:last-child span {
  color: #9b96ff;
}
.owner-player-split h2 {
  margin: 9px 0 6px;
  color: #252835;
  font-size: 16px;
}
.owner-player-split article:last-child h2 {
  color: #fff;
}
.owner-player-split p,
.section-copy {
  margin: 0;
  color: #858a9a;
  font-size: 10px;
  line-height: 1.65;
}
.project-server-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}
.project-server-admin-row > a:first-child {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid #e5e7ed;
  border-radius: 10px;
}
.project-site-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 18px;
}
.project-site-grid .commerce-section {
  width: 100%;
}
.owner-launcher-list {
  display: grid;
  gap: 9px;
  margin: 20px 0;
}
.owner-launcher-list a {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border: 1px solid #e2e4ec;
  border-radius: 10px;
  background: #fafafd;
}
.owner-launcher-list b {
  font-size: 11px;
}
.owner-launcher-list span {
  color: #5b55d6;
  font-size: 9px;
  font-weight: 750;
}
.public-url-card {
  padding: 14px;
  background: #f1f0ff;
  border: 1px solid #dddbfb;
  border-radius: 10px;
}
.public-url-card span {
  display: block;
  margin-bottom: 7px;
  color: #84899a;
  font-size: 8px;
  text-transform: uppercase;
}
.public-url-card button {
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  color: #514bc9;
  background: transparent;
  border: 0;
  font: 10px ui-monospace;
  text-overflow: ellipsis;
  cursor: pointer;
}
.account-scope-note {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto 18px;
  padding: 15px 18px;
  color: #656b7b;
  background: #efefff;
  border: 1px solid #dcdafb;
  border-radius: 12px;
  font-size: 10px;
}
.account-scope-note b {
  flex: 0 0 auto;
  color: #514bc5;
}
.member-status.blocked {
  color: #b4504d;
  background: #fff0ef;
}
.catalog-server-tabs {
  display: flex;
  gap: 9px;
  margin: 0 auto 18px;
  overflow-x: auto;
}
.catalog-server-tabs > a {
  min-width: 190px;
  display: grid;
  gap: 5px;
  padding: 13px;
  color: #343744;
  background: #fff;
  border: 1px solid #e2e4eb;
  border-radius: 11px;
}
.catalog-server-tabs > a.active {
  border-color: #7771e7;
  box-shadow: 0 0 0 2px rgba(91, 85, 218, 0.1);
}
.catalog-server-tabs .status {
  width: fit-content;
}
.catalog-server-tabs b {
  font-size: 11px;
}
.catalog-server-tabs small {
  color: #8b90a0;
  font-size: 8px;
}
.catalog-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}
.catalog-admin-grid > .commerce-section {
  width: 100%;
}
.catalog-create-panel {
  position: sticky;
  top: 18px;
  align-self: start;
}
.catalog-editor-list {
  display: grid;
  gap: 12px;
}
.catalog-editor-card {
  padding: 16px;
  background: #fafafd;
  border: 1px solid #e3e5ec;
  border-radius: 12px;
}
.catalog-editor-card.archived {
  background: #f4f4f6;
  opacity: 0.78;
}
.catalog-product-form {
  display: grid;
  gap: 11px;
}
.catalog-product-form > label,
.catalog-fields label {
  display: grid;
  gap: 6px;
  color: #707687;
  font-size: 9px;
  font-weight: 700;
}
.catalog-product-form input,
.catalog-product-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  color: #2c2f3d;
  background: #fff;
  border: 1px solid #dcdfe8;
  border-radius: 8px;
}
.catalog-product-form textarea {
  min-height: 68px;
  resize: vertical;
}
.catalog-product-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.catalog-product-title > div > span {
  color: #6a64dd;
  font: 8px ui-monospace;
}
.catalog-product-title h3 {
  margin: 4px 0 0;
  font-size: 14px;
}
.catalog-active {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #626878;
  font-size: 9px;
}
.catalog-active input {
  width: 15px;
  min-height: 15px;
  padding: 0;
}
.catalog-fields {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.8fr;
  gap: 9px;
}
.archive-product-form {
  margin-top: 8px;
  text-align: right;
}
.archive-product-form button {
  padding: 0;
  color: #b25b58;
  background: transparent;
  border: 0;
  font-size: 8px;
  cursor: pointer;
}
.archived-label {
  display: block;
  margin-top: 9px;
  color: #858a99;
  font-size: 8px;
}
.catalog-empty {
  padding: 55px 20px;
  color: #898e9d;
  border: 1px dashed #d8dae3;
  border-radius: 11px;
  text-align: center;
  font-size: 10px;
}
.portal-header-account {
  padding: 9px 12px;
  color: #dcdafe;
  background: #222640;
  border: 1px solid #353b5b;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 750;
}
.portal-hero-actions {
  display: flex;
  gap: 9px;
}
.portal-hero-actions a.secondary {
  color: #b9b6ef;
  background: transparent;
  border: 1px solid #3a3f5d;
}
.portal-launcher {
  scroll-margin-top: 25px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 35px;
  margin: 0 0 34px;
  padding: 30px;
  background: linear-gradient(145deg, #202441, #15182c);
  border: 1px solid #343a5b;
  border-radius: 18px;
}
.portal-launcher > div:first-child > span,
.portal-server-store-head > div:first-child > span {
  color: #928cff;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.portal-launcher h2 {
  margin: 9px 0;
  font-size: 25px;
}
.portal-launcher p {
  margin: 0;
  color: #9299b3;
  font-size: 10px;
  line-height: 1.65;
}
.portal-launcher-downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.portal-launcher-downloads a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
  color: #fff;
  background: #111426;
  border: 1px solid #353b5b;
  border-radius: 10px;
}
.portal-launcher-downloads b {
  font-size: 11px;
}
.portal-launcher-downloads small {
  margin-top: 6px;
  color: #777e9a;
  font-size: 8px;
}
.portal-server > div:last-child {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.portal-server > div:last-child > a {
  color: #aaa6ff;
  font-size: 9px;
  font-weight: 750;
}
.portal-server-stores {
  display: grid;
  gap: 20px;
}
.portal-server-store {
  scroll-margin-top: 25px;
  padding: 20px;
  background: rgba(10, 13, 27, 0.55);
  border: 1px solid #2b304b;
  border-radius: 15px;
}
.portal-server-store-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}
.portal-server-store-head h3 {
  margin: 6px 0 4px;
  font-size: 19px;
}
.portal-server-store-head p {
  margin: 0;
  color: #7f86a1;
  font-size: 9px;
}
.portal-server-store-head > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.portal-server-store-head button {
  padding: 8px 10px;
  color: #bfc2db;
  background: #191d31;
  border: 1px solid #343a56;
  border-radius: 7px;
  font: 8px ui-monospace;
  cursor: pointer;
}
.portal-server-store .portal-products {
  margin-top: 0;
}
.portal-catalog-empty {
  grid-column: 1 / -1;
  padding: 45px;
}
.portal-server-store .portal-buy-form {
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: end;
}
.portal-server-store .portal-buy-form button {
  grid-column: auto;
}

@media (max-width: 980px) {
  .project-site-grid,
  .catalog-admin-grid {
    grid-template-columns: 1fr;
  }
  .catalog-create-panel {
    position: static;
  }
  .portal-launcher {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .commerce-nav-label {
    display: none;
  }
  .owner-player-split,
  .project-site-grid {
    grid-template-columns: 1fr;
  }
  .project-server-admin-row,
  .catalog-fields {
    grid-template-columns: 1fr;
  }
  .project-tabs {
    width: calc(100% - 26px);
  }
  .portal-launcher {
    padding: 22px;
  }
  .portal-launcher-downloads {
    grid-template-columns: 1fr;
  }
  .portal-hero-actions,
  .portal-server-store-head,
  .portal-server-store-head > div:last-child {
    align-items: stretch;
    flex-direction: column;
  }
  .portal-server-store .portal-buy-form {
    grid-template-columns: 1fr;
  }
  .portal-server-store .portal-buy-form button {
    grid-column: 1;
  }
}