:root {
    --color-text: #f5f5f7;
    --color-text-strong: #f5f5f7;
    --color-text-muted: #b4b4be;
    --color-surface: #1c1c1c;
    --color-surface-raised: #242424;
    --color-surface-sunken: #161616;
    --color-glass-1: #171717;
    --color-glass-2: #1c1c1c;
    --color-overlay-rgb: 55, 55, 55;
    --color-overlay-2-rgb: 50, 50, 50;
    --color-border: #2e2e2e;
    --color-border-strong: #3d3d3d;
    --color-border-contrast: #787880;
    --color-accent: #f45a5a;
    --color-accent-alt: #ff7a7a;
    --color-accent-hover: #ff5f5f;
    --color-accent-soft: #f27878;
    --color-accent-tint: #3a1a1a;
    --color-bg: #121212;
    --color-fill: #242424;
    --color-text-subtle: #8f96a1;
    --color-accent-contrast: #ffffff;
    --color-accent-fill: #dc2f2f;
    --color-ring: rgba(239, 59, 59, 0.32);
    --color-success: #4ade80;
    --color-success-tint: #12301f;
    --color-warning: #facc15;
    --color-warning-tint: #3a2f0a;
    --color-danger: #ff8a8a;
    --color-danger-tint: #3b1818;
    --color-info: #bfdbfe;
    --color-info-tint: #17233f;
    --color-highlight: #facc15;
    --color-diamond: #67e8f9;
    --color-diamond-tint: #0b2e36;
    --color-tip-bg: #100010;
    --color-tip-border: #5a1fc4;
    --color-tip-text: #f5f5f7;
    --color-slot-bg: #2b2b2b;
    --color-slot-shade: #0d0d0d;
    --color-slot-light: #4a4a4a;
    --color-chart-1: #60a5fa;
    --color-chart-2: #2dd4bf;
    --color-chart-3: #fbbf24;
    --color-chart-4: #a78bfa;
    --color-chart-5: #94a3b8;
    --color-code-bg: #0c0c0d;
    --color-code-text: #e4e4e8;
    --color-scrim: rgba(0, 0, 0, 0.6);
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;
    --font-pixel: 'Pixelify Sans', ui-monospace, Menlo, monospace;
    --radius-slot: 2px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.30);
    --shadow-block: 0 3px 0 rgba(0, 0, 0, 0.25);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    --page-gap: 24px;
    --page-width: 1440px;
    --page-gutter: 16px;
    --control-height: 36px;
    --control-pad-x: 12px;
    --cell-pad-y: 12px;
}
* {
  box-sizing: border-box;
  word-break: break-word;
}
.page-content-wrapper {
  text-align: center;
}
.page-content, .page-content-small {
  display: inline-block;
  text-align: left;
  width: calc(100% - 2 * var(--page-gutter));
  max-width: var(--page-width);
}
.page-content-small {
  max-width: 600px;
}
html {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: "Nunito Sans", "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
  border: 0;
}
.main-header-account-button-wrapper .main-header-account-button-title {
  visibility: hidden;
}
.main-header-account-button-wrapper:hover .main-header-account-button-title {
  visibility: visible;
}
.general-popup-wrapper {
  width: 60%;
}
@media only screen and (max-width: 1000px) {
  .general-popup-wrapper {
    width: 75%;
  }
}
@media only screen and (max-width: 800px) {
  .general-popup-wrapper {
    width: 90%;
  }
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 128px;
  transition: 0.5s;
}
.sidenav a, .sidenav .header-tabs {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav a:hover, .sidenav .header-tabs:hover {
  color: #f1f1f1;
}
.theme-color-bg {
  background-color: var(--color-accent);
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 32px;
  font-size: 24px;
  margin-left: 50px;
}
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a, .sidenav .header-tabs {
    font-size: 18px;
  }
}
strong {
  font-weight: 900;
}
.body-container-background {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat no-repeat;
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  /* clip, not hidden: hidden makes this wrapper a scroll box, and sticky sidebars inside it then never stick */
  overflow-x: clip;
}
pre {
  max-height: 600px;
  overflow: scroll;
  font-size: 13px;
}
.body-container-contents {
  background-color: var(--color-surface);
  min-height: 100vh;
  overflow-x: clip;
}
.body-container-contents.colored {
  background: linear-gradient(rgb(220, 218, 211), rgb(214, 212, 208));
  background-color: inherit;
}
@-moz-document url-prefix() {}
.loader {
  border: 6px solid var(--color-accent);
  border-top: 6px solid #ffffff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin-loader 1s linear infinite;
}
.loader-white {
  border: 6px solid rgba(0, 0, 0, 0);
  border-top: 6px solid #ffffff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin-loader 1s linear infinite;
}
@keyframes spin-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.full-width {
  width: 100%;
  display: inline-block;
}
img.full-width {
  justify-content: center;
  align-items: center;
  object-fit: cover;
  min-width: 100%;
  width: auto;
}
.center {
  text-align: center;
}
a.none, .none.header-tabs {
  color: inherit;
}
a.none:hover, .none.header-tabs:hover {
  color: inherit;
  text-decoration: none;
}
a.theme-color, .theme-color.header-tabs {
  transition: 0.17s;
}
a.theme-color:hover, .theme-color.header-tabs:hover {
  color: var(--color-accent-soft);
}
a.error-color, .error-color.header-tabs {
  transition: 0.17s;
}
a.error-color:hover, .error-color.header-tabs:hover {
  color: #c51a15;
}
a, .header-tabs > a {
  color: var(--color-accent-alt);
  text-decoration: none;
  transition: 0.17s;
}
a:hover, .header-tabs:hover, .link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}
.background-color {
  background-color: var(--color-surface);
}
.intent-button:hover {
  scale: 1.1;
  transition: 0.17s;
}
.button.error-color, .error-color.intent-button {
  background-color: #ed5853;
  border: 1px solid #ed5853;
}
.button.dark, .dark.intent-button {
  background-color: white;
  border: 1px solid white;
  color: #222;
}
.button.light, .light.intent-button {
  background-color: #222;
  border: 1px solid #222;
  color: white;
}
.button:active, .intent-button:active {
  background-color: #256ac2;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: underline;
}
.button:hover, .intent-button:hover {
  background-color: var(--color-accent-tint);
  color: #ffffff;
  transition: 0.17s;
  cursor: hand;
  text-decoration: none;
}
.button:hover.error-color, .intent-button:hover.error-color {
  background-color: transparent;
  color: #ed5853;
}
.button:hover.dark, .intent-button:hover.dark {
  background-color: transparent;
  color: white;
}
.button:hover.light, .intent-button:hover.light {
  background-color: transparent;
  color: #222;
}
.button-weak.error-color {
  border: 1px solid #ed5853;
  color: #ed5853;
}
.button-weak.dark {
  border: 1px solid white;
  color: white;
}
.button-weak.light {
  border: 1px solid #222;
  color: #222;
}
.button-weak:hover {
  color: var(--color-accent);
  background-color: rgba(0, 0, 0, 0.25);
  transition: 0.17s;
  cursor: hand;
  text-decoration: none;
}
.button-weak:hover.error-color {
  color: white;
  background-color: #ed5853;
}
.button-weak:hover.dark {
  background-color: white;
  color: #222;
}
.button-weak:hover.light {
  color: white;
  background-color: #222;
}
.subheader-link:hover {
  color: white;
  text-decoration: none;
  font-weight: 800;
  opacity: 1;
}
.main-header-account-button:hover {
  text-decoration: none;
}
.main-header-account-button:hover.dark {
  color: #989898;
}
.main-header-account-button:hover.light {
  color: #585B5B;
}
.main-header-account-button:active.dark {
  color: #565656;
}
.main-header-account-button:active.light {
  color: #989898;
}
.main-header-tab.light {
  background-color: rgba(0, 0, 0, 0.07);
  color: #222;
}
.main-header-tab.light:hover {
  background-color: rgba(0, 0, 0, 0.12);
  text-decoration: none;
}
.main-header-tab.light:active {
  background-color: rgba(0, 0, 0, 0.3);
}
.main-header-tab.light.selected {
  background-color: #03a092;
  color: white;
  font-weight: 800;
}
.main-header-tab.dark {
  background-color: rgba(0, 0, 0, 0.15);
  color: white;
}
.main-header-tab.dark:hover {
  background-color: rgba(0, 0, 0, 0.33);
  text-decoration: none;
}
.main-header-tab.dark:active {
  background-color: rgba(0, 0, 0, 0.67);
}
.main-header-tab.dark.selected {
  background-color: #03a092;
  color: white;
  font-weight: 800;
}
.header-info > a, .header-info > .header-tabs {
  color: inherit;
  font-size: inherit;
}
.header-info > a:hover, .header-info > .header-tabs:hover {
  text-decoration: none;
}
.header-navigation > a, .header-navigation > .header-tabs {
  color: inherit;
  font-size: inherit;
}
.header-navigation > a:hover, .header-navigation > .header-tabs:hover {
  text-decoration: none;
}
.flex-container-centered .flex1 {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  padding: 12px;
}
.flex-container-centered .hr {
  border-left: 1px solid var(--color-text);
  height: 50%;
  left: 0;
  top: 25%;
}
.dropdown:hover {
  transition: 0.17s;
}
.profile-photo-wrapper .profile-photo-still {
  visibility: visible;
}
.profile-photo-wrapper:hover .profile-photo-still {
  visibility: hidden;
  display: none;
}
.profile-photo-wrapper:hover .profile-photo-animated {
  visibility: visible;
  display: inherit;
}
.checkbox-input label input {
  visibility: hidden;
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}
.checkbox-input label span {
  height: 16px;
  width: 16px;
  border: 1px solid var(--color-border-strong);
  background-color: #ffffff;
  color: #ffffff;
  font-size: 12px;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
}
.checkbox-input label [type=checkbox]:checked + span, .checkbox-input label [type=radio]:checked + span {
  background-color: var(--color-accent);
  color: #ffffff;
  border: 1px solid var(--color-accent);
}
form .title {
  text-align: left;
  display: inline-block;
  width: 100%;
  margin-left: 2px;
  margin-top: 16px;
  margin-bottom: 2px;
  font-size: 14px;
}
form .icon-input {
  font-size: 16px;
  margin-top: 4px;
  border-bottom: 3px solid var(--color-border);
  margin-bottom: 4px;
  text-align: left;
  background-color: inherit;
  color: #777777;
  display: inline-flex;
  width: 100%;
  transition: 0.17s;
}
form .icon-input.error {
  color: #ed5853;
  border-bottom: 3px solid #ed5853;
}
form .icon-input:focus-within {
  border-bottom: 3px solid var(--color-text-strong);
  color: var(--color-text-strong);
}
form .icon-input .icon {
  font-size: 16px;
  padding: 0 6px;
  vertical-align: center;
  align-self: center;
}
form .icon-input input {
  background-color: inherit;
  padding-bottom: 4px;
  color: var(--color-text);
  border: none;
  font-size: 16px;
  outline: none;
  flex-grow: 1;
}
form .radio {
  padding: 8px;
}
form .submit {
  color: #ffffff;
  background-color: var(--color-accent);
  border-radius: 24px;
  padding: 12px;
  font-size: 20px;
  text-decoration: none;
  border: 0;
}
form .submit:hover {
  background-color: var(--color-surface);
  padding: 11px;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
form textarea {
  border-radius: 2px;
  border: 1px solid #bbb;
  padding: 8px;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 14px;
  width: 96%;
  max-width: 100%;
  resize: vertical;
  height: 150px;
  max-height: 600px;
}
form textarea:focus-within {
  border-bottom: 1px solid var(--color-text-strong);
  color: var(--color-text-strong);
}
.no-glow:focus {
  outline: none;
  outline-color: transparent;
  outline-style: none;
}
.icon-input.error .icon {
  color: #ed5853;
}
.icon-input.titled {
  margin-top: 0;
}
textarea.input {
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 18px;
  width: 60%;
  min-width: 60%;
  height: 250px;
  min-height: 175px;
  max-height: 400px;
  background-color: var(--color-surface-raised);
  color: var(--color-text);
}
select option {
  font-weight: 400;
  font-family: inherit;
}
select::-ms-expand {
  display: none;
}
select:hover {
  border-color: #888;
}
select:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

.sceditor-button-dropdown div {
  background-image: url("https://polymart.org/style/fontawesome/icon.svg?name=eye-slash&type=regular&fill=white");
  background-position: center;
}
.spoiler .spoiler-title:hover {
  background-color: var(--color-border);
}
.spoiler .spoiler-title.expanded {
  border-radius: 12px 12px 0 0;
}
.spoiler .spoiler-title .spoiler-arrow {
  transform: rotate(0deg);
  transition: all 0.4s ease;
}
.spoiler .spoiler-title .spoiler-arrow.expanded {
  transform: rotate(-180deg);
}
.tooltip-container .tooltip-text:after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: rgba(21, 20, 21, 0.8) transparent transparent transparent;
}
.tooltip-container.visible .tooltip-text, .tooltip-container:hover .tooltip-text {
  visibility: visible;
}
.category-button-selected:hover.theme-color {
  color: #ffffff;
  background-color: var(--color-accent-tint);
}

