/* The maintained renderer font, losslessly packaged as WOFF2. */
@font-face {
  font-family: "Century Gothic Bold";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/theme/century-gothic-bold.woff2") format("woff2");
}

/* Locally hosted fallback for characters outside the original font's coverage. */
@font-face {
  font-family: "Fustat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/theme/fustat-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fustat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/theme/fustat-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* The reference dialogs use one locally bundled bold face and a geometric
     fallback only for characters that Century Gothic does not contain. */
  --font-panel: "Century Gothic Bold", "Fustat Variable", "Century Gothic", "Segoe UI", sans-serif;
  --font-ui: var(--font-panel);
  --font-mono: var(--font-panel);

  /* Growtopia material palette. Keep the literal values here so panel and
     website builds consume the same visual source of truth. */
  --color-white: #ffffff;
  --color-cream: #fce6ba;
  --color-muted: #e6e6e6;
  --color-pink: #ff8ff3;
  --color-gold: #fdcc04;
  --color-green: #49fc00;
  --color-teal-deep: #163b46;
  --color-teal-nav: #1b4f62;
  --color-teal-panel: #318dae;
  --color-teal-panel-mid: #2e7d98;
  --color-teal-panel-low: #2d7089;
  --color-teal-control: #2b83a5;
  --color-teal-well: #1b404d;
  --color-blue-frame: #87b8cc;
  --color-blue-frame-hi: #82bcd1;
  --color-blue-frame-lo: #6297a8;
  --color-edge: #020303;
  --color-inset: #1d3d45;
  --color-inset-hi: #477586;
  --color-shadow-text: #384c54;

  /* Surface roles. Every route uses these roles instead of page-local paint. */
  --surface-canvas: #163b46;
  --surface-canvas-muted: #12313a;
  --surface-sidebar: #1b4f62;
  --surface-raised: #2d7089;
  --surface-control: #1b4f62;
  --surface-control-hover: #2d7089;
  --surface-control-pressed: #205f71;
  --surface-strong: #318dae;
  --surface-overlay: rgba(2, 3, 3, 0.9);
  --surface-dialog: #318dae;

  /* Text roles. The named Growtopia colors are intentionally exact. */
  --text-primary: #fce6ba;
  --text-secondary: #fce6ba;
  --text-tertiary: #fce6ba;
  --text-placeholder: #fce6ba;
  --text-label: #fce6ba;
  --dialog-title: #ffffff;
  --text-on-accent: #102e38;
  --text-inverse: #ffffff;
  --text-pink: #ff8ff3;
  --text-gold: #fdcc04;
  --text-success: #49fc00;

  /* Accent and semantic roles. */
  --accent: #87b8cc;
  --accent-hover: #a9d0df;
  --accent-pressed: #79adc2;
  --accent-soft: #225968;
  --accent-text: #fce6ba;
  --accent-border: #87b8cc;
  --success: #49fc00;
  --success-soft: #101c15;
  --success-text: #c0f5ce;
  --success-border: #28543a;
  --success-ring: rgba(73, 252, 0, 0.16);
  --warning: #fdcc04;
  --warning-soft: #241b0d;
  --warning-text: #ffee7d;
  --warning-border: #5c4720;
  --warning-ring: rgba(253, 204, 4, 0.16);
  --danger: #f06b74;
  --danger-soft: #2a1518;
  --danger-hover: #3a191e;
  --danger-text: #ffe6e8;
  --danger-border: #633039;
  --danger-border-strong: #6f3038;
  --danger-border-hover: #8b3c46;
  --danger-ring: rgba(240, 107, 116, 0.16);

  /* Shared frame, control and focus primitives. */
  --border: #6297a8;
  --border-subtle: #477586;
  --border-strong: #87b8cc;
  --border-control-hover: #b1d8e6;
  --focus-ring: #fff6d8;
  --focus-shadow: rgba(158, 220, 245, 0.38);
  --focus-offset: 2px;
  --overlay: rgba(8, 27, 42, 0.76);

  --dialog-surface-top: #318dae;
  --dialog-surface-mid: #2e7d98;
  --dialog-surface-bottom: #2d7089;
  --dialog-top-accent: #318dae;
  --dialog-tab: #2f728a;
  --dialog-tab-hover: #3784a3;
  --dialog-tab-active: #79c2de;
  --dialog-frame-rim: #a0a0a0;
  --dialog-light-edge: #87b8cc;
  --dialog-dark-edge: #020303;
  --dialog-inset-edge: #477586;
  --dialog-cream: #fce6ba;
  --dialog-gold: #fdcc04;
  --dialog-gold-text: #fdcc04;
  --dialog-lime: #49fc00;
  --dialog-pink: #ff8ff3;
  --dialog-text-shadow: 2px 2px 0 var(--color-shadow-text);
  --dialog-frame-shadow: 0 0 0 1px var(--color-edge),
    0 0 0 3px var(--dialog-frame-rim),
    0 3px 0 4px var(--color-teal-well),
    inset 2px 2px 0 var(--color-blue-frame-hi),
    inset -2px -2px 0 var(--color-inset-hi);
  --control-bevel-shadow: inset 2px 2px 0 var(--color-blue-frame-hi),
    inset -2px -2px 0 var(--color-inset-hi),
    2px 3px 0 var(--color-edge);
  --control-bevel-shadow-pressed: inset 1px 1px 0 var(--color-inset-hi),
    1px 2px 0 var(--color-edge);
  --text-shadow-dialog: var(--dialog-text-shadow);

  /* Explicit state roles keep hover, pressed, disabled, error and loading
     feedback consistent across every component and the public website. */
  --state-hover-surface: var(--surface-control-hover);
  --state-hover-border: var(--border-control-hover);
  --state-hover-text: var(--color-white);
  --state-active-surface: var(--dialog-tab-active);
  --state-active-border: var(--color-blue-frame-hi);
  --state-active-text: var(--text-on-accent);
  --state-pressed-surface: var(--surface-control-pressed);
  --state-pressed-border: var(--color-inset-hi);
  --state-disabled-surface: var(--surface-canvas-muted);
  --state-disabled-border: var(--border);
  --state-disabled-text: #dae4dd;
  --state-error-surface: var(--danger-soft);
  --state-error-border: var(--danger-border-strong);
  --state-error-text: var(--danger-text);
  --state-loading-surface: #2d7089;
  --state-loading-rail: var(--color-blue-frame-hi);

  --shadow-menu: 0 18px 52px rgba(0, 0, 0, 0.38);
  --shadow-dialog: 0 32px 100px rgba(0, 0, 0, 0.55);

  /* Compatibility aliases used by feature templates and route contracts. */
  --canvas: #163b46;
  --canvas-muted: #12313a;
  --bg: #163b46;
  --bg-muted: #12313a;
  --bg-elevated: #2d7089;
  --bg-card: #2d7089;
  --bg-card-soft: #1b4f62;
  --surface-1: #163b46;
  --surface-2: #2d7089;
  --surface-3: #1b4f62;
  --surface-input: #2d7089;
  --surface-input-hover: #2d7089;
  --surface-nested: #1b4f62;
  --surface-nested-hover: #2d7089;
  --text: #fce6ba;
  --text-muted: #fce6ba;
  --text-dim: #fce6ba;
  --placeholder: #fce6ba;
  --neutral: #fce6ba;
  --green: #49fc00;
  --amber: #fdcc04;
  --red: #f06b74;
  --panel-line: #6297a8;
  --card-border: #6297a8;
  --card-border-strong: #87b8cc;
  --nav-bg: #1b4f62;
  --nav-surface: #2d7089;
  --nav-surface-hover: #2d7089;
  --nav-edge: #6297a8;
  --nav-text: #fce6ba;
  --nav-muted: #fce6ba;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --control-height-compact: 36px;
  --control-height-standard: 40px;
  --control-height-mobile: 44px;
  --control-height-sm: var(--control-height-compact);
  --control-height: var(--control-height-standard);
  --control-height-lg: var(--control-height-mobile);
  --sidebar-width: 256px;
  --topbar-height: 64px;
  --content-max: 1320px;
  --content-max-half: 660px;
  --content-gutter-desktop: 32px;
  --content-gutter-tablet: 24px;
  --content-gutter-mobile: 16px;
  --content-gutter: 32px;
  --page-gap: 16px;
  --section-gap: 16px;
  --panel-padding: 16px;
  --panel-padding-compact: 16px;
  --metric-card-min-height: 120px;
  --control-radius: 8px;
  --panel-radius: 8px;
  --dialog-radius: 12px;
  --server-picker-max-height: 240px;
  --skeleton-radius: 6px;
  --icon-size: 24px;
  --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
  --transition-med: 180ms cubic-bezier(0.2, 0, 0, 1);
  --z-sidebar: 20;
  --z-topbar: 15;
  --z-overlay: 40;
  --z-dialog: 50;
  --z-toast: 10;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
  min-width: 0;
  width: 100%;
}