/* The side navigation menu */
/* The navigation menu links */
/* When you mouse over the navigation links, change their color */
/* Position and style the close button (top right corner) */
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
.text-color {
  color: var(--color-text);
}
.text-color-secondary {
  color: var(--color-text-muted);
}
body {
  background-color: var(--color-surface);
  margin: 0;
  padding: 0;
  border: 0;
}
.theme-color {
  color: var(--color-accent);
}
.link-color {
  color: var(--color-accent-alt);
}
.error-color {
  color: #ed5853;
}
.header-tabs, .link {
  color: var(--color-accent-alt);
  text-decoration: none;
  transition: 0.17s;
}
.button, .intent-button {
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  border: 1px solid var(--color-accent);
  padding: 9px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: 0.17s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.code {
  font-size: 14px;
}
.button-weak {
  font-size: 15px;
  font-weight: 400;
  background-color: transparent;
  color: var(--color-accent);
  padding: 9px;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  transition: 0.17s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.subheader-link {
  color: white;
  text-decoration: none;
  font-weight: 400;
  opacity: 0.75;
}
.main-header-account-button {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  font-size: 18px;
  margin: 4px 0;
}
.main-header-tab {
  font-weight: 200;
  margin-top: 8px;
  padding: 12px 32px;
  border-radius: 4px 4px 0 0;
  font-family: "Nunito Sans", "Nunito Sans Title", sans-serif;
  font-size: 18px;
  display: inline-block;
  text-decoration: none;
}
.header-background {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: center;
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  width: 100%;
  height: 12vh;
  min-height: 120px;
}
@media only screen and (max-width: 800px) {
  .header-background, .header-behind {
    height: 15vh;
    min-height: 150px;
  }
  .header {
    padding: 32px 16px 0 32px;
  }
}
.contents {
  margin: 8px;
}
.valign {
  vertical-align: center;
  height: 100%;
}
.header-navigation-container {
  text-align: center;
  margin: 0;
  padding: 0;
  width: 89%;
  background-color: white;
  border-radius: 8px;
}
.header-info {
  width: auto;
  padding: 0;
  font-size: 16px;
  white-space: nowrap;
}
.header-navigation {
  margin: 0;
  display: inline-block;
  text-align: left;
  width: auto;
  padding: 0;
  font-size: 16px;
}
.flex-container-centered, .product-head, .resource-card, .header-navigation-container, .header-tabs {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  font-size: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
  min-width: 400px;
}
.product-head .flex1, .resource-card .flex1, .header-navigation-container .flex1, .header-tabs .flex1, .flex-container-centered .header-info, .product-head .header-info, .resource-card .header-info, .header-navigation-container .header-info, .header-tabs .header-info {
  flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  padding: 12px;
}
.flex-container-centered .flex2, .flex-container-centered .product-head-actions, .product-head .flex2, .product-head .product-head-actions, .resource-card .flex2, .resource-card .product-head-actions, .header-navigation-container .flex2, .header-navigation-container .product-head-actions, .header-tabs .flex2, .header-tabs .product-head-actions {
  flex: 2;
  -ms-flex: 2;
  -webkit-flex: 2;
  padding: 12px;
}
.flex-container-centered .flex5, .product-head .flex5, .resource-card .flex5, .header-navigation-container .flex5, .header-tabs .flex5 {
  flex: 5;
  -ms-flex: 5;
  -webkit-flex: 5;
  padding: 12px;
}
.flex-container-centered .flex10, .product-head .flex10, .resource-card .flex10, .header-navigation-container .flex10, .header-tabs .flex10 {
  flex: 10;
  -ms-flex: 10;
  -webkit-flex: 10;
  padding: 12px;
}
.flex-container-centered .flex11, .product-head .flex11, .resource-card .flex11, .header-navigation-container .flex11, .header-tabs .flex11 {
  flex: 11;
  -ms-flex: 11;
  -webkit-flex: 11;
  padding: 12px;
}
.flex-container-centered .flex12, .product-head .flex12, .resource-card .flex12, .header-navigation-container .flex12, .header-tabs .flex12, .flex-container-centered .header-navigation, .product-head .header-navigation, .resource-card .header-navigation, .header-navigation-container .header-navigation, .header-tabs .header-navigation {
  flex: 12;
  -ms-flex: 12;
  -webkit-flex: 12;
  padding: 12px;
}
.product-head .hr, .resource-card .hr, .header-navigation-container .hr, .header-tabs .hr {
  border-left: 1px solid var(--color-text);
  height: 50%;
  left: 0;
  top: 25%;
}
hr {
  margin-left: 12px;
  margin-right: 12px;
  border: 0.5px solid var(--color-border);
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
.profile-photo-wrapper .profile-photo-animated {
  visibility: hidden;
  display: none;
}
.info {
  color: #919191;
  font-size: 12px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  width: 75%;
  display: inline-block;
}
.checkbox-input {
  color: var(--color-text-muted);
  font-size: 14px;
  transition: 0.17s;
}
.form-wrapper {
  display: block;
  text-align: center;
  width: 100%;
}
form {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.input-title, .title {
  text-align: left;
  display: inline-block;
  width: 100%;
  margin-bottom: 6px;
  margin-left: 2px;
  margin-top: 16px;
  font-size: 14px;
}
.icon-input {
  font-size: 16px;
  border-bottom: 3px solid var(--color-border);
  margin-top: 16px;
  margin-bottom: 0;
  text-align: left;
  background-color: inherit;
  color: #777777;
  display: inline-flex;
  width: 100%;
  transition: 0.17s;
}
.icon-input.error {
  border-bottom: 3px solid #ed5853;
}
.icon-input:focus-within {
  border-bottom: 3px solid var(--color-text-strong);
  color: var(--color-text-strong);
}
.icon-input .icon {
  font-size: 16px;
  padding: 0 6px;
  vertical-align: center;
  align-self: center;
}
.icon-input .input-inner {
  background-color: inherit;
  padding-bottom: 4px;
  color: var(--color-text);
  border: none;
  font-size: 16px;
  outline: none;
  flex-grow: 1;
}
.error {
  color: #ed5853;
}
.response-message {
  font-size: 12px;
}
.input {
  padding: 4px;
  font-size: 18px;
  border-radius: 8px;
  border: 0.5px solid var(--color-border);
  margin-top: 16px;
  margin-bottom: 0;
  text-align: left;
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  display: inline-block;
}
.radio {
  padding: 8px;
}
.submit {
  color: #ffffff;
  background-color: var(--color-accent);
  border-radius: 24px;
  padding: 12px;
  font-size: 20px;
  text-decoration: none;
  border: 0;
}
.submit:hover {
  background-color: var(--color-surface);
  padding: 11px;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
select {
  display: block;
  font-size: 16px;
  color: #444;
  line-height: 1.3;
  padding: 0.6em 1.4em 0.5em 0.8em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-bottom: 3px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.08);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #fff 100%);
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  font-weight: 400;
  font-family: inherit;
}
/* Hide arrow icon in IE browsers */
/* Hover style */
/* Focus style */
.bbcodeFontSize1 {
  font-size: 10px;
}
.bbcodeFontSize2 {
  font-size: 13px;
}
.bbcodeFontSize3 {
  font-size: 15px;
}
.bbcodeFontSize4 {
  font-size: 17px;
}
.bbcodeFontSize5 {
  font-size: 19px;
}
.bbcodeFontSize6 {
  font-size: 22px;
}
.bbcodeFontSize7 {
  font-size: 24px;
}
.bbcodeFontSize8 {
  font-size: 28px;
}
.code {
  font-size: 14px;
  overflow: scroll;
  overflow-y: auto;
  overflow-x: auto;
  white-space: pre;
}
.spoiler {
  margin-top: 4px;
  border: 0.5px solid var(--color-border-contrast);
  border-radius: 12px;
  max-width: 100%;
}
.spoiler .spoiler-title {
  background-color: var(--color-surface-sunken);
  padding: 12px;
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: 0.17s;
}
.spoiler .spoiler-contents {
  border: 2px solid var(--color-surface-sunken);
  border-radius: 0 0 12px 12px;
  padding: 8px;
}
.quote, blockquote {
  margin-left: 12px;
  padding: 8px 12px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  border-left: 6px solid #777777;
}
.big-resource-card {
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-flow: column;
  background-color: var(--color-glass-1);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.1);
  color: inherit;
  transition: 0.17s;
}
.big-resource-card:hover {
  background-color: var(--color-glass-2);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.2);
}
.card, .resource-card {
  background-color: rgba(var(--color-overlay-rgb), 0.6);
  border-radius: 6px;
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.2);
  color: inherit;
  transition: 0.17s;
}
.card:hover, .resource-card:hover {
  background-color: rgba(var(--color-overlay-rgb), 0.9);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.3);
}
.card-nohover {
  background-color: rgba(var(--color-overlay-rgb), 0.667);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: inherit;
}
.resource-card {
  margin: 0 0 10px;
  width: 100%;
}
.header-wrapper {
  margin: 0;
  margin-bottom: 10px;
  width: 100%;
  background-color: rgba(var(--color-overlay-rgb), 0.667);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: inherit;
}
.header-button {
  font-weight: 200;
}
.header-button.selected {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.header-button-prominent {
  background-color: #eee;
  color: #111;
  border-radius: 4px;
  padding: 4px;
  border: 1px solid #eee;
}
.header-button-prominent:hover {
  color: #eee;
  background-color: inherit;
  text-decoration: none;
}
.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip-container .tooltip-dismiss {
  font-size: 11px;
  width: 20px;
  color: white;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  left: 50px;
  top: -78px;
  position: absolute;
  z-index: 2;
}
.tooltip-container .tooltip-text {
  font-size: 14px;
  visibility: hidden;
  width: 120px;
  background-color: rgba(21, 20, 21, 0.8);
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 4px;
  left: -69px;
  right: 0;
  top: -72px;
  position: absolute;
  z-index: 1;
}
.category-button {
  font-size: 12px;
  background-color: transparent;
  color: var(--color-accent-alt);
  padding: 3px 5px;
  border: 1px solid var(--color-accent-alt);
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  margin: 2px;
}
.category-button.theme-color {
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.category-button:hover {
  background-color: rgba(0, 0, 0, 0.4);
  cursor: hand;
  text-decoration: none;
}
.category-button-selected {
  font-size: 12px;
  color: #ffffff;
  background-color: var(--color-accent-alt);
  padding: 3px 5px;
  border: 1px solid var(--color-accent-alt);
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  margin: 2px;
}
.category-button-selected.theme-color {
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.category-button-selected:hover {
  color: #ffffff;
  background-color: #03c2c3;
  transition: 0.17s;
  text-decoration: none;
}
.main-content-wrapper {
  display: inline-flex;
  margin-top: 16px;
  width: 90%;
  max-width: 79em;
  text-align: left;
}
.main-content {
  width: 73%;
  background-color: inherit;
  text-align: left;
}
.product-head {
  width: 100%;
}
.product-head-actions {
  text-align: right;
}
.product-title {
  font-weight: 600;
  font-size: 17px;
}
.product-subtitle {
  font-weight: 300;
  font-size: 13px;
  color: var(--color-text-muted);
  -webkit-font-smoothing: antialiased !important;
}
/* Card-grid titles/subtitles have no length limit elsewhere in the app, but a
   long one here makes this card taller than its grid siblings -- CSS Grid
   only equalizes height within a row, so different rows end up ragged.
   Clamp to keep every card the same footprint. */
.big-resource-card .product-title, .big-resource-card .product-subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-content {
  margin-left: 24px;
  border-radius: 6px;
  height: 100%;
  width: 27%;
  text-align: left;
}
.card, .resource-card {
  background-color: rgba(var(--color-overlay-2-rgb), 0.8);
  box-shadow: 2px 6px 12px 1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--control-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: 600 14px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.pm-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--color-ring);
}
.pm-btn--primary {
  background: var(--color-accent-fill);
  color: var(--color-accent-contrast);
}
.pm-btn--primary:hover {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.12);
}
.pm-btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.pm-btn--secondary:hover {
  background: var(--color-fill);
}
.pm-btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.pm-btn--ghost:hover {
  background: var(--color-fill);
  color: var(--color-text);
}
.pm-btn--danger {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-danger);
}
.pm-btn--danger-solid {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-surface);
}
.pm-btn--sm {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
}
.pm-btn--block {
  display: flex;
  width: 100%;
}
.pm-btn[disabled], .pm-btn.is-disabled {
  background: var(--color-fill);
  border-color: transparent;
  color: var(--color-text-subtle);
  box-shadow: none;
  cursor: not-allowed;
}

.pm-field {
  display: grid;
  gap: var(--space-1);
}
.pm-label {
  font: 500 13px/1.3 var(--font-body);
  color: var(--color-text);
}
.pm-hint {
  font-size: 12px;
  color: var(--color-text-subtle);
}
.pm-error-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-danger);
}
.pm-input, .pm-select, .pm-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--control-pad-x);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-contrast);
  border-radius: var(--radius-md);
  font: 400 14px/1.4 var(--font-body);
}
.pm-textarea {
  min-height: 96px;
  padding: var(--control-pad-x);
}
.pm-select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378808c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.pm-input::placeholder, .pm-textarea::placeholder {
  color: var(--color-text-subtle);
}
.pm-input:focus, .pm-select:focus, .pm-textarea:focus {
  outline: 0;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-ring);
}
.pm-input.is-error, .pm-select.is-error, .pm-textarea.is-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-tint);
}
.pm-input:disabled, .pm-select:disabled, .pm-textarea:disabled {
  background: var(--color-fill);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.pm-check {
  appearance: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--color-border-contrast);
  border-radius: 5px;
  background: var(--color-surface) center / 12px no-repeat;
  vertical-align: -3px;
  cursor: pointer;
}
.pm-check:checked {
  background-color: var(--color-accent-fill);
  border-color: var(--color-accent-fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.pm-check:focus-visible, .pm-switch:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--color-ring);
}
.pm-switch {
  appearance: none;
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  vertical-align: -5px;
  cursor: pointer;
  transition: background-color 0.12s;
}
.pm-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: left 0.12s;
}
.pm-switch:checked {
  background: var(--color-accent-fill);
}
.pm-switch:checked::after {
  left: 16px;
}
.pm-dropzone {
  padding: var(--space-4);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-text-muted);
}

.pm-card {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pm-card--raised {
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
}
.pm-card--featured {
  border: 2px solid var(--color-accent);
}
.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-fill);
  color: var(--color-text-muted);
  font: 500 11px/1.6 var(--font-body);
  white-space: nowrap;
}
.pm-chip--accent {
  background: var(--color-accent-tint);
  color: var(--color-accent-alt);
}
.pm-chip--success {
  background: var(--color-success-tint);
  color: var(--color-success);
}
.pm-chip--warning {
  background: var(--color-warning-tint);
  color: var(--color-warning);
}
.pm-chip--danger {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}
.pm-chip--info {
  background: var(--color-info-tint);
  color: var(--color-info);
}
.pm-chip--inverse {
  background: var(--color-text);
  color: var(--color-surface);
}
.pm-avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-fill);
  color: var(--color-text-muted);
  font: 600 12px/1 var(--font-body);
}

.pm-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--color-fill);
}
.pm-seg > * {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  cursor: pointer;
}
.pm-seg > .is-on {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.pm-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.pm-tabs::-webkit-scrollbar {
  display: none;
}
.pm-tab {
  padding: 10px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.pm-tab.is-on {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.pm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--color-text);
}
.pm-table th {
  padding: 8px 12px;
  background: var(--color-fill);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
}
.pm-table td {
  padding: var(--cell-pad-y) 12px;
  border-bottom: 1px solid var(--color-border);
}
.pm-table tr:last-child td {
  border-bottom: 0;
}
.pm-table-wrap {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pm-density-compact {
  --control-height: 28px;
  --control-pad-x: 8px;
  --cell-pad-y: 5px;
  font-size: 12px;
}
.pm-stat {
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pm-stat__label {
  font-size: 12px;
  color: var(--color-text-subtle);
}
.pm-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
}
.pm-series-1 {
  background: var(--color-chart-1);
}
.pm-series-2 {
  background: var(--color-chart-2);
}
.pm-series-3 {
  background: var(--color-chart-3);
}
.pm-series-4 {
  background: var(--color-chart-4);
}
.pm-series-5 {
  background: var(--color-chart-5);
}

.pm-scrim {
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--color-scrim);
}
.pm-modal {
  box-sizing: border-box;
  width: min(440px, 100%);
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.pm-modal__title {
  margin: 0 0 var(--space-2);
  font: 700 16px/1.3 var(--font-display);
}
.pm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.pm-callout {
  display: flex;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-info-tint);
  color: var(--color-info);
}
.pm-callout--success {
  background: var(--color-success-tint);
  color: var(--color-success);
}
.pm-callout--warning {
  background: var(--color-warning-tint);
  color: var(--color-warning);
}
.pm-callout--danger {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}
.pm-callout--highlight {
  background: var(--color-warning-tint);
  border: 1px solid var(--color-highlight);
  color: var(--color-warning);
}
.pm-code {
  padding: var(--space-3);
  overflow: auto;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: var(--radius-md);
  font: 12px/1.6 var(--font-mono);
}

.pm-thread-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.pm-thread-row:last-child {
  border-bottom: 0;
}
.pm-composer {
  background: var(--color-surface);
  border: 1px solid var(--color-border-contrast);
  border-radius: var(--radius-lg);
}
.pm-composer:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-ring);
}
.pm-toolbar {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: var(--color-fill);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--color-text-muted);
}
.pm-toolbar > * {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pm-toolbar > .is-on, .pm-toolbar > *:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* resource cards: weight for the title, the price/status badge on the thumbnail, the author line and the download count
   (markup in productlist.php and utils/ProductUtils.php) */
.big-resource-card .product-title {
  font-weight: 700;
}
.card-thumb-badge {
  position: absolute;
  z-index: 1;
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(2px);
}
.card-thumb-badge.price {
  right: 8px;
  bottom: 8px;
}
.card-thumb-badge.status {
  left: 8px;
  top: 8px;
}
/* free reads as emerald, paid as gold on the dark badge */
.card-thumb-badge.free {
  background: var(--color-success-tint);
  color: var(--color-success);
  box-shadow: inset 0 0 0 1px var(--color-success);
}
.card-thumb-badge.paid {
  color: var(--color-highlight);
}
.card-versions, .pm-ver-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.card-author-line {
  font-weight: 600;
  margin-top: 2px;
}
.card-download-count {
  font-variant-numeric: tabular-nums;
}
/* resource list cards: current version beside the title, last update and release date under the chips */
.big-resource-card .product-title:has(+ .card-version) {
  display: inline;
}
.card-version {
  margin-left: 4px;
  color: var(--color-text-subtle);
  font-size: 13px;
  font-weight: 400;
}
.card-dates {
  margin-top: 6px;
  color: var(--color-text-subtle);
  font-size: 12px;
}

/* stat tiles (resource and server info panels): two per row, hairline dividers instead of a border on every tile */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stat-cell {
  padding: 10px 12px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stat-cell:nth-child(2n) {
  border-right: none;
}
.stat-cell:nth-last-child(-n+2) {
  border-bottom: none;
}
.stat-cell .stat-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
}
.stat-cell .stat-key {
  font-size: 11px;
  color: var(--color-text-subtle);
  margin-top: 2px;
}

/* "Created by" card on resource and bundle sidebars (utils/SidebarCards.php) */
.sidebar-owner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
}
.sidebar-owner-link {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-grow: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.sidebar-owner-text {
  min-width: 0;
}
.sidebar-owner-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.sidebar-owner-name {
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.sidebar-owner-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  vertical-align: middle;
}
.sidebar-owner-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

/* game-flavored pieces, all token-driven. pm-slot, pm-ver, pm-status, pm-copy and pm-tip are adopted page by page. */

/* inventory slot: a square frame with a bevel (dark top/left edge, light bottom/right) around a resource or server icon.
   Size comes from --slot-size so a page can scale it without a second class. */
.pm-slot {
  --slot-size: 48px;
  display: inline-flex;
  flex: none;
  width: var(--slot-size);
  height: var(--slot-size);
  padding: 4px;
  box-sizing: border-box;
  background: var(--color-slot-bg);
  border-radius: var(--radius-slot);
  box-shadow: inset 2px 2px 0 var(--color-slot-shade), inset -2px -2px 0 var(--color-slot-light);
}
.pm-slot > img, .pm-slot > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-slot--sm { --slot-size: 32px; padding: 3px; }
.pm-slot--lg { --slot-size: 72px; padding: 6px; }

/* item tooltip: the box itself (.pm-tip), and a CSS-only hover version for any element with data-tip (.pm-has-tip) */
.pm-tip, .pm-has-tip[data-tip]::after {
  padding: 6px 10px;
  background: var(--color-tip-bg);
  border: 2px solid var(--color-tip-border);
  border-radius: var(--radius-slot);
  color: var(--color-tip-text);
  font: 500 12px/1.4 var(--font-body);
}
.pm-has-tip {
  position: relative;
}
.pm-has-tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  transition: opacity 0.12s ease;
}
.pm-has-tip[data-tip]:hover::after, .pm-has-tip[data-tip]:focus-visible::after {
  opacity: 1;
}

/* version chip: a game version or platform, e.g. "1.21" or "Paper". The pixel face is for labels this small only. */
.pm-ver {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-slot);
  color: var(--color-text-muted);
  font: 500 12px/1.5 var(--font-pixel);
  white-space: nowrap;
}
.pm-ver--latest {
  background: var(--color-diamond-tint);
  border-color: var(--color-diamond);
  color: var(--color-diamond);
}

/* server status: a dot and the player count. Online pulses unless the visitor asked for less motion. */
.pm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font: 600 13px/1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pm-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-subtle);
}
.pm-status--online {
  color: var(--color-success);
}
.pm-status--online::before {
  background: var(--color-success);
  animation: pm-status-pulse 2s ease-out infinite;
}
@keyframes pm-status-pulse {
  0% { box-shadow: 0 0 0 0 var(--color-success-tint); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-status--online::before { animation: none; }
}

/* copy chip: a server address that copies on click (the page's script adds .is-copied for a moment) */
.pm-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: 500 13px/1.5 var(--font-mono);
  cursor: pointer;
}
.pm-copy:hover {
  border-color: var(--color-accent);
}
.pm-copy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-ring);
}
.pm-copy.is-copied {
  background: var(--color-success-tint);
  border-color: var(--color-success);
  color: var(--color-success);
}

/* main nav dropdown (browseNavMenu): categories with counts, subcategories in a flyout */
.nav-drop {
  position: relative;
  display: inline-block;
}
.browse-count {
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.browse-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 240px;
  padding: var(--space-2);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.nav-drop:hover > .browse-menu,
.nav-drop:focus-within > .browse-menu {
  display: block;
}
.browse-item-wrap {
  position: relative;
}
.browse-flyout {
  top: -9px;
  left: 100%;
}
.browse-item-wrap:hover > .browse-flyout,
.browse-item-wrap:focus-within > .browse-flyout {
  display: block;
}
.browse-menu hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2) 0;
}
html body a.browse-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 7px 10px;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
html body a.browse-menu-item:hover {
  background: var(--color-fill);
}

/* unified search page (search.php) */
.search-page {
  max-width: 56em;
  text-align: left;
}
.search-hero {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.search-hero .pm-input {
  flex: 1;
  min-height: 44px;
  font-size: 16px;
}
.search-hero .pm-btn {
  min-height: 44px;
}
.search-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.search-filters .pm-field {
  min-width: 180px;
}
.search-types .pm-chip {
  margin-left: 6px;
}
.search-section {
  margin-top: var(--space-5);
}
.search-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.search-section-head h2 {
  margin: 0 0 var(--space-2);
  font-size: 18px;
}
.search-results {
  padding: 0;
  overflow: hidden;
}
.search-result:last-child {
  border-bottom: 0;
}
.search-result {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
.search-result:hover {
  background: var(--color-fill);
}
.search-result-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex: none;
}
.search-result-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.search-result-title {
  font-weight: 600;
}
.search-result-sub,
.search-result-meta {
  font-size: 13px;
  color: var(--color-text-muted);
}
.search-empty {
  color: var(--color-text-muted);
}
.search-pager {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
  margin: var(--space-5) 0;
}

/* caret on nav items that open a dropdown, and on categories that open a flyout */
.nav-drop > a.main-header-tab::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  vertical-align: 2px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  opacity: 0.7;
}
.browse-item-wrap:has(> .browse-flyout) > a.browse-menu-item::after {
  content: "";
  flex: none;
  margin-left: var(--space-2);
  border: 4px solid transparent;
  border-left-color: currentColor;
  border-right-width: 0;
  opacity: 0.6;
}
.browse-item-wrap:has(> .browse-flyout) > a.browse-menu-item {
  justify-content: flex-start;
}
.browse-item-wrap:has(> .browse-flyout) > a.browse-menu-item > span:first-child {
  flex: 1;
}

.browse-hint {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* in the mobile sidebar the dropdown opens inline (the sidebar scrolls and would clip a floating menu) */
#global-sidebar-nav .browse-menu {
  position: static;
  min-width: 0;
  margin: 4px 0 8px 12px;
  box-shadow: none;
}
#global-sidebar-nav .browse-flyout {
  position: static;
  margin-left: 12px;
}

/* the header stays pinned to the top of the window while the page scrolls, above the page so its dropdowns are not
   covered by <object> card images or positioned content. Its height is published as --site-header-h (set from the
   header script, these are the fallbacks) so pinned sidebars and bars sit under it instead of behind it. */
:root {
  --site-header-h: 0px;
}
:root:has(#main-header-background) {
  --site-header-h: 65px;
}
@media (max-width: 968px) {
  :root:has(#main-header-background) {
    --site-header-h: 57px;
  }
}
html {
  scroll-padding-top: calc(var(--site-header-h) + var(--space-3));
}
html body #main-header-background {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Site popups (utils/PopupUtils.php, showSitePopup in polymart.js): one card in the bottom corner, not a modal */
.site-popup {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;
  box-sizing: border-box;
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s, transform 0.18s;
}
.site-popup.is-open {
  opacity: 1;
  transform: none;
}
.site-popup__title {
  margin: 0 var(--space-5) var(--space-2) 0;
  font: 700 15px/1.3 var(--font-display);
}
.site-popup__body {
  margin: 0;
  color: var(--color-text-muted);
  font: 400 13px/1.5 var(--font-body);
}
.site-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.site-popup__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.site-popup__close:hover {
  background: var(--color-fill);
  color: var(--color-text);
}
.site-popup__never {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-subtle);
  font: 400 12px/1.4 var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}
.site-popup__never:hover {
  color: var(--color-text);
}
.site-popup__close:focus-visible,
.site-popup__never:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--color-ring);
}
@media (max-width: 560px) {
  .site-popup {
    right: var(--space-2);
    left: var(--space-2);
    bottom: var(--space-2);
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-popup {
    transition: none;
  }
}

/*
 * Page shell: layout of every page, served last, after components.css.
 *
 * Two things here work around the existing markup and the theme overlay (tradeprowl-theme.php):
 *  - The overlay pins layout properties with !important and body:has() selectors (negative margins that drag the
 *    resource title row and the content wrapper into place, which made the wrapper cover the tab bar). So these rules use
 *    !important too, and the same selectors with an extra "html" in front, which outranks theirs.
 *  - The header markup is two stacked bands. display: contents on the wrapper elements lets the logo, nav, search and
 *    account buttons all become items of one flex row, ordered below.
 * Colors come from tokens only.
 */

html body #main-header-background {
  height: auto !important;
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
html body #div-background-image, html body #body-container-background-color {
  background-image: none !important;
}

/* phones: nothing may be wider than the screen. The old sheets give list rows and headers a 400px minimum. */
html body :is(.flex-container-centered, .product-head, .resource-card, .header-navigation-container, .header-tabs) {
  min-width: 0 !important;
}
@media (max-width: 700px) {
  html body .resource-card {
    width: auto !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}
@media (max-width: 700px) {
  /* forums: the thread column keeps its desktop padding on top of the page margin */
  html body div[style*="padding-top: 56px"][style*="padding-left: 24px"] {
    padding: 16px 0 0 !important;
  }
  html body #new-thread-button {
    white-space: nowrap;
  }
  /* the page script pads these generously on narrow screens (32px + 16px + 24px); use a phone-sized gutter instead */
  html body #main-content-wrapper:not(.main-content-wrapper) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html body #main-content-wrapper:not(.main-content-wrapper) > #main-content,
  html body #main-content-wrapper:not(.main-content-wrapper) #main-content {
    padding: 12px 4px !important;
  }
  html body span.button[onclick*="toggleSortOptions"] {
    white-space: nowrap;
  }
  /* home page Discover block: categories, then the two buttons, instead of a 66% / 34% split */
  html body div[style*="grid-template-columns: 66% 34%"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 16px;
  }
  /* long code lines and wide tables scroll inside their block instead of widening the whole page (wiki, docs) */
  html body .body-container-contents {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  html body .body-container-contents pre {
    max-width: 100%;
    overflow-x: auto;
  }
  html body .body-container-contents code:not(pre code) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  html body .body-container-contents table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  html body textarea, html body select {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* the reviews preview on the overview tab: one column, not the page script's 400px columns */
  html body #reviews > div[style*="display: grid"], html body #reviews > div:has(> div[id^="review-"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* tab bars: one scrollable row instead of wrapping under the active underline */
  html body .header-wrapper div:has(> a.header-button) {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  html body .header-wrapper div:has(> a.header-button)::-webkit-scrollbar {
    display: none;
  }
}
/* the old pill-shaped form submit: same button as the rest of the site, and white text on the readable red fill */
html body .submit, html body form .submit {
  box-sizing: border-box;
  min-height: var(--control-height);
  padding: 0 var(--space-4) !important;
  background-color: var(--color-accent-fill) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md);
  color: var(--color-accent-contrast) !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
html body .submit:hover, html body form .submit:hover {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.12);
}
@media (max-width: 700px) {
  html body textarea.input, html body input.input {
    min-width: 0 !important;
    width: 100% !important;
  }
  html body .form-wrapper > form {
    display: block;
    width: 100%;
  }
  /* a title with badges beside it: badges drop below instead of squeezing the name into pieces */
  html body #main-content div[style*="display: flex"]:has(> h1),
  html body #main-content div[style*="display: flex"]:has(> div > h1) {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}
/* native file chooser: the same button look as the rest of the site */
html body input[type="file"] {
  color: var(--color-text-muted);
  font: 400 13px/1.4 var(--font-body);
}
html body input[type="file"]::file-selector-button {
  margin-right: var(--space-2);
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: 600 13px/1.2 var(--font-body);
  cursor: pointer;
}
html body input[type="file"]::file-selector-button:hover {
  background: var(--color-fill);
}
/* bundle list: space under the header, and the cards line up with the heading instead of floating in the middle */
html body:has(#bundle-grid) .page-content-wrapper {
  padding-top: var(--space-5);
}
html body #bundle-grid {
  display: grid !important;
  justify-content: start;
  margin-left: 0 !important;
}
/* the single-input form widget (license check, link import): the button keeps its label on one line and the input shrinks */
html body form > div[style*="display: flex"] > div[style*="align-self: stretch"] {
  flex: none;
}
html body form > div[style*="display: flex"] > div[style*="align-self: stretch"] a.button {
  white-space: nowrap;
}
html body form > div[style*="display: flex"] > div[style*="flex-grow: 1"] {
  min-width: 0;
}
@media (max-width: 520px) {
  html body form > div[style*="display: flex"]:has(> div[style*="align-self: stretch"]) {
    flex-direction: column;
    padding: 0 !important;
  }
  html body form > div[style*="display: flex"] > div[style*="flex-grow: 1"] {
    padding: 0 12px 4px;
  }
  html body form > div[style*="display: flex"] > div[style*="align-self: stretch"] a.button {
    display: flex !important;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* header on phones: logo, then menu button and search, in about 130px instead of 260px */
html body #global-header-small > div:nth-child(1) {
  padding: 12px 0 0 !important;
}
html body #global-header-small > div:nth-child(2) {
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
}
html body #global-header-small > div:nth-child(2) > div {
  margin-bottom: 12px !important;
}
html body #global-header-small [style*="margin-right: 48px"] {
  margin-right: 16px !important;
}