main,
header,
footer,
nav,
aside,
section,
article,
form,
label {
  min-width: 0;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-panel);
  font-size: 14px;
  font-weight: 700;
  font-synthesis: none;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: none;
}

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

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
  color: inherit;
}

button {
  appearance: none;
  cursor: pointer;
  font: inherit;
}

button,
select {
  text-transform: none;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 1;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--accent);
  color: var(--text-on-accent);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

strong,
b {
  font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0;
}

p,
dl,
dt,
dd,
figure,
blockquote {
  margin: 0;
}

small {
  font-size: 12px;
}

code,
pre,
.mono,
.numeric {
  min-width: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0;
}

code,
.mono {
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre {
  max-width: 100%;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

.panel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  border-radius: var(--panel-radius);
  border: 2px solid var(--border-strong);
  background: var(--surface-raised);
}

.panel-card::before {
  content: none;
}

.panel-card__body {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  align-content: start;
  gap: var(--section-gap);
  padding: var(--panel-padding);
}

.panel-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 12px var(--panel-padding);
  border-bottom: 1px solid var(--border);
  background: var(--nav-bg);
  border-radius: 6px 6px 0 0;
}

.panel-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--dialog-title);
  line-height: 26px;
  letter-spacing: 0;
}

.panel-card > *,
.panel-card__body > *,
.panel-card__header > * {
  min-width: 0;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-height-standard);
  min-height: var(--control-height-standard);
  min-width: 0;
  max-width: 100%;
  overflow: clip;
  padding: 0 16px;
  border-radius: var(--control-radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-control);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.button:hover:not(:disabled) {
  background: var(--surface-nested-hover);
}

.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.button--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
}

.button--primary:active:not(:disabled) {
  background: var(--accent-pressed);
  color: var(--text-on-accent);
}

.button--primary:focus-visible {
  outline-color: var(--text-on-accent);
  outline-offset: -4px;
}

.button--secondary {
  background: var(--surface-control);
  border-color: var(--border-strong);
  color: var(--text);
}

.button--danger {
  background: var(--danger-soft);
  border-color: var(--danger-border-strong);
  color: var(--danger-text);
}

.button--danger:hover:not(:disabled) {
  background: var(--danger-hover);
  border-color: var(--danger-border-hover);
}

.button--compact {
  height: var(--control-height-compact);
  min-height: var(--control-height-compact);
  padding-inline: 12px;
}
.button:disabled {
  background-color: var(--canvas-muted);
  border-color: var(--border);
  color: var(--text-tertiary);
  -webkit-text-fill-color: var(--text-tertiary);
}

.icon {
  width: var(--icon-size, 18px);
  height: var(--icon-size, 18px);
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

@media (max-width: 768px) {

  .button {
    height: var(--control-height-mobile);
    min-height: var(--control-height-mobile);
    white-space: nowrap;
  }
}

@media (max-width: 640px) {

  .panel-card__header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

@media (max-width: 480px) {

  .panel-card__body {
    padding: var(--panel-padding-compact);
  }

  .panel-card__header {
    padding: var(--panel-padding-compact) var(--panel-padding-compact) 0;
  }
}

/*
 * Growtopia dialog material
 *
 * This file is the single visual adapter for the panel and the finite public
 * website theme. Layout and semantics remain in components.css; this layer
 * supplies the shared frame, connected tabs, controls and interaction states.
 */

:where(.gt-dialog-frame, .panel-card, .modal-card) {
  position: relative;
  border: 2px solid var(--dialog-dark-edge);
  border-radius: var(--panel-radius);
  background: linear-gradient(
    180deg,
    var(--dialog-surface-top) 0%,
    var(--dialog-surface-mid) 56%,
    var(--dialog-surface-bottom) 100%
  );
  box-shadow: var(--dialog-frame-shadow);
}

:where(.gt-dialog-frame, .panel-card, .modal-card)::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 2px 2px auto;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--dialog-top-accent);
  pointer-events: none;
}

:where(.panel-card > *, .modal-card > *, .gt-dialog-frame > *) {
  position: relative;
  z-index: 1;
}

:where(.panel-card__header, .modal-card__header) {
  border-bottom: 2px solid var(--dialog-light-edge);
  border-radius: 6px 6px 0 0;
  background: var(--dialog-surface-top);
}

:where(.panel-card__title, .modal-card__title, .page-hero__title, .page-header__title) {
  color: var(--color-white);
  text-shadow: var(--dialog-text-shadow);
}