/* header: one compact row (logo, nav, search, account buttons); the category strip, when a page has one, wraps below */
html body #global-header-big:not([style*="display: none"]) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  min-height: 64px;
  height: auto !important;
  max-width: calc(var(--page-width) + 2 * var(--page-gutter));
  margin: 0 auto !important;
  padding: 0 var(--page-gutter) !important;
  box-sizing: border-box;
}
/* the gap under the nav is var(--page-gap), set as the top margin of each page's main container; the header adds none */
html body #global-header-big > div:nth-child(2),
html body #global-header-big > div:nth-child(2) > div:first-child {
  margin-bottom: 0 !important;
}
html body div[style*="padding-top: 56px"][style*="padding-left: 24px"],
html body div[style*="padding-top: 56px"][style*="padding-right: 24px"] {
  padding-top: 0 !important;
}
html body #global-header-big > div:nth-child(1),
html body #global-header-big > div:nth-child(1) > div,
html body #header-logo-flex,
html body #global-header-big > div:nth-child(2),
html body #global-header-big > div:nth-child(2) > div:first-child,
html body #global-header-big > div:nth-child(2) > div:first-child > div,
html body #global-header-big > div:nth-child(2) > div:first-child > div > div {
  display: contents !important;
}
html body #header-logo-flex > div:nth-child(1) {
  order: 1;
  flex: none;
  width: auto !important;
  margin: 0 !important;
}
html body #global-header-big > div:nth-child(2) > div:first-child > div > div > div:first-child {
  order: 2;
  display: flex !important;
  flex: none !important;
  gap: 2px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body #global-header-big > div:nth-child(2) > div:first-child > div > div > div:nth-child(2) {
  display: none !important;
}
html body #header-logo-flex > div:nth-child(2) {
  order: 3;
  flex: 1 1 0 !important;
  min-width: 120px !important;
  max-width: 560px !important;
  margin-left: auto !important;
  width: auto !important;
  overflow: hidden;
}
html body #header-logo-flex > div:nth-child(2) * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
html body #header-logo-flex > div:nth-child(2) form {
  width: 100% !important;
  margin: 0 !important;
}
/* the search is a compact field sized to the 64px row: icon and text centred, no tile padding */
html body #header-logo-flex > div:nth-child(2) .icon-input {
  display: flex !important;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: var(--radius-md) !important;
}
html body #header-logo-flex > div:nth-child(2) .fa-search {
  flex: none;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px;
}
html body #header-logo-flex > div:nth-child(2) .input-inner {
  flex: 1 1 auto;
  width: 100%;
  padding: 0 !important;
  font-size: 14px !important;
  text-overflow: ellipsis;
}
html body #header-logo-flex-buttons {
  order: 4;
  flex: none;
  width: auto !important;
}
html body #global-header-big a.main-header-tab {
  height: auto !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}
html body #global-header-big a.main-header-tab {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
html body #global-header-big a.main-header-tab .admin-resource-notification-wrapper {
  display: inline-flex;
  gap: 6px;
}
html body #global-header-big a.main-header-tab .admin-resource-notification-wrapper > span,
html body #global-header-big a.main-header-tab > span[style*="border-radius"] {
  display: inline-flex;
  align-items: center;
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 3px 6px !important;
}
html body #global-header-big a.main-header-tab.selected {
  background: var(--color-fill) !important;
  color: var(--color-text) !important;
}

/* between the phone breakpoint (968px) and a full desktop the row is tight: the search gives up width first, then
   the tabs and the account buttons tighten, so nothing wraps onto a second row */
html body #header-logo-flex > div:nth-child(2) form {
  padding: 0 !important;
}
@media (max-width: 1240px) {
  html body #global-header-big:not([style*="display: none"]) {
    column-gap: 10px;
    padding: 0 var(--page-gutter) !important;
  }
  html body #global-header-big a.main-header-tab {
    padding: 8px 7px !important;
    font-size: 13px !important;
  }
  html body #header-logo-flex-buttons .main-header-account-button-wrapper {
    padding-right: 8px !important;
  }
}
@media (max-width: 1100px) {
  html body #header-logo-flex > div:nth-child(2) {
    min-width: 0 !important;
  }
  html body #header-logo-flex > div:nth-child(2) .fa-search {
    display: none;
  }
}

/* phone header: the menu button and search stay on one row at any width */
html body #global-header-small > div:nth-child(2) > div > div[style*="display: flex"] {
  flex-wrap: nowrap;
  align-items: center;
}
html body #global-header-small > div:nth-child(2) > div > div[style*="display: flex"] > div:nth-child(2) {
  min-width: 0;
}
html body #global-header-small .icon-input {
  display: flex;
  align-items: center;
}
html body #global-header-small .icon-input .input-inner {
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* category strip (resource and server lists) */
html body #global-header-big > div:nth-child(2) > div:nth-child(2) {
  order: 10;
  flex: 0 0 100%;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--color-border);
  background: transparent !important;
}
html body #global-header-big .page-content-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body #global-header-big .page-content {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2px;
  width: 100% !important;
  max-width: none !important;
  padding: 6px 0 !important;
}
html body #global-header-big a.subheader-link {
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
html body #global-header-big a.subheader-link.selected, html body #global-header-big a.subheader-link:hover {
  background: var(--color-fill) !important;
  color: var(--color-text) !important;
}

/* resource and server detail pages: title row, tab bar, then main column with the info panel on the right */
html body .resource-head-row {
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 0 0 !important;
}
html body div:has(> div > .resource-head-row) {
  margin-top: 0 !important;
  padding-top: 24px !important;
}
html body div:has(> .header-wrapper) .header-wrapper {
  margin-bottom: 0 !important;
}
html body:has(.resource-head-row) div:has(> #main-content-wrapper #sidebar-content) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body:has(#sidebar-content):has(.resource-head-row) .main-content-wrapper {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  width: var(--page-width) !important;
  max-width: calc(100% - 2 * var(--page-gutter)) !important;
  margin: 16px auto 48px !important;
  padding: 0 !important;
}
html body:has(#sidebar-content):has(.resource-head-row) #main-content {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content {
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content {
  align-self: start;
}
html body:has(#sidebar-content):has(.resource-head-row) #staff-sidebar {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-width: 0;
}

/* narrow screens: the filter sidebar / info panel stacks under the main column, whether or not the page script got to it */
@media (max-width: 800px) {
  html body:has(#sidebar-content):has(.resource-head-row) .main-content-wrapper,
  html body:has(#sidebar-content):has(#header-controls-wrapper) .main-content-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  html body:has(#sidebar-content):has(.resource-head-row) #main-content,
  html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content,
  html body:has(#sidebar-content):has(.resource-head-row) #staff-sidebar,
  html body:has(#sidebar-content):has(#header-controls-wrapper) #main-content,
  html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content {
    grid-column: 1;
    grid-row: auto;
  }
}

/* homepage: a hero band (stats and search), category tiles, then full-width shelves of resource cards */
html body .home-hero {
  margin-top: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
html body .home-hero h1 {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font: 700 clamp(28px, 4vw, 42px)/1.1 var(--font-display);
  letter-spacing: -0.02em;
}
html body .home-hero p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.5;
}
html body .home-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 14px;
}
html body .home-stats strong {
  color: var(--color-text);
  font-weight: 700;
}
html body .home-search {
  display: flex;
  gap: var(--space-2);
  max-width: 680px;
  margin: var(--space-5) auto 0;
}
html body .home-search input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  padding: 0 var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 15px;
}
html body .home-search input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-ring);
}
html body .home-search .button {
  flex: none;
  height: 48px;
  margin: 0 !important;
  padding: 0 var(--space-5) !important;
}

/* category tiles: name and listing count; twelve tiles, so six, four or three to a row */
html body .home-categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
html body .home-category {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: inherit !important;
  text-decoration: none !important;
}
html body .home-category:hover {
  background: var(--color-fill);
  border-color: var(--color-border-strong);
}
html body .home-category-name {
  overflow: hidden;
  color: var(--color-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1100px) {
  html body .home-categories {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  html body .home-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
html body .home-category-count {
  color: var(--color-text-subtle);
  font-size: 12px;
}

/* shelves */
html body .home-section {
  margin-top: var(--space-7);
}
html body .home-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
}
html body .home-section-title {
  margin: 0;
  color: var(--color-text);
  font: 700 20px/1.25 var(--font-display);
  letter-spacing: -0.01em;
}
html body .home-section-link {
  flex: none;
  color: var(--color-accent) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* one row of four cards; fewer columns as the window narrows, a swipeable row on phones (mobile.css) */
html body .big-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1100px) {
  html body .big-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  html body .big-item-grid > :nth-child(n + 4) {
    display: none !important;
  }
}
@media (max-width: 860px) {
  html body .big-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html body .big-item-grid > :nth-child(n + 4) {
    display: block !important;
  }
}
html body .big-item-grid > * {
  min-width: 0;
  margin: 0 !important;
}
html body .big-resource-card {
  overflow: hidden;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
html body .big-resource-card:hover {
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-md) !important;
}
html body .big-resource-card img {
  color: transparent !important;
  font-size: 0 !important;
}

/* "Why Polymart": equal columns, readable icon tiles. The icon spans also carry the .button class, whose text font in the
   theme overlay replaces the icon font and leaves empty boxes. */
html body .home-why-panel {
  margin-top: var(--space-7);
  padding: var(--space-5);
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* get involved: license transfer, selling, community */
html body .home-involved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
html body .home-involved-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
html body .home-involved-card h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-strong);
  font: 700 17px/1.3 var(--font-display);
}
html body .home-involved-card p {
  flex: 1 0 auto;
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.55;
}
html body .home-involved-card > a.button, html body .home-involved-card > a.button-weak {
  margin: 0 !important;
}
html body .home-involved-card #check-external-resources {
  align-self: stretch;
}
/* the license form: input and Check button share one bordered field; the empty helper line is dropped */
html body #check-external-resources form > div:first-child {
  box-sizing: border-box;
  overflow: hidden;
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md) !important;
}
html body #check-external-resources .title {
  color: var(--color-text-subtle);
}
html body #check-external-resources .icon-input input {
  min-width: 0;
  background: transparent !important;
}
html body #check-external-resources .info:empty {
  display: none;
}
html body #check-external-resources a.button {
  border-radius: 0 !important;
}
html body .info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--space-4) !important;
}
html body .info-grid > div {
  min-width: 0;
  margin: 0 !important;
}
html body .info-grid > div > div {
  margin: 0 0 var(--space-4) !important;
}
/* the links row's inline "grid-column: 1 / 4" kept three columns alive on phones, leaving the feature cards in a 0px
   column ~35,000px tall */
html body .info-grid > div[style*="grid-column"] {
  grid-column: 1 / -1 !important;
  margin: 0 0 var(--space-3) !important;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.9;
}
@media (max-width: 900px) {
  html body .info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
html body .why-tab {
  padding: 8px 16px !important;
  font-size: 13px !important;
}
html body .home-why-panel .card {
  padding: var(--space-4) !important;
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
html body .home-why-panel .card > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3) !important;
  color: var(--color-text) !important;
  font: 700 16px/1.3 var(--font-display) !important;
  font-variant: normal !important;
  text-align: left !important;
}
html body .home-why-panel .card > div:first-child br {
  display: none;
}
html body .home-why-panel .card > div:first-child span[class*="fa"] {
  display: inline-grid !important;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-slot) !important;
  box-shadow: inset 2px 2px 0 var(--color-slot-shade), inset -2px -2px 0 var(--color-slot-light) !important;
  background: var(--color-slot-bg) !important;
  color: var(--color-text) !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
html body .home-why-panel .card > div:first-child span.fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* footer (every page) */
html body footer.site-footer {
  margin-top: var(--space-7) !important;
  background: var(--color-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  text-align: left;
}
.site-footer-inner {
  max-width: calc(var(--page-width) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--space-5) var(--page-gutter) var(--space-4);
}
.site-footer-cols {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: var(--space-5);
}
.site-footer-col {
  display: flex;
  flex-direction: column;
}
html body .site-footer h4 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-subtle) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}
html body .site-footer a {
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.9;
  text-decoration: none;
}
html body .site-footer a:hover {
  color: var(--color-text) !important;
}
html body .site-footer a.site-footer-name {
  color: var(--color-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-subtle);
}
.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}
html body .site-footer-bottom a {
  font-size: 12px !important;
}
.site-footer-copy h2 {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
@media (max-width: 700px) {
  .site-footer-cols { grid-template-columns: 1fr 1fr; }
  .site-footer-brand { grid-column: 1 / -1; }
}

/* typography: Inter everywhere. The theme overlay forces three other families (and monospace on prices and stats), so these
   outrank it; the icon font classes are excluded so icons keep working. */
html body {
  font-size: 15px;
  line-height: 1.6;
}
html body, html body :is(h1, h2, h3, h4, h5, h6, .button, .button-weak, .header-button, .product-title, [style*="font-family"]):not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: var(--font-body) !important;
}
html body :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
html body :is(.card-thumb-badge, .card-download-count, .stat-cell .stat-value) {
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums;
}

/* admin debug toggle: bottom left, so it no longer covers the account avatar */
html body div:has(> #debug-mode-toggle) {
  top: auto !important;
  right: auto !important;
  bottom: 12px !important;
  left: 12px !important;
  z-index: 1000;
}

/* filter chips (list sidebar): one size and shape; only the selected chip is accented, even when it also has .theme-color */
html body a.category-button, html body a.category-button-selected {
  display: inline-block;
  padding: 5px 12px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
html body a.category-button:hover, html body a.category-button.theme-color:not(.category-button-selected):hover {
  background: var(--color-fill) !important;
  color: var(--color-text) !important;
}
html body a.category-button.theme-color:not(.category-button-selected) {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
}
html body a.category-button-selected, html body a.category-button-selected.theme-color {
  border-color: var(--color-accent-fill) !important;
  background: var(--color-accent-fill) !important;
  color: var(--color-accent-contrast) !important;
}

/* list pages (resources, servers): the same page-width container as every other page, filters on the left */
html body:has(#sidebar-content):has(#header-controls-wrapper) .main-content-wrapper {
  display: grid !important;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 24px;
  width: var(--page-width) !important;
  max-width: calc(100% - 2 * var(--page-gutter)) !important;
  margin: var(--page-gap) auto 48px !important;
  padding: 0 !important;
}
html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content {
  grid-column: 1;
  grid-row: 1;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
/* the filter card stays in view while the results scroll; a card taller than the window scrolls on its own */
@media (min-width: 801px) {
  html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content {
    position: sticky;
    top: calc(var(--site-header-h) + var(--space-4));
    align-self: start;
    max-height: calc(100vh - var(--site-header-h) - 2 * var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* resource, server and bundle pages: the side column (buy or download, author, details) stays in view the same way */
  html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content {
    position: sticky;
    top: calc(var(--site-header-h) + var(--space-4));
    max-height: calc(100vh - var(--site-header-h) - 2 * var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* the buy, download and update buttons fit the column even when its scrollbar shows */
  html body:has(.resource-head-row) #product-head-actions,
  html body:has(.resource-head-row) #product-head-actions .product-head-action-form {
    box-sizing: border-box;
    max-width: 100%;
  }
  /* no sideways scrolling inside a pinned sidebar; the page-wide scrollbar-color (mobile.css) is reset here because
     Chrome ignores the ::-webkit-scrollbar parts below on any element with scrollbar-color set */
  html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content,
  html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content {
    overflow-x: hidden;
  }
  @supports selector(::-webkit-scrollbar) {
    html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content,
    html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content {
      scrollbar-color: auto;
      scrollbar-width: auto;
    }
  }
  /* slim rounded thumb inset from the card edge, clear of its rounded corners, no arrow buttons; darker while hovered */
  html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content::-webkit-scrollbar,
  html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content::-webkit-scrollbar {
    width: 10px;
  }
  html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content::-webkit-scrollbar-button,
  html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content::-webkit-scrollbar-button {
    display: none;
  }
  html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content::-webkit-scrollbar-track,
  html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content::-webkit-scrollbar-track {
    margin: var(--radius-lg) 0;
    background: transparent;
  }
  html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content::-webkit-scrollbar-thumb,
  html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: var(--radius-pill);
  }
  html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content:hover::-webkit-scrollbar-thumb,
  html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content:hover::-webkit-scrollbar-thumb {
    background-color: var(--color-border-contrast);
  }
  /* browsers without the ::-webkit-scrollbar parts (Firefox) get the plain thin version */
  @supports not selector(::-webkit-scrollbar) {
    html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content,
    html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content {
      scrollbar-width: thin;
      scrollbar-color: var(--color-border-strong) transparent;
    }
    html body:has(#sidebar-content):has(#header-controls-wrapper) #sidebar-content:hover,
    html body:has(#sidebar-content):has(.resource-head-row) #sidebar-content:hover {
      scrollbar-color: var(--color-border-contrast) transparent;
    }
  }
}
/* list filter card (utils/ListFilters.php): header, search, then collapsible sections */
html body .lf-card {
  box-sizing: border-box;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
}
html body .lf-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
html body .lf-title {
  flex: 1 1 auto;
  color: var(--color-text-strong);
  font: 700 16px/1.3 var(--font-display);
}
html body .lf-clear, html body .lf-active-clear {
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: underline;
}
html body .lf-clear:hover, html body .lf-active-clear:hover {
  color: var(--color-text);
}
html body .lf-mobile-toggle {
  display: none;
}
html body .lf-search {
  margin-bottom: var(--space-3);
}
html body .lf-search-form {
  width: 100%;
  margin: 0;
}
html body .lf-search form .icon-input {
  box-sizing: border-box;
  width: 100% !important;
  margin: 0;
}
html body .lf-section {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
html body .lf-section:last-child {
  padding-bottom: 0;
}
html body .lf-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
}
html body .lf-summary::-webkit-details-marker {
  display: none;
}
html body .lf-summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 4px 3px 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
html body .lf-section[open] > .lf-summary::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}
html body .lf-summary:hover {
  color: var(--color-text);
}
html body .lf-section-body {
  margin-top: var(--space-2);
}
html body .lf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html body .lf-chips a.category-button, html body .lf-chips a.category-button-selected {
  margin: 0 !important;
}
html body .lf-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
html body .lf-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted) !important;
  font-size: 14px;
  text-decoration: none;
}
html body .lf-option:hover {
  background: var(--color-fill);
  color: var(--color-text) !important;
}
html body .lf-option.is-selected {
  background: var(--color-fill);
  color: var(--color-text-strong) !important;
  font-weight: 600;
}
html body .lf-count {
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
html body .lf-option.is-selected .lf-count {
  color: inherit;
}
html body .lf-sublist {
  margin: 2px 0 4px 12px;
  padding-left: 6px;
  border-left: 1px solid var(--color-border);
}
html body .lf-sublist .lf-option {
  padding: 4px 8px;
  font-size: 13px;
}
/* dropdowns (sort, Minecraft version, language): a button showing the current choice and a menu of links in the
   site's colors, instead of the browser's select list and its system highlight */
html body .lf-dropdown {
  position: relative;
}
html body .lf-dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: var(--control-height);
  padding: 0 var(--control-pad-x);
  list-style: none;
  cursor: pointer;
  user-select: none;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-contrast);
  border-radius: var(--radius-md);
  font: 400 14px/1.4 var(--font-body);
  white-space: nowrap;
}
html body .lf-dropdown-button::-webkit-details-marker {
  display: none;
}
html body .lf-dropdown-button::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 2px 3px 0;
  border-right: 1.5px solid var(--color-text-subtle);
  border-bottom: 1.5px solid var(--color-text-subtle);
  transform: rotate(45deg);
}
html body .lf-dropdown[open] > .lf-dropdown-button::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}
html body .lf-dropdown-button:hover {
  border-color: var(--color-text-subtle);
}
html body .lf-dropdown[open] > .lf-dropdown-button {
  border-color: var(--color-text-subtle);
}
html body .lf-dropdown-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
html body .lf-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
html body .lf-dropdown-end .lf-dropdown-menu {
  right: 0;
  left: auto;
}
html body .lf-dropdown-item {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted) !important;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
/* the menu sits on the raised surface, which matches --color-fill in dark mode, so the hover uses the border tone */
html body .lf-dropdown-item:hover {
  background: var(--color-border);
  color: var(--color-text) !important;
}
html body .lf-dropdown-item.is-selected {
  color: var(--color-text-strong) !important;
  font-weight: 600;
}
/* inside the filter card the menu opens in place, so the card's own scrolling can't clip it */
html body .lf-section .lf-dropdown-menu {
  position: static;
  margin-top: var(--space-1);
  max-height: 240px;
  box-shadow: none;
}

/* above the results: title and count, then sort and the page's one action on the same line; the active filters below */
html body .lf-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
html body .lf-results-title {
  margin: 0;
  color: var(--color-text-strong);
  font: 800 28px/1.2 var(--font-display);
}
html body .lf-results-count {
  color: var(--color-text-subtle);
  font-size: 14px;
  white-space: nowrap;
}
html body .lf-results-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
html body .lf-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
html body .lf-sort-label {
  color: var(--color-text-muted);
  font-size: 14px;
  white-space: nowrap;
}
html body .lf-sort .lf-dropdown-button {
  min-width: 180px;
}
html body .lf-results-action {
  display: inline-flex;
  flex: none;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--control-height);
  margin: 0 !important;
  padding: 0 var(--space-4) !important;
  white-space: nowrap;
}
/* forum thread list: the title and New Thread row stays pinned the same way */
html body .forum-list-head {
  position: sticky;
  top: var(--site-header-h);
  z-index: 5;
  align-items: center;
  margin-top: calc(-1 * var(--space-4));
  padding: var(--space-4) 0 var(--space-3);
  background: var(--tp-bg, var(--color-bg));
}
/* the title row and active filters stay pinned while the cards scroll under them */
html body .lf-results-top {
  position: sticky;
  top: var(--site-header-h);
  z-index: 5;
  margin-top: calc(-1 * var(--space-4));
  padding: var(--space-4) 0 var(--space-1);
  background: var(--tp-bg, var(--color-bg));
}
html body .lf-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
}
html body .lf-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-fill);
  color: var(--color-text) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
html body .lf-active-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--color-text-subtle);
  font-size: 16px;
  line-height: 1;
}
html body .lf-active-chip:hover .lf-active-x {
  background: var(--color-border);
  color: var(--color-text);
}
html body .lf-active-clear {
  margin-left: var(--space-1);
}

/* phones: the card sits above the results, folded down to its header until opened */
@media (max-width: 800px) {
  html body #main-content-wrapper:has(#list-filters) {
    display: flex !important;
    flex-direction: column;
  }
  html body #main-content-wrapper:has(#list-filters) > #sidebar-content {
    order: -1;
    /* the old sidebar rule's flex: 0 0 320px would become a fixed 320px height in this column */
    flex: none !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 0 var(--space-4) !important;
    padding: 0 !important;
  }
  html body .lf-card {
    padding: var(--space-3) var(--space-4);
  }
  html body .lf-title {
    display: none;
  }
  html body .lf-head {
    align-items: center;
    justify-content: space-between;
  }
  html body .lf-mobile-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    padding: 6px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: 600 14px/1.3 var(--font-body);
    cursor: pointer;
  }
  html body .lf-card:not(.lf-open) .lf-head {
    margin-bottom: 0;
  }
  html body .lf-card:not(.lf-open) .lf-body {
    display: none;
  }
  html body .lf-results-title {
    font-size: 24px;
  }
  /* phones: tighter, so the pinned block leaves room for the cards */
  html body .lf-results-top {
    margin-top: 0;
    padding: var(--space-2) 0 var(--space-1);
  }
  html body .lf-results-bar {
    margin-bottom: var(--space-2);
  }
  /* active filters stay on one row that scrolls sideways */
  html body .lf-active {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: var(--space-2);
  }
  html body .lf-active::-webkit-scrollbar {
    display: none;
  }
  html body .lf-active > * {
    flex: none;
  }
  html body .lf-results-tools {
    width: 100%;
    margin-left: 0;
  }
  html body .lf-sort {
    flex: 1 1 auto;
  }
  html body .lf-sort {
    min-width: 0;
  }
  /* the visible "Sort by" label goes; the dropdown keeps it as its accessible name */
  html body .lf-sort-label {
    display: none;
  }
  html body .lf-sort .lf-dropdown {
    flex: 1 1 auto;
    min-width: 0;
  }
  html body .lf-sort .lf-dropdown-button {
    min-width: 0;
  }
}
html body:has(#sidebar-content):has(#header-controls-wrapper) #main-content {
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
html body:has(#header-controls-wrapper) div:has(> #main-content-wrapper #sidebar-content) {
  margin-top: 0 !important;
  margin-bottom: -40px !important;
  padding-top: 0 !important;
}
/* the title block above the list is hidden on desktop, but as an inline-block it still left a 24px empty line under the nav */
html body .page-content:has(> #header-controls-wrapper), html body #header-controls-wrapper {
  display: block !important;
  margin-left: auto;
  margin-right: auto;
}
/* as many ~300px cards per row as fit, instead of the page script's fixed two columns */
html body #resource-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
  gap: var(--space-4) !important;
  margin-right: 0 !important;
}
/* the post button's two <br>s left a 48px hole above the filters */
html body #new-resource-button {
  margin-bottom: var(--space-2);
}
html body #new-resource-button ~ br {
  display: none;
}
/* list sidebar: sized to its card, not stretched to the results column */
html body:has(#header-controls-wrapper) #sidebar-content {
  align-self: start;
}
html body .form-wrapper form:has(.icon-input input[name="search"]) > table,
html body .form-wrapper form:has(.icon-input input[name="search"]) > table > tbody,
html body .form-wrapper form:has(.icon-input input[name="search"]) > table > tbody > tr {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
}
html body .form-wrapper form:has(.icon-input input[name="search"]) td {
  display: block;
  width: auto !important;
  padding: 0;
}
html body .form-wrapper form:has(.icon-input input[name="search"]) td:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
html body .form-wrapper form:has(.icon-input input[name="search"]) td:nth-child(2) {
  display: none;
}
html body .form-wrapper form:has(.icon-input input[name="search"]) input.button {
  width: auto !important;
  margin: 0 !important;
  padding: 0 var(--control-pad-x) !important;
  min-height: var(--control-height);
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* the language picker above the server search, and any other select in a sidebar form */
html body .form-wrapper form > select {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--control-height);
  padding: 0 32px 0 var(--control-pad-x);
  appearance: none;
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378808c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border-contrast) !important;
  border-radius: var(--radius-md) !important;
  font: 400 14px/1.4 var(--font-body);
}

/* header search (the wide and the narrow copy): its inline #3e3e3e background was dark-mode only, which left dark text on
   dark grey in light mode */
html body div.icon-input[style*="#3e3e3e"] {
  background-color: var(--color-fill) !important;
  border: 1px solid var(--color-border) !important;
}
html body div.icon-input[style*="#3e3e3e"] input {
  color: var(--color-text) !important;
  font-size: 14px !important;
}
html body div.icon-input[style*="#3e3e3e"] input::placeholder {
  color: var(--color-text-subtle) !important;
  opacity: 1;
}

html body #new-resource-button {
  padding: 12px 16px !important;
  border-radius: var(--radius-md) !important;
}
html body .product-subtitle {
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.5;
}
html body .card-author-line {
  color: var(--color-text-subtle) !important;
  font-size: 13px !important;
}

/* detail pages: one left edge for title, tabs and content, and the action box matches the 320px info panel below it */
html body div:has(> .resource-head-row) {
  display: block !important;
  width: var(--page-width) !important;
  max-width: calc(100% - 2 * var(--page-gutter)) !important;
  margin: 0 auto !important;
}
html body .resource-head-row {
  gap: 0 !important;
}
html body .resource-head-row > div:first-child:has(img:not([hidden])) {
  margin-right: var(--space-4);
}
html body .resource-head-row > div:first-child:not(:has(img:not([hidden]))) {
  display: none;
}
html body .resource-head-row > div:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0 !important;
}
html body .resource-head-row .product-title {
  margin: 0 8px 0 0 !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
}
html body .resource-head-row .product-subtitle {
  margin: var(--space-1) 0 0 !important;
  font-size: 15px !important;
}
html body #product-head-actions-wrapper {
  flex: none;
  width: 100% !important;
  margin-bottom: var(--space-3);
  box-sizing: border-box;
  padding: var(--space-3) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
}
html body .resource-head-row + br {
  display: none;
}
html body #product-head-actions {
  width: 100% !important;
}
html body #product-head-actions :is(a, button).button {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
html body .header-wrapper > div {
  padding-left: 0 !important;
}
html body .header-wrapper a.header-button {
  margin-right: var(--space-5) !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* account settings: the shared container, one card per setting */
html body:has(#grid-container) .main-content-wrapper {
  display: block !important;
  width: var(--page-width) !important;
  max-width: calc(100% - 2 * var(--page-gutter)) !important;
  margin: var(--page-gap) auto var(--space-7) !important;
  padding: 0 !important;
}
html body #grid-container {
  gap: var(--space-4) !important;
  width: 100% !important;
}
html body #grid-container > div {
  box-sizing: border-box;
  margin: 0 !important;
  padding: var(--space-5) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left !important;
}
html body #grid-container > div [style*="font-size: 24px"], html body #grid-container > div :is(h1, h2, h3) {
  margin: 0 0 var(--space-3) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: left !important;
}
html body #grid-container > div form, html body #grid-container > div div[id$="-form-hidden"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  text-align: left !important;
}
html body #grid-container .button, html body #grid-container input.button {
  border-radius: var(--radius-md) !important;
}