:where(.panel-card__description, .page-hero__description, .modal-card__description) {
  color: var(--color-muted);
}

:where(.panel-card__footer, .modal-card__footer) {
  border-top: 2px solid var(--dialog-light-edge);
  background: var(--dialog-surface-bottom);
}

/* One beveled button primitive for primary, secondary, danger, ghost and
   icon-only variants. The content stage in components.css keeps the visible
   label centred while this rule owns the material and every state. */
.button {
  border: 2px solid var(--dialog-dark-edge);
  border-top-color: var(--dialog-light-edge);
  border-left-color: var(--dialog-light-edge);
  border-radius: var(--control-radius);
  background-color: var(--surface-control);
  color: var(--dialog-cream);
  box-shadow: var(--control-bevel-shadow);
  text-shadow: var(--dialog-text-shadow);
}

.button:hover:not(:disabled) {
  border-top-color: var(--state-hover-border);
  border-left-color: var(--state-hover-border);
  background: var(--state-hover-surface);
  color: var(--state-hover-text);
}

.button:active:not(:disabled),
.button.is-pressed:not(:disabled),
.button[aria-pressed='true']:not(:disabled) {
  transform: translate(1px, 1px);
  border-top-color: var(--state-pressed-border);
  border-left-color: var(--state-pressed-border);
  background: var(--state-pressed-surface);
  box-shadow: var(--control-bevel-shadow-pressed);
}

.button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.button--primary {
  border-color: var(--dialog-dark-edge);
  border-top-color: var(--color-blue-frame-hi);
  border-left-color: var(--color-blue-frame-hi);
  background: var(--accent);
  color: var(--text-on-accent);
  text-shadow: none;
}

.button--primary:hover:not(:disabled) {
  border-top-color: var(--color-white);
  border-left-color: var(--color-white);
  background: var(--accent-hover);
  color: var(--text-on-accent);
}

.button--primary:active:not(:disabled),
.button--primary.is-pressed:not(:disabled),
.button--primary[aria-pressed='true']:not(:disabled) {
  background: var(--accent-pressed);
  color: var(--text-on-accent);
}

.button--secondary { background: var(--dialog-tab); }
.button--danger {
  border-color: var(--danger-border-strong);
  background: var(--danger-soft);
  color: var(--danger-text);
  text-shadow: var(--dialog-text-shadow);
}
.button--danger:hover:not(:disabled) {
  border-color: var(--danger-border-hover);
  background: var(--danger-hover);
  color: var(--color-white);
}
.button--ghost {
  border-color: var(--dialog-light-edge);
  background: transparent;
}

.button:disabled,
.button[aria-disabled='true'] {
  border-color: var(--state-disabled-border);
  background: var(--state-disabled-surface);
  color: var(--state-disabled-text);
  box-shadow: inset 1px 1px 0 var(--color-inset-hi);
  text-shadow: none;
}

.button.is-loading,
.button[aria-busy='true'] {
  cursor: wait;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  background-size: 200% 100%;
  animation: dialog-loading-sheen 1.25s linear infinite;
}

@keyframes dialog-loading-sheen {
  to { background-position: -200% 0; }
}

/* Growtopia input and select frames use the same bevel as buttons, with a
   deeper inset well so editable content remains easy to scan. */
:where(.input, .textarea, .select) {
  border: 2px solid var(--dialog-light-edge);
  border-right-color: var(--dialog-dark-edge);
  border-bottom-color: var(--dialog-dark-edge);
  border-radius: var(--control-radius);
  background-color: var(--surface-control);
  color: var(--dialog-cream);
  box-shadow: inset 2px 2px 0 var(--color-inset),
    inset -1px -1px 0 var(--color-inset-hi);
}

:where(.input, .textarea, .select):hover:not(:disabled) {
  border-top-color: var(--state-hover-border);
  border-left-color: var(--state-hover-border);
  background-color: var(--surface-control-hover);
}

:where(.input, .textarea, .select):focus {
  border-color: var(--focus-ring);
  background-color: var(--surface-control);
  box-shadow: 0 0 0 3px var(--focus-shadow),
    inset 2px 2px 0 var(--color-inset),
    inset -1px -1px 0 var(--color-inset-hi);
}

:where(.input, .textarea, .select)::placeholder { color: var(--color-muted); }

:where(.input, .textarea, .select):disabled {
  border-color: var(--state-disabled-border);
  background-color: var(--state-disabled-surface);
  color: var(--state-disabled-text);
  -webkit-text-fill-color: var(--state-disabled-text);
}

:where(.input, .textarea, .select):user-invalid,
:where(.input, .textarea, .select)[aria-invalid='true'] {
  border-color: var(--state-error-border);
  background-color: var(--state-error-surface);
  color: var(--state-error-text);
}

/* Keep the native select chevron visible after the shared control material
   applies its background color and bevel. */
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fce6ba' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

:where(input[type='checkbox'], input[type='radio']) {
  border: 2px solid var(--dialog-light-edge);
  background-color: var(--surface-control);
  box-shadow: inset 1px 1px 0 var(--color-inset),
    inset -1px -1px 0 var(--color-inset-hi);
}

:where(input[type='checkbox'], input[type='radio']):hover:not(:disabled) {
  border-color: var(--state-hover-border);
  background-color: var(--surface-control-hover);
}

:where(input[type='checkbox'], input[type='radio']):checked {
  border-color: var(--dialog-dark-edge);
  background-color: var(--accent);
}

:where(input[type='checkbox'], input[type='radio']):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

:where(input[type='checkbox'], input[type='radio']):disabled {
  border-color: var(--state-disabled-border);
  background-color: var(--state-disabled-surface);
}

/* Shared framed data surfaces. Nested rows remain open teal so tables do not
   become stacks of competing boxes. */
:where(.metric-ledger, .signal-ledger, .chart-frame, .task-disclosure,
  .entity-context, .table-wrap, .comparison-table, .legacy-table,
  .empty-state, .stat-card, .notice) {
  border-color: var(--dialog-dark-edge);
  border-radius: var(--panel-radius);
  background: var(--dialog-surface-bottom);
  box-shadow: var(--dialog-frame-shadow);
}

:where(.table-wrap, .comparison-table, .legacy-table) { overflow-x: auto; }
:where(.table-wrap, .comparison-table, .legacy-table) th {
  background: var(--dialog-tab);
  color: var(--color-white);
  text-shadow: var(--dialog-text-shadow);
}
:where(.table-wrap, .comparison-table, .legacy-table) td {
  color: var(--dialog-cream);
  border-bottom-color: var(--border-subtle);
}
:where(.table-wrap, .comparison-table, .legacy-table) tbody tr:nth-child(even) {
  background: var(--dialog-surface-top);
}
:where(.table-wrap, .comparison-table, .legacy-table) tbody tr:hover {
  background: var(--dialog-top-accent);
}

:where(.metric-ledger__label, .signal-label, .table-summary,
  .table-wrap > .refresh-label, .empty-state__copy span) {
  color: var(--dialog-cream);
}
:where(.metric-ledger__value, .signal-value) {
  color: var(--dialog-gold-text);
  text-shadow: var(--dialog-text-shadow);
}
:where(.notice--success, .signal-live) { color: var(--dialog-lime); }
:where(.notice--warning) { color: var(--dialog-gold); }
:where(.notice--error, .table-state--error, .entity-context__status--error) {
  color: var(--state-error-text);
}

.task-disclosure__summary {
  color: var(--color-white);
  text-shadow: var(--dialog-text-shadow);
}
.task-disclosure[open] > .task-disclosure__summary {
  border-bottom-color: var(--dialog-light-edge);
}

/* Connected workspace tabs mirror the dialog's tab strip. */
.workspace-tabs {
  border-bottom: 2px solid var(--dialog-dark-edge);
  background: transparent;
}

.gt-dialog-tab {
  border: 2px solid var(--dialog-dark-edge);
  border-top-color: var(--dialog-light-edge);
  border-left-color: var(--dialog-light-edge);
  border-radius: 7px 7px 0 0;
  background: var(--dialog-tab);
  color: var(--color-white);
  box-shadow: inset 1px 1px 0 var(--color-blue-frame-hi),
    1px 2px 0 var(--dialog-dark-edge);
  text-shadow: var(--dialog-text-shadow);
}

.gt-dialog-tab:hover:not(:disabled) {
  border-top-color: var(--state-hover-border);
  border-left-color: var(--state-hover-border);
  background: var(--dialog-tab-hover);
}

.gt-dialog-tab[aria-selected='true'],
.gt-dialog-tab[aria-current='page'],
.gt-dialog-tab.is-active {
  border-top-color: var(--color-blue-frame-hi);
  border-left-color: var(--color-blue-frame-hi);
  background: var(--dialog-tab-active);
  color: var(--text-on-accent);
  text-shadow: none;
}

.gt-dialog-tab:active:not(:disabled) { transform: translate(1px, 1px); }