/* forums: the shared container, with the category list as a card instead of a full-height edge panel */
html body div:has(> .all-big-width-only[style*="min-width: 320px"]) {
  width: var(--page-width) !important;
  max-width: calc(100% - 2 * var(--page-gutter)) !important;
  min-height: 0 !important;
  margin: var(--page-gap) auto var(--space-7) !important;
  gap: var(--space-5);
}
html body .all-big-width-only[style*="min-width: 320px"] {
  flex: none;
  align-self: flex-start;
  box-sizing: border-box;
  width: 288px !important;
  min-width: 0 !important;
  padding: var(--space-4) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* shared page shell (pageOpen() / pageClose() in utils/PageLayout.php): the one place the gap under the nav is set */
html body .pm-page {
  display: block;
  box-sizing: border-box;
  width: var(--page-width);
  max-width: calc(100% - 2 * var(--page-gutter));
  margin: var(--page-gap) auto var(--space-7);
  text-align: left;
}
html body .pm-page-with-side {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
html body .pm-page-side {
  box-sizing: border-box;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
/* the side card (forum categories) stays in view while the main column scrolls; a tall one scrolls on its own */
html body .pm-page-with-side > .pm-page-side {
  position: sticky;
  top: calc(var(--site-header-h) + var(--space-4));
  max-height: calc(100vh - var(--site-header-h) - 2 * var(--space-4));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html body .pm-page-main {
  min-width: 0;
}
@media (max-width: 700px) {
  html body .pm-page-with-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* forums: the thread column has no extra padding, like the list pages' main column */
html body div[style*="padding-top: 56px"][style*="padding-left: 24px"] {
  min-width: 0;
  padding: 0 !important;
}

/* wiki: same container as forums (page width and gutter, same vertical spacing) instead of a 1280px inline-block */
html body .body-container-contents[style*="max-width: 1280px"], html body .body-container-contents.wiki-page {
  display: block !important;
  width: var(--page-width) !important;
  max-width: calc(100% - 2 * var(--page-gutter)) !important;
  margin: var(--page-gap) auto var(--space-7) !important;
  box-sizing: border-box;
}

/* wiki hub and articles: category card on the left (same 288px as the list pages), cards and article text on the right */
.wiki-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.wiki-sidebar {
  position: sticky;
  top: calc(var(--site-header-h) + var(--space-5));
}
.wiki-sidebar-card {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.wiki-sidebar-title {
  margin-bottom: var(--space-2);
  font-size: 16px;
  font-weight: 600;
}
.wiki-count {
  color: var(--color-text-subtle);
  font-size: 13px;
  font-weight: 400;
}
.wiki-sidebar-link {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--color-text) !important;
  font-size: 14px;
  text-decoration: none !important;
}
.wiki-sidebar-heading {
  display: block;
  margin-top: var(--space-3);
  padding: 4px 10px;
  color: var(--color-text-subtle) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  text-transform: uppercase;
}
.wiki-sidebar-heading + .wiki-sidebar-link, .wiki-sidebar-link + .wiki-sidebar-link {
  margin-top: 1px;
}
.wiki-sidebar-link:hover, .wiki-sidebar-current {
  background: var(--color-fill);
}
.wiki-sidebar-actions {
  margin-top: var(--space-4);
}
.wiki-sidebar-actions .button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
.wiki-main {
  min-width: 0;
}
.wiki-title {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.015em;
}
.wiki-title, .wiki-subtitle {
  text-align: center;
}
/* page title row: title centered, admin links on the right */
.wiki-section-head:has(> .wiki-title) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.wiki-section-head > .wiki-title {
  grid-column: 2;
}
.wiki-section-head > .wiki-title ~ .wiki-admin-links {
  grid-column: 3;
  justify-content: flex-end;
}
.wiki-subtitle, .wiki-section-desc {
  margin: var(--space-2) 0 0;
  color: var(--color-text-subtle);
}
.wiki-section {
  margin-top: var(--space-6, 32px);
}
.wiki-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.wiki-section-head h2 {
  margin: 0;
  font-size: 22px;
}
.wiki-admin-links {
  display: flex;
  flex: none;
  gap: var(--space-4);
  font-size: 14px;
}
.wiki-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.wiki-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text) !important;
  text-decoration: none !important;
}
.wiki-card:hover {
  border-color: var(--color-border-strong);
}
.wiki-card span {
  color: var(--color-text-subtle);
  font-size: 14px;
}
.wiki-card em {
  margin-top: auto;
  color: var(--color-accent);
  font-size: 14px;
  font-style: normal;
}
.wiki-empty, .wiki-crumbs {
  color: var(--color-text-subtle);
  font-size: 14px;
}
.wiki-crumbs {
  margin-bottom: var(--space-2);
}
.wiki-article-body {
  margin-top: var(--space-4);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.wiki-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 760px;
  margin-top: var(--space-4);
}
.wiki-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
.wiki-form :is(input, select, textarea) {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
}
.wiki-form textarea {
  font-family: monospace;
}
.wiki-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.wiki-delete {
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}
@media (max-width: 700px) {
  .wiki-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .wiki-sidebar {
    position: static;
  }
}

/* list pages: the sort control is a secondary button, not a second red call to action */
html body span.button[onclick*="toggleSortOptions"] {
  padding: 6px 12px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html body span.button[onclick*="toggleSortOptions"]:hover {
  background: var(--color-fill) !important;
}

/* resource page action box: the secondary download links are readable and centered under the main button */
html body #product-head-actions form, html body #product-head-actions > div {
  display: block !important;
  margin-top: var(--space-2) !important;
  text-align: center;
}
html body #product-head-actions form button.theme-color, html body #product-head-actions > div a {
  padding: 4px 0 !important;
  background: none !important;
  border: 0 !important;
  color: var(--color-accent) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html body #product-head-actions form button.theme-color:hover, html body #product-head-actions > div a:hover {
  color: var(--color-accent-hover) !important;
}
html body #product-head-actions form button.theme-color span {
  font-size: 14px !important;
}

/* cart and wishlist: full-width secondary buttons under the buy button; accent border and text when already added */
html body #product-head-actions :is(a, button).buy-secondary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: var(--control-height, 40px);
  padding: 0 var(--control-pad-x, 16px) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
}
html body #product-head-actions :is(a, button).buy-secondary:hover {
  background: var(--color-fill) !important;
  color: var(--color-text) !important;
}
html body #product-head-actions :is(a, button).buy-secondary.is-active {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}
html body #product-head-actions :is(a, button).buy-secondary span {
  margin: 0 10px 0 0 !important;
  font-size: 14px !important;
}


/* Shell for pages with a #sidebar-content that are NOT a resource/server list or detail page (user, team, payout, message):
   sidebar on the left at 320px, main column beside it, both full-bleed. Moved here from the theme overlay so every layout
   rule lives in this file. The list and detail pages override all of it with the "html body:has(...)" rules above. */
/* Resource/server listing and detail pages put main-content before
   sidebar-content in source order, rendering the sidebar on the right;
   the forums page uses its own hand-built layout with the nav panel on
   the left. Flip the shared flex order here (one rule, all pages using
   this wrapper) instead of patching each page's markup, so any page
   built on .main-content-wrapper stays visually consistent with forums.
   Scoped to pages that actually have a #sidebar-content -- some pages
   (newindex.php, account.php) reuse the SAME .main-content-wrapper
   class for an unrelated single-column section, and an unscoped rule
   here was reordering/full-bleeding/stretching those too. */
body:has(#sidebar-content) .main-content-wrapper {
    flex-direction: row-reverse !important;
}
/* The native CSS put the 24px gutter as margin-left on sidebar-content,
   which made sense when it rendered after main-content (on the right).
   Now that it's flipped to render first (on the left), that margin needs
   to move to the other side, or the two panels sit flush against each
   other with no gap. */
.sidebar-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 320px !important;
    flex: 0 0 320px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}
.main-content {
    width: auto !important;
    flex: 1 1 auto !important;
    padding-left: 24px !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
}
/* Forums' two-column wrapper starts at the true left edge of the viewport
   (x: 0) -- its background colors run flush to the screen edge, with only
   its own padding (not a centered-container margin) inset the content.
   .main-content-wrapper instead sits nested inside the same "90% width,
   max 80em, centered" wrapper every other page uses, so its sidebar
   starts ~5% in from the edge instead of flush. Break it out of that
   centered container (classic full-bleed technique) so the gray/black
   split reaches the real screen edges the same way forums' does, while
   the padding above keeps the actual content/text from touching the edge. */
body:has(#sidebar-content) .main-content-wrapper {
    width: calc(100vw - var(--scrollbar-width, 0px)) !important;
    max-width: calc(100vw - var(--scrollbar-width, 0px)) !important;
    margin-left: calc(-50vw + 50% + var(--scrollbar-width, 0px)) !important;
    margin-right: calc(-50vw + 50% + var(--scrollbar-width, 0px)) !important;
}
/* The sidebar search box (serverlist.php/productlist.php) is laid out as
   a <table> with the input in one cell and the Search button in another;
   tables don't shrink their cells to fit, so now that the sidebar is a
   narrower fixed 320px (was a wider %-based column), the button cell
   overflows past the sidebar's edge instead of wrapping/shrinking. Force
   the table to respect the container width instead of sizing to content. */
.sidebar-content table {
    table-layout: fixed !important;
    width: 100% !important;
}
/* The moderator "Sessions" table (user.php) squeezes IP/date columns
   into unreadable widths under the generic fixed-layout rule above --
   let it size columns by content and scroll horizontally (via the
   overflow-x: auto wrapper around it) instead of clipping/squishing. */
.sidebar-content table.sessions-table {
    table-layout: auto !important;
    width: auto !important;
}
.sidebar-content .icon-input {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Sidebar content (chip/tag rows, buttons) should sit centered within the
   panel rather than flush against its left edge. */
#sidebar-content-inner {
    text-align: center !important;
}
#sidebar-content-inner > div {
    text-align: center !important;
}
.sidebar-content input.button[type="submit"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
/* The "Post a new resource"/"Add your server" button was styled at 90%
   width (a leftover from when the sidebar was wider and the button had
   room to sit inset from the edge). Against forums' flush, edge-to-edge
   list styling, that reads as a floating card rather than a panel item --
   stretch it to fill the now-narrower sidebar instead. */
#new-resource-button {
    width: 100% !important;
}

/* Forums forces its two-column flex wrapper to min-height: 100vh, so the
   split always fills the viewport regardless of content length.
   .main-content-wrapper doesn't do that, so on shorter pages the split
   stops as soon as the content does instead of running the full page --
   match forums by stretching it the same way. Same #sidebar-content
   scoping as the rules above -- forcing 100vh on newindex.php's/
   account.php's unrelated single-column section left a large blank
   gap below their actual content. */
body:has(#sidebar-content) .main-content-wrapper {
    min-height: 100vh !important;
}

/* profile avatar: the picture sits centered in its inventory slot */
.profile-avatar-col .pm-slot {
  align-items: center;
  justify-content: center;
}

.profile-title-row h1 {
  font-size: 30px !important;
  letter-spacing: -0.015em;
}
.profile-about {
  padding: var(--space-4) !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.profile-mod {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  text-align: left;
}
.profile-mod > summary {
  color: var(--color-text-muted);
  cursor: pointer;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.profile-mod > summary:focus {
  outline: none;
}
.profile-mod > summary:focus-visible {
  box-shadow: 0 0 0 3px var(--color-ring);
}

/* account panel (inbox, alerts, updates; openAccountModal in polymart.js): a dropdown under the header icon on wide screens,
   a full-screen sheet on phones. One scroll area (the body); the list inside is the profile page's own markup, so a few rules
   below tidy the parts of it that assume a full page. */
.account-panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 1999;
  pointer-events: none;
}
.account-panel {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 16px));
  max-height: min(72vh, 680px);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: 14px;
  text-align: left;
}
.account-panel-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.account-panel-title {
  flex: 1;
  font: 700 18px/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.account-panel-count {
  margin-left: var(--space-2);
  padding: 2px 8px;
  background: var(--color-accent-tint);
  border-radius: var(--radius-pill);
  color: var(--color-accent-alt);
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: 0;
}
.account-panel-close {
  padding: 4px 6px;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
}
.account-panel-close:hover {
  color: var(--color-text);
}
.account-panel-body {
  flex: 1 1 auto;
  min-height: 96px;
  padding: var(--space-2) var(--space-4) var(--space-4);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.account-panel-body .flex-container-centered {
  display: block !important;
  margin: 0 !important;
}
.account-panel-body [style*="margin-left: 16px"] {
  margin-left: 0 !important;
}
.account-panel-body [style*="font-size: 32px"] {
  margin: var(--space-6) 0 !important;
  color: var(--color-text-muted);
  font-size: 16px !important;
  text-align: center;
}
.account-panel-body img {
  max-width: 100%;
}
.account-panel-empty {
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
  text-align: center;
}
html.account-panel-open {
  overflow: hidden;
}
@media (max-width: 700px) {
  .account-panel-scrim {
    background: var(--color-scrim);
  }
  .account-panel {
    inset: 0;
    width: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}

/* account menu (accountMenu.php, shown in the panel under the profile icon): text rows, one primary action */
.account-panel:has(.account-menu) {
  width: min(320px, calc(100vw - 16px));
}
.account-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.account-menu-user {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.account-menu-name {
  min-width: 0;
  overflow: hidden;
  font: 700 16px/1.3 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-user a {
  font-size: 13px;
  font-weight: 600;
}
.account-menu-list {
  display: flex;
  flex-direction: column;
}
.account-menu-list > a, .account-menu-list > button {
  display: block;
  padding: 10px 8px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text) !important;
  cursor: pointer;
  font: 500 14px/1.3 var(--font-body);
  text-align: left;
  text-decoration: none;
}
.account-menu-list > a:hover, .account-menu-list > button:hover {
  background: var(--color-fill);
}
.account-menu-list small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-subtle);
  font-size: 11.5px;
  font-weight: 400;
}
.account-menu-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
  color: var(--color-text-subtle);
  font: 600 12px/1.4 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-menu-label button {
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.account-menu-label button:hover {
  background: var(--color-fill);
}
.account-menu-footer {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* profile tabs (user.php): the shared pm-tabs bar, a count pill, and the panels under it */
.profile-tabs {
  margin: var(--space-5) 0 var(--space-4);
}
.profile-tabs .pm-tab {
  font-size: 15px;
  font-weight: 600;
}
.profile-tabs .pm-tab:hover {
  color: var(--color-text);
}
.pm-tab-count {
  margin-left: var(--space-2);
  padding: 1px 7px;
  background: var(--color-fill);
  border-radius: var(--radius-pill);
  color: var(--color-text-subtle);
  font: 600 11px/1.6 var(--font-body);
}
.pm-tab.is-on .pm-tab-count {
  background: var(--color-accent-tint);
  color: var(--color-accent-alt);
}
.profile-panel[hidden] {
  display: none;
}
.profile-panel-tools {
  margin-bottom: var(--space-3);
  text-align: right;
}
.team-manage-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  text-align: left;
}
.team-manage-label {
  flex-basis: 100%;
  font-weight: 600;
  color: var(--color-text-muted);
}
.profile-empty {
  padding: var(--space-7) 0;
  color: var(--color-text-muted);
  text-align: center;
}

/* feed */
.profile-composer {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.profile-composer textarea {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: var(--space-2);
  box-sizing: border-box;
  background: transparent;
  border: 0;
  color: var(--color-text);
  font: 400 15px/1.5 var(--font-body);
  resize: vertical;
}
.profile-composer textarea:focus {
  outline: none;
}
.profile-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.profile-composer-error {
  color: var(--color-danger);
  font-size: 13px;
}
.profile-post, .profile-review {
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.profile-post-meta, .profile-review-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-subtle);
  font-size: 12px;
}
.profile-post-body, .profile-review-body {
  margin-top: var(--space-2);
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
}
.profile-post-remove {
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-subtle);
  cursor: pointer;
  font-size: 12px;
}
.profile-post-remove:hover {
  color: var(--color-danger);
}

/* reviews */
.profile-review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.profile-review-title {
  font: 700 16px/1.3 var(--font-display);
}
.profile-review-score {
  flex: none;
  color: var(--color-text-muted);
  font: 600 13px/1 var(--font-mono);
}
.profile-review-meta {
  justify-content: flex-start;
  margin-top: 2px;
}

/* user and team profiles (user.php, team.php): one contained column. .profile-head is a two-column grid: the avatar on
   the left, the name and the teams (or owner) row stacked beside it, then the about panel and everything after it (tabs,
   panels) across the full width. .flex-container-centered and the right-hand .profile-main-col drop out of the layout
   (display: contents) so their children are items of that grid. */
html body #main-content-wrapper:has(.profile-main-col) {
  display: block !important;
  box-sizing: border-box;
  width: var(--page-width) !important;
  max-width: calc(100% - 2 * var(--page-gutter)) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: var(--page-gap) 0 var(--space-8) !important;
  text-align: left;
}
html body #main-content:has(.profile-main-col) {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
html body .profile-head {
  display: grid;
  width: 100%;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: end;
  column-gap: var(--space-5);
}
html body .profile-head > .flex-container-centered,
html body .profile-main-col {
  display: contents !important;
}
html body .profile-main-col {
  font-size: 14px !important;
}
html body .profile-head > *,
html body .profile-head > .flex-container-centered > *,
html body .profile-main-col > * {
  grid-column: 1 / -1;
}
html body .profile-head .profile-avatar-col {
  grid-column: 1;
  grid-row: 1 / span 2;
  max-width: none !important;
  padding: 0 !important;
}
html body .profile-head > .profile-title-row {
  grid-column: 2;
  grid-row: 1;
}
html body .profile-head .profile-meta-row {
  grid-column: 2;
  grid-row: 2;
  margin-top: var(--space-2);
}
html body .profile-head .profile-about {
  grid-row: 3;
  margin-top: var(--space-5);
}
/* the avatar, name and teams overlay the bottom-left of the page banner and the about panel starts under it; user.php
   and team.php measure that part and set --profile-overlay-h to pull the page up by that much */
html body #main-content-wrapper:has(.profile-main-col) {
  position: relative;
  margin-top: calc(-1 * var(--profile-overlay-h, 0px)) !important;
  padding-top: 0 !important;
}
html body #main-content-wrapper:has(.profile-main-col)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--profile-overlay-h, 0px);
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
  border-radius: 0 0 4px 4px;
  pointer-events: none;
}
html body #main-content-wrapper:has(.profile-main-col) :is(.profile-title-row, .profile-meta-row) {
  position: relative;
  padding-right: var(--space-4);
}
html body #main-content-wrapper:has(.profile-main-col) .profile-avatar-col {
  position: relative;
  margin-left: var(--space-4);
}
html body #main-content-wrapper:has(.profile-main-col) .profile-title-row h1,
html body #main-content-wrapper:has(.profile-main-col) .profile-meta-row .profile-label-inline {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
@media (max-width: 700px) {
  html body .profile-head {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: var(--space-3);
  }
}
.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.profile-teams {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.profile-label-inline {
  color: var(--color-text-subtle);
  font: 600 12px/1.4 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.profile-team {
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
}
.profile-owner-tools {
  margin-top: var(--space-7);
  font-size: 13px;
  text-align: center;
}

/* panel header action (the inbox's "New message") and the note under the updates list */
.account-panel-action {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.account-panel-note {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-fill);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* header account icons: one hit-box and one icon size, a steady gap, and the count as a badge on the icon's corner.
   display is left alone on purpose: the page's script shows and hides the duplicate theme toggles through it. */
html body #header-logo-flex-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
html body #header-logo-flex-buttons > div {
  display: flex;
  align-items: center;
}
html body .main-header-account-button-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
html body .main-header-account-button-wrapper > div {
  display: flex;
  align-items: center;
}
html body .main-header-account-button {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-md);
  font-size: 17px !important;
  line-height: 1;
}
html body .main-header-account-button:hover {
  background: var(--color-fill);
}
html body .main-header-account-button img {
  width: 30px;
  height: 30px;
}
html body .main-header-account-button > span[style*="background-color"] {
  position: absolute;
  top: 1px;
  right: -1px;
  min-width: 16px;
  height: 16px;
  margin: 0 !important;
  padding: 0 4px !important;
  box-sizing: border-box;
  border-radius: var(--radius-pill) !important;
  font: 700 10px/16px var(--font-body) !important;
  text-align: center;
}

/* Browse tabs (echoBrowseTabs in Header.php): resources, servers, bundles and users, shared by the four list pages */
.browse-tabs-wrap {
  box-sizing: border-box;
  width: var(--page-width);
  max-width: calc(100% - 2 * var(--page-gutter));
  margin: var(--page-gap) auto 0;
}
.browse-tabs .pm-tab {
  font-size: 15px;
  font-weight: 600;
}
.browse-tabs .pm-tab:hover {
  color: var(--color-text);
}

/* wishlist tab on the profile: resource cards in a responsive grid, each with its buy-for button underneath */
.profile-wishlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.profile-following-heading {
  font-size: 15px;
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
}
.profile-following-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
.profile-wishlist-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* account settings tabs (account.php): the shared pm-tabs bar over the settings sections. A section whose tab is not the
   active one is hidden, even where its own class sets a display value. */
.account-tabs {
  margin-top: var(--space-4);
}
.account-tabs .pm-tab {
  font-size: 15px;
  font-weight: 600;
}
.account-tabs .pm-tab:hover {
  color: var(--color-text);
}
[data-account-tab][hidden] {
  display: none !important;
}

/* account sub-pages (payout, billing history): one centered column under the account tab bar */
.account-page {
  box-sizing: border-box;
  width: var(--page-width);
  max-width: calc(100% - 2 * var(--page-gutter));
  margin: var(--page-gap) auto var(--space-8);
  text-align: left;
}
.account-page > * {
  max-width: 920px;
}
.account-page-title {
  margin: 0 0 var(--space-4);
  font: 700 28px/1.2 var(--font-display);
  letter-spacing: -0.015em;
}
.account-note {
  margin: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.account-page .pm-callout {
  margin-bottom: var(--space-5);
}
.account-page .pm-callout {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.account-page .pm-callout a {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.account-admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: 14px;
}

/* payout */
.payout-balance {
  font: 600 56px/1.1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.payout-balance.is-negative {
  color: var(--color-danger);
}
.payout-balance-note {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: 16px;
}
.payout-balance-note strong {
  color: var(--color-text);
}
.payout-request {
  margin: var(--space-5) 0;
}
.payout-stats {
  max-width: 560px;
  margin-top: var(--space-5);
}

/* billing history */
.billing-table td {
  vertical-align: top;
}
.billing-table td[colspan] {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}

/* native messaging inside the inbox panel (polymart.js: openMessageThread, openMessageCompose). The panel is wider while a
   conversation or the composer is open, so the editor toolbar has room. */
.account-panel--wide {
  width: min(640px, calc(100vw - 16px));
}
.msg-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.msg-back {
  flex: none;
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  font: 600 12px/1.5 var(--font-body);
}
.msg-back:hover {
  background: var(--color-fill);
}
.msg-bar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: 700 16px/1.3 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-with {
  flex: none;
  font-size: 13px;
  font-weight: 600;
}
.msg-older {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 6px;
  background: var(--color-fill);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font: 600 12px/1.5 var(--font-body);
}
.msg-older[hidden] {
  display: none;
}
.msg {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.msg-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.msg-main {
  flex: 1;
  min-width: 0;
}
.msg-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 12px;
}
.msg-meta a {
  font-size: 13px;
  font-weight: 700;
}
.msg-meta span {
  color: var(--color-text-subtle);
}
.msg-body {
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6;
}
.msg-body img {
  max-width: 100%;
}
.msg--auto .msg-body {
  color: var(--color-text-muted);
}
.msg-composer, .msg-compose {
  margin-top: var(--space-4);
}
.msg-composer textarea, .msg-compose textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
}
.msg-label {
  display: block;
  margin: var(--space-3) 0 var(--space-1);
  color: var(--color-text-subtle);
  font: 600 12px/1.4 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.msg-compose .pm-input {
  width: 100%;
  box-sizing: border-box;
}
.msg-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.msg-error {
  color: var(--color-danger);
  font-size: 13px;
}

/* conversation context in the panel: who it is with, and what the people handling a team's inbox can do */
.msg-info {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: 13px;
}
.msg-info--mod {
  color: var(--color-text-subtle);
  font-size: 12px;
}
.msg-staff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-fill);
  border-radius: var(--radius-md);
  font-size: 13px;
}
.msg-status {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font: 600 11px/1.6 var(--font-body);
}
.msg-status--new {
  background: var(--color-danger-tint);
  color: var(--color-danger);
}
.msg-status--progress {
  background: var(--color-info-tint);
  color: var(--color-info);
}
.msg-status--closed {
  background: var(--color-success-tint);
  color: var(--color-success);
}
.msg-staff select {
  padding: 2px 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: 500 12px/1.5 var(--font-body);
}
.msg-small {
  padding: 2px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  font: 600 12px/1.5 var(--font-body);
}
.msg-small:hover {
  background: var(--color-surface-sunken);
}

/* the Message action next to a person's name on their profile */
.profile-title-actions {
  align-self: center;
  margin-left: auto;
}
/* Follow and Message sit together at the far right: only the first one takes the free space */
.profile-title-actions + .profile-title-actions {
  margin-left: var(--space-2);
}

/* phones: buttons get a thumb-sized target */
@media (max-width: 700px) {
  html body .button, html body .button-weak, html body input[type="submit"], html body button {
    min-height: 40px;
    box-sizing: border-box;
  }
}

/* resource sidebar actions: compact full-width buttons with an even gap, no per-button inline sizing */
html body #sidebar-content a.button, html body #sidebar-content a.button-weak {
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  min-height: 0;
  margin: 0 0 var(--space-2) !important;
  padding: 8px var(--control-pad-x) !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 700px) {
  html body #sidebar-content a.button, html body #sidebar-content a.button-weak {
    min-height: 36px;
    padding: 8px 12px !important;
  }
}

/* full-width buttons on any page: the same compact size as the sidebar actions */
html body :is(a, input, button).button:is([style*="width: 100%"], [style*="width:100%"], [style*="min-width: 100%"]),
html body :is(a, input, button).button-weak:is([style*="width: 100%"], [style*="width:100%"], [style*="min-width: 100%"]) {
  box-sizing: border-box;
  padding: 8px var(--control-pad-x) !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  line-height: 1.3;
}
@media (max-width: 700px) {
  html body :is(a, input, button).button:is([style*="width: 100%"], [style*="width:100%"], [style*="min-width: 100%"]),
  html body :is(a, input, button).button-weak:is([style*="width: 100%"], [style*="width:100%"], [style*="min-width: 100%"]) {
    min-height: 36px;
    padding: 8px 12px !important;
  }
}

/* admin / moderator action panels (resource sidebar, user profile) */
html body .mod-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: var(--space-3, 12px);
  border: 1px solid var(--color-border);
  border-left: 3px solid #ed5853;
  background: var(--color-surface);
  border-radius: var(--radius-lg, 12px);
  font-size: 13px;
  text-align: left;
}
html body .mod-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
html body .mod-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(237, 88, 83, 0.15);
  color: #ed5853;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html body .mod-note, html body .mod-group-label {
  color: var(--color-text-subtle);
  font-size: 12px;
}
html body .mod-group-label {
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
html body .mod-group {
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--color-border);
}
html body .mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
html body .mod-actions:empty {
  display: none;
}
html body .mod-actions > a, html body .mod-actions > form > a, html body .mod-actions button, html body .mod-form-button, html body a.mod-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
html body .mod-actions > a:hover, html body .mod-actions > form > a:hover, html body .mod-actions button:hover, html body .mod-form-button:hover, html body a.mod-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text);
  text-decoration: none;
}
html body .mod-actions > a.mod-danger, html body a.mod-chip.mod-danger {
  color: #ed5853;
  border-color: rgba(237, 88, 83, 0.45);
}
html body .mod-actions > a.mod-danger:hover, html body a.mod-chip.mod-danger:hover {
  background: rgba(237, 88, 83, 0.14);
  color: #ed5853;
}
html body .mod-actions > form {
  margin: 0;
}
html body .mod-rating {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
html body .mod-rating-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  color: var(--color-text);
  text-decoration: none;
}
html body .mod-rating-option + .mod-rating-option {
  border-left: 1px solid var(--color-border);
}
html body .mod-rating-option:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text);
  text-decoration: none;
}
html body .mod-rating-option.active, html body .mod-rating-option.active:hover {
  background: #ed5853;
  color: #fff;
  font-weight: 700;
}

/* resource Edit page: stacked sections of compact actions */
.settings-page {
  max-width: 760px;
  text-align: left;
}
.settings-page h2 {
  margin: 0 0 var(--space-2);
}
.settings-section {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.settings-section h3 {
  margin: 0 0 var(--space-3);
  font-size: 16px;
}
.settings-section a.button, .settings-section a.button-weak {
  display: block;
  margin: 0 0 var(--space-2);
  text-align: center;
}

/* owner dashboard shell: side panel (back link, subject, section menu) on the left, the section on the right */
.dash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  text-align: left;
}
.dash-side {
  flex: 0 0 220px;
  position: sticky;
  top: calc(var(--site-header-h) + var(--space-4));
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}
html body .dash-back {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: 13px;
  text-decoration: none;
}
html body .dash-back:hover {
  color: var(--color-text);
}
.dash-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-subject {
  margin: 2px 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-group {
  margin: var(--space-4) 0 var(--space-1);
  padding: 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-group:first-child {
  margin-top: 0;
}
html body .dash-link {
  display: block;
  padding: 7px var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 14px;
  text-decoration: none;
}
html body .dash-link:hover, html body .dash-current {
  background: var(--color-fill);
}
html body .dash-current {
  font-weight: 600;
}
.dash-main {
  flex: 1;
  min-width: 0;
  max-width: 820px;
}
.dash-head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.dash-head h2 {
  margin: 0;
  font-size: 22px;
}
.dash-head p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}
.dash-main .settings-section:first-of-type {
  margin-top: 0;
}
@media (max-width: 800px) {
  .dash {
    flex-direction: column;
    gap: var(--space-4);
  }
  .dash-side {
    position: static;
    flex-basis: auto;
    width: 100%;
  }
  .dash-group {
    display: none;
  }
  .dash-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .dash-main {
    max-width: none;
    width: 100%;
  }
}

/* owner previewing the page as a buyer */
.buyer-view-bar {
  margin: var(--space-3) auto;
  padding: var(--space-2) var(--space-4);
  max-width: var(--page-width);
  box-sizing: border-box;
  background: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  text-align: center;
}

/* every .button / .button-weak / .intent-button shares one size, weight, radius and hover, matching .pm-btn.
   (span.button tiles and sort toggles keep their own rules: this only touches links, buttons and inputs) */
html body :is(a, button, input).button, html body :is(a, button, input).intent-button, html body :is(a, button, input).button-weak {
  box-sizing: border-box;
  padding: 8px var(--control-pad-x) !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none;
}
/* .button-weak is the secondary button: neutral surface, grey border, body text, like .pm-btn--secondary
   (the theme's red outline and the old .dark/.light white or black outlines made it compete with the primary) */
html body :is(a, button, input).button-weak:not(.error-color) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text) !important;
}
html body :is(a, button, input).button-weak:not(.error-color):hover {
  background: var(--color-fill) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-strong) !important;
}
html body :is(a, button, input).button:hover, html body :is(a, button, input).intent-button:hover, html body :is(a, button, input).button-weak:hover {
  transform: none !important;
  text-decoration: none !important;
}
html body :is(a, button, input).button:active, html body :is(a, button, input).intent-button:active, html body :is(a, button, input).button-weak:active {
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
}
html body :is(a, button, input).button:focus-visible, html body :is(a, button, input).intent-button:focus-visible, html body :is(a, button, input).button-weak:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--color-ring);
}