.workspace-switcher,
.workspace-tools__item,
.sidebar-nav__account-card,
.sidebar-nav__tenant {
  border-color: var(--dialog-dark-edge);
  background: var(--dialog-surface-bottom);
  box-shadow: var(--dialog-frame-shadow);
}

:where(.sidebar-nav__link, .sidebar-nav__logout) {
  color: var(--dialog-cream);
  text-shadow: var(--dialog-text-shadow);
}

:where(.sidebar-nav__link:hover, .sidebar-nav__logout:hover) {
  background: var(--dialog-tab-hover);
  color: var(--color-white);
}

.sidebar-nav__link.is-active {
  border: 2px solid var(--dialog-dark-edge);
  border-top-color: var(--dialog-light-edge);
  border-left-color: var(--dialog-light-edge);
  background: var(--dialog-tab-active);
  color: var(--text-on-accent);
  box-shadow: inset 1px 1px 0 var(--color-blue-frame-hi),
    1px 2px 0 var(--dialog-dark-edge);
  text-shadow: none;
}

:where(.sidebar-nav__link:focus-visible, .sidebar-nav__logout:focus-visible,
  .workspace-tools__item:focus-visible, .modal-card__close:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.modal-card { border-radius: var(--dialog-radius); box-shadow: var(--shadow-dialog), var(--dialog-frame-shadow); }
.modal-card__close {
  border: 2px solid var(--dialog-dark-edge);
  border-top-color: var(--dialog-light-edge);
  border-left-color: var(--dialog-light-edge);
  background: var(--dialog-tab);
  color: var(--color-white);
  box-shadow: var(--control-bevel-shadow);
}
.modal-card__close:hover:not(:disabled) { background: var(--dialog-tab-hover); }
.modal-card.is-busy { cursor: wait; }

/* Loading has one rail and one skeleton material across cards, tables and
   request progress. Reduced motion is handled by the existing base rules. */
:where(.settings-loading, .panel-state--loading, .skeleton-block,
  .skeleton-card, .skeleton-list, .skeleton-field, .skeleton-chart,
  .skeleton-image, .table-skeleton > span, tr.log-skeleton td span) {
  background: var(--state-loading-surface);
  border-color: var(--dialog-light-edge);
}

.request-progress { background: var(--color-inset); }
.request-progress span { background: var(--state-loading-rail); }

@media (prefers-reduced-motion: reduce) {
  .button:active:not(:disabled),
  .gt-dialog-tab:active:not(:disabled) { transform: none; }
  .button.is-loading,
  .button[aria-busy='true'] { animation: none; }
}

/* GTPS.link uses the panel's finite Growtopia theme release. Page layout is
   kept here; colors, typography, bevels and interaction states come from the
   shared tokens, components and dialogs material. */

.ui-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-canvas);
}

.site-frame,
.ui-container {
  width: min(calc(100% - 2 * var(--content-gutter)), var(--content-max));
  margin-inline: auto;
}

.ui-header {
  background: var(--surface-sidebar);
  border-bottom: 2px solid var(--dialog-dark-edge);
  box-shadow: inset 0 1px 0 var(--dialog-light-edge);
}

.ui-header__inner {
  min-height: 64px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.ui-header__brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ui-header__brand img {
  width: 120px;
  height: 60px;
  object-fit: contain;
}

.ui-header nav {
  display: flex;
  align-items: end;
  gap: 4px;
  min-width: 0;
}

.ui-header__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  white-space: nowrap;
}

.grow-item-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

main.site-frame {
  display: grid;
  align-content: start;
  gap: var(--page-gap);
  flex: 1;
  min-width: 0;
  margin-block: 16px 24px;
  padding: 24px;
}

.intro {
  position: relative;
  display: grid;
  gap: 8px;
  margin: -24px -24px 0;
  padding: 24px 24px 20px 80px;
  border-bottom: 2px solid var(--dialog-light-edge);
  background: linear-gradient(
    180deg,
    var(--dialog-top-accent) 0 5px,
    var(--dialog-surface-top) 5px 100%
  );
}

.intro::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 25px;
  width: 40px;
  height: 40px;
  background: center / contain no-repeat url('/theme/door.png');
  image-rendering: pixelated;
}

main[data-page='guides'] .intro::before { background-image: url('/theme/growpedia.png'); }
main[data-page='shop'] .intro::before { background-image: url('/theme/premium-world-lock.png'); }
main[data-page='request'] .intro::before { background-image: url('/theme/mailbox.png'); }
main[data-page='admin'] .intro::before { background-image: url('/theme/wrench.png'); }