/* resource sidebar: no card backgrounds; the owner, buy panel and stats flow as one column split by hairlines */
html body:has(.resource-head-row) #sidebar-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body:has(.resource-head-row) #sidebar-content > .card-nohover,
html body:has(.resource-head-row) #sidebar-content #product-head-actions-wrapper {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  margin: 0 !important;
  padding: var(--space-4) 0 !important;
  border-top: 1px solid var(--color-border) !important;
}
html body:has(.resource-head-row) #sidebar-content > :is(.card-nohover, #product-head-actions-wrapper):first-child {
  border-top: 0 !important;
  padding-top: 0 !important;
}
html body:has(.resource-head-row) #sidebar-content > .card-nohover > :is(div, a) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* page banners are a slim 5:1 strip; profiles and teams keep a taller 4:1 one because their header overlays the bottom
   of it. Both are cut from the middle of the 1920x1080 upload, scaled to the strip's width */
html body:has(.profile-main-col) #page-banner {
  aspect-ratio: 4 / 1 !important;
}

/*
 * Phones and tablets: served last, after layout.css (layers.php, "_shell").
 *
 * Two breakpoints, used everywhere below and nowhere else in this file:
 *  - 968px: the header script (resizeHeader in utils/Header.php, headerSmallWidth) swaps to the small header at this
 *    width, so the header row and the menu drawer key off the same number.
 *  - 700px: phones. Single column, thumb-sized controls, tighter cards.
 * Rules use the same "html body" prefix as layout.css so they outrank the theme overlay. Colors come from tokens only.
 */

/* scrollbars follow the theme (the default light bar showed on the home rails in dark mode) */
html {
  scrollbar-color: var(--color-border-strong) transparent;
}

/* ---------- menu drawer (#global-sidebar-nav): slides in from the left over a scrim ---------- */
html body #global-sidebar-nav.sidenav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1501;
  display: flex;
  flex-direction: column;
  width: min(320px, 86vw) !important;
  max-width: none !important;
  height: auto;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface) !important;
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  text-align: left;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
html body #global-sidebar-nav.sidenav.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease;
}
html body .sidenav-scrim {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--color-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
html body .sidenav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}
html.sidenav-open, html.sidenav-open body {
  overflow: hidden !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #global-sidebar-nav.sidenav, html body .sidenav-scrim {
    transition: none !important;
  }
}

/* base.css styles every drawer link as a 25px grey row with a 32px indent; reset them, then build the rows */
html body #global-sidebar-nav a {
  display: block;
  padding: 0;
  font-size: inherit;
  color: inherit;
  transition: none;
}
html body .sidenav-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
html body .sidenav-logo img {
  display: block;
  height: 32px;
  width: auto;
}
html body .sidenav-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
}
html body .sidenav-close:hover {
  background: var(--color-fill);
  color: var(--color-text);
}
html body .sidenav-account, html body .sidenav-links {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
html body #global-sidebar-nav :is(a.sidenav-row, a.main-header-tab, .sidenav-foot a) {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin: 0 !important;
  padding: 0 var(--space-4) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
  font: 500 15px/1.3 var(--font-body) !important;
  text-decoration: none !important;
  box-sizing: border-box;
}
html body #global-sidebar-nav :is(a.sidenav-row, a.main-header-tab):hover {
  background: var(--color-fill) !important;
}
html body #global-sidebar-nav a.sidenav-row > span:first-child {
  flex: 1;
}
html body #global-sidebar-nav a.main-header-tab.selected {
  box-shadow: inset 3px 0 0 var(--color-accent);
  background: var(--color-fill) !important;
  font-weight: 600 !important;
}
html body .sidenav-count {
  min-width: 20px;
  padding: 1px 7px;
  background: var(--color-accent-fill);
  border-radius: var(--radius-pill);
  color: var(--color-accent-contrast);
  font: 600 12px/18px var(--font-body);
  text-align: center;
  box-sizing: border-box;
}
html body .sidenav-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}
html body #global-sidebar-nav .sidenav-auth a.pm-btn {
  display: flex !important;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--space-3) !important;
  font-size: 14px !important;
}
html body .sidenav-foot {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  padding: var(--space-2) 0 var(--space-4);
}
html body #global-sidebar-nav .sidenav-foot a {
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
}

/* Resources / Servers: the link, an arrow button beside it, and the category list opening in place underneath */
html body #global-sidebar-nav .nav-drop {
  position: relative;
  display: block;
}
html body #global-sidebar-nav .nav-drop > a.main-header-tab {
  padding-right: 56px !important;
}
html body #global-sidebar-nav .nav-drop > a.main-header-tab::after {
  display: none;
}
html body .sidenav-sub-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-left: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
}
html body .sidenav-sub-toggle::before {
  content: "";
  display: inline-block;
  border: 5px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  transition: transform 0.15s ease;
}
html body .nav-drop.is-expanded > .sidenav-sub-toggle::before {
  transform: rotate(180deg);
}
html body #global-sidebar-nav .nav-drop > .browse-menu,
html body #global-sidebar-nav .nav-drop:hover > .browse-menu,
html body #global-sidebar-nav .nav-drop:focus-within > .browse-menu {
  display: none;
  position: static;
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--space-2);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html body #global-sidebar-nav .nav-drop.is-expanded > .browse-menu {
  display: block;
}
/* subcategory flyouts stay closed in the drawer: the category page lists its subcategories */
html body #global-sidebar-nav .browse-flyout,
html body #global-sidebar-nav .browse-item-wrap:hover > .browse-flyout,
html body #global-sidebar-nav .browse-item-wrap:focus-within > .browse-flyout,
html body #global-sidebar-nav .browse-hint {
  display: none !important;
}
html body #global-sidebar-nav .browse-item-wrap > a.browse-menu-item::after {
  display: none;
}
html body #global-sidebar-nav a.browse-menu-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--space-4) 0 var(--space-6) !important;
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
  border-radius: 0;
}
html body #global-sidebar-nav a.browse-menu-item:hover {
  background: var(--color-fill);
  color: var(--color-text) !important;
}
html body #global-sidebar-nav .browse-menu hr {
  margin: var(--space-1) var(--space-4) var(--space-1) var(--space-6);
}

/* ---------- small header: one 56px row (menu, logo, search, account) instead of a logo row over a search row ---------- */
@media (max-width: 968px) {
  html body #global-header-small:not([style*="display: none"]) {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--page-gutter) 0 var(--space-2);
    box-sizing: border-box;
  }
  html body #global-header-small > div:nth-child(1) {
    order: 2;
    flex: none;
    padding: 0 !important;
  }
  html body #global-header-small > div:nth-child(1) > div {
    display: block !important;
    width: auto !important;
  }
  html body #global-header-small #header-logo-flex {
    display: block !important;
  }
  html body #global-header-small #header-logo-flex > div:first-child {
    margin: 0 !important;
  }
  html body #global-header-small #header-logo-flex > div:nth-child(2) {
    display: none;
  }
  html body #global-header-small #header-logo-flex img {
    display: block;
    height: 32px;
    width: auto;
  }
  html body #global-header-small > div:nth-child(2),
  html body #global-header-small > div:nth-child(2) > div,
  html body #global-header-small > div:nth-child(2) > div > div[style*="display: flex"] {
    display: contents !important;
  }
  html body #global-header-small > div:nth-child(2) > div > div > div:nth-child(1) {
    order: 1;
    flex: none;
    margin: 0 !important;
  }
  html body #global-header-small > div:nth-child(2) > div > div > div:nth-child(2) {
    order: 3;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--space-1);
  }
  html body #global-header-small .mobile-header-account-wrap {
    order: 4;
    flex: none;
  }
  html body .mobile-menu-button {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    color: var(--color-text) !important;
  }
  html body .mobile-menu-button .fa-bars {
    font-size: 20px !important;
  }
  html body .mobile-menu-dot {
    position: absolute;
    top: 9px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--color-accent-fill);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
  }
  html body #global-header-small .icon-input {
    gap: var(--space-2);
    height: 40px;
    margin: 0 !important;
    padding: 0 var(--space-3) !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box;
  }
  html body #global-header-small .icon-input .fa-search {
    flex: none;
    margin: 0 !important;
    font-size: 14px;
    color: var(--color-text-muted) !important;
  }
  html body #global-header-small .icon-input .input-inner {
    padding: 0 !important;
    font-size: 16px !important;
    text-overflow: ellipsis;
  }
  html body .mobile-header-account {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
  }
  html body .mobile-header-account img {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
  }
  html body a.mobile-header-login {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text) !important;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
  }
}
@media (max-width: 360px) {
  /* the smallest phones: the logo goes, the search keeps its width */
  html body #global-header-small > div:nth-child(1) {
    display: none !important;
  }
}

/* ---------- tab bars: one row that scrolls sideways, faded at the edge it continues past ----------
   The detail pages' bar is a flex row of two groups (the tabs, then Manage / Bump / Follow); the groups dissolve so
   every item sits in the one scrolling row instead of the second group squeezing the first. */
@media (max-width: 968px) {
  html body .pm-tabs,
  html body .header-wrapper > div > div[style*="display: flex"] {
    display: flex !important;
    align-items: center;
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html body .pm-tabs::-webkit-scrollbar,
  html body .header-wrapper > div > div[style*="display: flex"]::-webkit-scrollbar {
    display: none;
  }
  html body .header-wrapper > div > div[style*="display: flex"] > div {
    display: contents !important;
  }
  html body :is(.pm-tabs, .header-wrapper > div > div[style*="display: flex"]).is-scrollable:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  html body .pm-tab,
  html body .header-wrapper a.header-button {
    flex: none;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0 !important;
    box-sizing: border-box;
  }
  html body .header-wrapper > div > div[style*="display: flex"] > div > :not(a.header-button) {
    flex: none;
  }
  html body .header-wrapper > div {
    padding: 0 !important;
  }
  html body .header-wrapper {
    margin-bottom: var(--space-3) !important;
  }
}

@media (max-width: 700px) {
  /* ---------- page gutters: one 16px edge for every page ---------- */
  html body #main-content-wrapper:not(.main-content-wrapper) {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }
  html body #main-content-wrapper:not(.main-content-wrapper) > #main-content,
  html body #main-content-wrapper:not(.main-content-wrapper) #main-content,
  html body #main-content-wrapper:not(.main-content-wrapper) #sidebar-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body :is(.pm-page, .page-shell) {
    --page-gap: 16px;
  }

  /* headings scale down instead of wrapping into three lines */
  html body #main-content h1, html body .page-content h1 {
    font-size: clamp(22px, 6.4vw, 28px) !important;
    line-height: 1.2 !important;
  }

  /* any form control: 16px text, so iOS does not zoom the page when it is focused */
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    font-size: 16px !important;
  }

  /* ---------- home ---------- */
  html body .home-hero {
    padding: var(--space-5) var(--space-4);
  }
  html body .home-search .button {
    padding: 0 var(--space-4) !important;
  }
  /* the category tiles scroll sideways in one row instead of filling a whole screen */
  html body .home-categories {
    display: flex;
    margin: var(--space-3) calc(-1 * var(--space-4)) 0;
    padding: 0 var(--space-4) 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html body .home-categories::-webkit-scrollbar {
    display: none;
  }
  html body .home-category {
    flex: none;
    min-width: 128px;
  }
  html body .home-section, html body .home-why-panel {
    margin-top: var(--space-6);
  }
  html body .home-section-header {
    margin-bottom: var(--space-3);
  }
  /* the cards become a swipeable row instead of a tall stack; the next card peeks in to show there is more */
  html body .big-item-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  html body .big-item-grid > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  html body .home-why-panel, html body .home-involved-card {
    padding: var(--space-4);
  }

  /* ---------- resource and server cards in the lists: a shorter banner and no second date line ---------- */
  html body .resource-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---------- detail pages (resource, server, bundle): thumbnail beside the title, not on a row of its own ---------- */
  html body div:has(> .resource-head-row) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: center;
  }
  html body div:has(> .resource-head-row) > :not(.resource-head-row):not(script):not(style) {
    grid-column: 1 / -1;
  }
  html body div:has(> .resource-head-row) > .all-small-width-only:not([style*="display: none"]) {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
  }
  html body div:has(> .resource-head-row) > .all-small-width-only > br {
    display: none;
  }
  html body div:has(> .resource-head-row) > .resource-head-row {
    display: contents !important;
  }
  html body .resource-head-row > div:first-child {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
    --slot-size: 56px !important;
  }
  html body .resource-head-row > div:first-child img {
    width: 48px !important;
    height: 48px !important;
  }
  html body .resource-head-row > :not(:first-child) {
    grid-column: 1 / -1;
  }
  html body .resource-head-row .product-title {
    font-size: 22px !important;
  }
  html body #product-head-actions-wrapper {
    margin-top: var(--space-3);
  }

  /* ---------- user and team profiles: the header sits under the slim banner instead of overlapping it ---------- */
  html body #main-content-wrapper:has(.profile-main-col) {
    margin-top: 0 !important;
    padding-top: var(--space-4) !important;
  }
  html body #main-content-wrapper:has(.profile-main-col)::before {
    display: none;
  }
  html body #main-content-wrapper:has(.profile-main-col) :is(.profile-title-row, .profile-meta-row) {
    padding-right: 0;
  }
  html body #main-content-wrapper:has(.profile-main-col) .profile-avatar-col {
    margin-left: 0;
  }
  /* user.php sizes the avatar from the user agent, so a narrow desktop window got the 112px slot in a 64px column */
  html body .profile-avatar-col .pm-slot {
    --slot-size: 64px !important;
  }
  html body .profile-avatar-col .pm-slot img {
    width: 52px !important;
    height: 52px !important;
  }
  html body #main-content-wrapper:has(.profile-main-col) .profile-title-row h1,
  html body #main-content-wrapper:has(.profile-main-col) .profile-meta-row .profile-label-inline {
    color: var(--color-text);
    text-shadow: none;
  }
  html body #main-content-wrapper:has(.profile-main-col) .profile-meta-row .profile-label-inline {
    color: var(--color-text-subtle);
  }

  /* ---------- buttons inside cards keep their label on one line ---------- */
  html body :is(.button, .pm-btn) {
    white-space: nowrap;
  }
}


.theme-color-global{color: var(--color-accent)}