.intro .eyebrow {
  color: var(--dialog-gold-text);
  font-size: 12px;
  font-weight: 700;
  text-shadow: var(--dialog-text-shadow);
}

.intro > p:last-child {
  max-width: 680px;
  color: var(--color-muted);
}

h1 {
  color: var(--color-white);
  font-size: 30px;
  line-height: 36px;
  text-shadow: var(--dialog-text-shadow);
}

h2 {
  color: var(--color-white);
  font-size: 18px;
  line-height: 26px;
  text-shadow: var(--dialog-text-shadow);
}

.directory-totals {
  display: flex;
  gap: 40px;
  padding-block: 12px;
  border-block: 2px solid var(--dialog-light-edge);
}

.directory-totals dt {
  color: var(--color-muted);
  font-size: 12px;
}

.directory-totals dd {
  color: var(--dialog-gold-text);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--dialog-text-shadow);
}

.directory { display: grid; gap: 16px; min-width: 0; }
.table-surface { overflow: hidden; border-radius: var(--panel-radius); }
.server-list { width: 100%; border-collapse: collapse; text-align: left; }
.server-list th {
  color: var(--color-white);
  background: var(--dialog-tab);
  text-shadow: var(--dialog-text-shadow);
  white-space: nowrap;
}
.server-list td,
.server-list th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.server-list td { color: var(--dialog-cream); }
.server-list tbody tr:nth-child(even) { background: var(--dialog-surface-top); }
.server-list tbody tr:hover { background: var(--dialog-top-accent); }
.server-list tbody tr:last-child td { border-bottom: 0; }

.server-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.server-banner {
  width: 128px;
  height: 32px;
  object-fit: cover;
  border: 2px solid var(--dialog-light-edge);
  border-radius: var(--control-radius);
  box-shadow: inset 1px 1px 0 var(--color-blue-frame-hi),
    inset -1px -1px 0 var(--color-inset-hi);
}
.availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dialog-lime);
  white-space: nowrap;
}
.availability::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--success-ring);
}
.unavailable { color: var(--color-muted); }

.button,
.action,
button:not(.button) {
  min-height: 44px;
  height: auto;
  padding: 10px 14px;
  white-space: normal;
}

.action,
button:not(.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--dialog-dark-edge);
  border-top-color: var(--dialog-light-edge);
  border-left-color: var(--dialog-light-edge);
  border-radius: var(--control-radius);
  background: var(--surface-control);
  color: var(--dialog-cream);
  box-shadow: var(--control-bevel-shadow);
  font-weight: 700;
  text-align: center;
  text-shadow: var(--dialog-text-shadow);
}

:where(.action, button:not(.button)):hover:not(:disabled) {
  background: var(--state-hover-surface);
  color: var(--color-white);
}

:where(.action, button:not(.button)):active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: var(--control-bevel-shadow-pressed);
}

:where(.action, button:not(.button)):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

:where(.action, button:not(.button)):disabled {
  border-color: var(--state-disabled-border);
  background: var(--state-disabled-surface);
  color: var(--state-disabled-text);
  box-shadow: inset 1px 1px 0 var(--color-inset-hi);
  text-shadow: none;
}

.guide-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-block: 2px solid var(--dialog-light-edge);
  color: var(--dialog-cream);
}

.device-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--dialog-dark-edge);
}

.device-tabs .button { border-radius: 7px 7px 0 0; }
.device-tabs .button[aria-selected='true'] {
  background: var(--dialog-tab-active);
  color: var(--text-on-accent);
  text-shadow: none;
}

.tutorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tutorial-steps { display: grid; gap: 16px; margin: 0; padding-left: 24px; }
.tutorial-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tutorial-fields { display: grid; gap: 16px; align-content: start; }
.copy-field { display: grid; gap: 8px; }
.copy-controls { display: flex; align-items: flex-start; gap: 8px; }
.copy-controls textarea {
  flex: 1;
  min-width: 0;
  resize: vertical;
  white-space: pre;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
}
#copy-feedback { min-height: 24px; color: var(--dialog-cream); }

.server-choice,
.checkout-form {
  display: grid;
  gap: 16px;
  max-width: 600px;
  margin-bottom: 16px;
}
.checkout-form label,
.admin-remove label { display: grid; gap: 8px; }

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 2px solid var(--dialog-light-edge);
  border-right-color: var(--dialog-dark-edge);
  border-bottom-color: var(--dialog-dark-edge);
  border-radius: var(--control-radius);
  background: var(--surface-control);
  color: var(--dialog-cream);
  box-shadow: inset 2px 2px 0 var(--color-inset),
    inset -1px -1px 0 var(--color-inset-hi);
}
input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) { background: var(--state-hover-surface); }
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--focus-shadow),
    inset 2px 2px 0 var(--color-inset),
    inset -1px -1px 0 var(--color-inset-hi);
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid { border-color: var(--state-error-border); background: var(--state-error-surface); }
input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--state-disabled-border);
  background: var(--state-disabled-surface);
  color: var(--state-disabled-text);
  -webkit-text-fill-color: var(--state-disabled-text);
}

.hint { color: var(--color-muted); }
.item-results { max-height: 240px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.item-results li { margin: 4px 0; }
.item-results button { width: 100%; justify-content: flex-start; text-align: left; }

.shop-packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pack-card { min-width: 0; overflow: hidden; }
.pack-card article {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
}
.pack-card__top { display: flex; align-items: center; gap: 12px; }
.pack-card__icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 2px solid var(--dialog-light-edge);
  border-radius: var(--control-radius);
  background: var(--color-teal-well);
  box-shadow: var(--control-bevel-shadow);
}
.pack-card__icon img { width: 40px; height: 40px; image-rendering: pixelated; }
.pack-card__type { color: var(--color-muted); font-size: 12px; }
.pack-card h2 { font-size: 20px; }
.pack-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: auto;
  color: var(--dialog-gold-text);
  font-size: 32px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--dialog-text-shadow);
}
.pack-card__currency { font-size: 24px; }
.pack-card__choose { width: 100%; justify-content: space-between; }
.pack-card:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.admin-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.admin-server {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 2px solid var(--dialog-dark-edge);
  border-radius: var(--panel-radius);
  background: var(--dialog-surface-bottom);
  box-shadow: var(--dialog-frame-shadow);
}
.admin-server > div { display: grid; gap: 4px; }
.admin-server span { color: var(--color-muted); }
.admin-remove { display: grid; gap: 8px; max-width: 480px; }

.ui-footer {
  border-top: 2px solid var(--dialog-dark-edge);
  background: var(--surface-sidebar);
  box-shadow: inset 0 1px 0 var(--dialog-light-edge);
}
.footer-inner { display: grid; gap: 12px; padding-block: 24px; color: var(--color-muted); font-size: 12px; }
.ui-footer__logo-link img { width: 96px; height: 48px; object-fit: contain; }
.ui-skip-link {
  position: absolute;
  z-index: 50;
  top: -80px;
  left: 16px;
  padding: 12px;
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--control-bevel-shadow);
}
.ui-skip-link:focus { top: 8px; }

@media (max-width: 1000px) {
  .server-list thead { display: none; }
  .server-list,
  .server-list tbody { display: block; }
  .server-list tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    border-bottom: 2px solid var(--dialog-light-edge);
  }
  .server-list tr:last-child { border: 0; }
  .server-list td {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .server-list td::before { content: attr(data-label); color: var(--color-muted); font-size: 12px; }
  .server-list td:first-child,
  .server-list td:last-child { grid-column: 1 / -1; }
  .server-list td:first-child::before,
  .server-list td:last-child::before { display: none; }
}

@media (max-width: 900px) {
  :root { --content-gutter: 24px; }
  .shop-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root { --content-gutter: 16px; }
  .ui-header__inner { flex-wrap: wrap; justify-content: center; gap: 4px; padding-block: 8px; }
  .ui-header__brand img { width: 96px; height: 48px; }
  .ui-header nav { width: 100%; justify-content: center; }
  .ui-header__link { gap: 4px; padding: 8px; font-size: 12px; }
  .ui-header__link .grow-item-icon { width: 18px; height: 18px; }
  h1 { font-size: 24px; line-height: 30px; }
  main.site-frame { margin-block: 8px 16px; padding: 16px; }
  .intro { margin: -16px -16px 0; padding: 20px 16px 16px 64px; }
  .intro::before { left: 16px; top: 20px; width: 36px; height: 36px; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .guide-callout { align-items: stretch; flex-direction: column; }
  .copy-controls { flex-wrap: wrap; }
  .copy-controls textarea { flex-basis: 100%; }
  .device-tabs button { flex: 1 0 calc(50% - 8px); }
  .server-list tr { grid-template-columns: 1fr; }
  .server-banner { width: 112px; height: 28px; }
  .shop-packs { grid-template-columns: minmax(0, 1fr); }
}