/* Eternot — layout moderno (shell). Conteúdo legado das páginas herda legibilidade básica. */

:root {
  /* Largura útil do conteúdo legado (FeaturedArticle, etc.) — a coluna vem do grid Bootstrap */
  --m-page-inner-max: 100%;
  --m-bg-deep: #020617;
  --m-surface: rgba(15, 23, 42, 0.92);
  --m-surface-solid: #0f172a;
  --m-border: rgba(148, 163, 184, 0.18);
  --m-text: #e2e8f0;
  --m-muted: #94a3b8;
  --m-accent: #38bdf8;
  --m-accent-dim: rgba(56, 189, 248, 0.15);
  --m-cta: #10b981;
  --m-cta-hover: #059669;
  --m-radius: 12px;
  --m-radius-sm: 8px;
  --m-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --m-header-h: 64px;
  --m-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body.m-body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  font-family: var(--m-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--m-text);
  background: var(--m-bg-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.m-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--m-bg-deep);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: saturate(0.85) brightness(0.45);
}

.m-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 6, 23, 0.2) 0%,
    rgba(2, 6, 23, 0.75) 45%,
    rgba(2, 6, 23, 0.92) 100%
  );
  pointer-events: none;
}

.m-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* —— Header —— */
.m-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--m-border);
  box-sizing: border-box;
}

.m-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.m-logo img {
  max-height: 44px;
  width: auto;
  display: block;
}

.m-nav-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  background: var(--m-surface-solid);
  color: var(--m-text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

/* Utilitário compatível com Bootstrap (flex + overflow na nav) */
.min-w-0 {
  min-width: 0 !important;
}

.m-nav-desktop {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  flex-wrap: nowrap;
  overflow: visible;
}

.m-nav-desktop::-webkit-scrollbar {
  height: 4px;
}

.m-nav-desktop::-webkit-scrollbar-thumb {
  background: var(--m-border);
  border-radius: 4px;
}

.m-dd {
  position: relative;
}

.m-dd > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--m-radius-sm);
  color: var(--m-muted);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  user-select: none;
}

.m-dd > summary::-webkit-details-marker {
  display: none;
}

.m-dd > summary:hover,
.m-dd[open] > summary {
  color: var(--m-text);
  background: var(--m-accent-dim);
  border-color: var(--m-border);
}

.m-dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  padding: 8px;
  background: var(--m-surface-solid);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  z-index: 120;
}

/* Desktop dropdown behavior */
.m-nav-desktop .m-dd .m-dd-panel {
  display: none;
}

.m-nav-desktop .m-dd[open] .m-dd-panel,
.m-nav-desktop .m-dd:hover .m-dd-panel,
.m-nav-desktop .m-dd:focus-within .m-dd-panel {
  display: block;
}

.m-dd-panel a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--m-radius-sm);
  color: var(--m-text);
  text-decoration: none;
  font-size: 0.875rem;
}

.m-dd-panel a:hover {
  background: var(--m-accent-dim);
  color: var(--m-accent);
}

.m-dd-panel a.m-active {
  color: var(--m-accent);
  font-weight: 600;
}

.m-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.35);
  text-decoration: none;
  white-space: nowrap;
}

.m-pill:hover {
  background: rgba(16, 185, 129, 0.25);
}

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--m-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.m-btn-cta {
  background: var(--m-cta);
  color: #022c22;
}

.m-btn-cta:hover {
  background: var(--m-cta-hover);
  color: #fff;
}

.m-btn-ghost {
  background: transparent;
  color: var(--m-text);
  border: 1px solid var(--m-border);
}

.m-btn-ghost:hover {
  border-color: var(--m-accent);
  color: var(--m-accent);
}

.m-btn-sm {
  padding: 6px 12px;
  font-size: 0.8125rem;
}

.m-link-muted {
  color: var(--m-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}

.m-link-muted:hover {
  color: var(--m-accent);
}

/* Mobile nav drawer (abaixo do breakpoint lg: classes d-lg-none no HTML) */
.m-nav-mobile {
  border-top: 1px solid var(--m-border);
  background: rgba(15, 23, 42, 0.98);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.m-nav-mobile.is-open {
  max-height: min(80vh, 640px);
  overflow-y: auto;
}

.m-nav-mobile-inner {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-nav-mobile .m-dd > summary {
  width: 100%;
  text-align: left;
}

.m-nav-mobile .m-dd-panel {
  position: static;
  display: block;
  margin-top: 6px;
  margin-bottom: 8px;
  box-shadow: none;
  border: 1px solid var(--m-border);
}

@media (max-width: 991.98px) {
  .m-header-actions .m-pill span.m-pill-label {
    display: none;
  }
}

/* —— Hero —— */
.m-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 28px 0 8px;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .m-hero {
    padding-top: 36px;
    padding-bottom: 16px;
  }

  .m-aside {
    position: sticky;
    top: calc(var(--m-header-h) + 16px);
    align-self: flex-start;
  }
}

.m-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
}

.m-hero p {
  margin: 0;
  max-width: 52ch;
  color: var(--m-muted);
  font-size: 0.95rem;
}

.m-hero-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.m-main {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Impede a coluna de “empurrar” a grelha para fora do --m-content-max */
  overflow-x: clip;
}

.m-main > * {
  min-width: 0;
  max-width: 100%;
}

/* Conteúdo principal da página (id = subtopic); largura = coluna Bootstrap */
.m-main-card.m-page-body {
  max-width: min(100%, var(--m-page-inner-max));
  box-sizing: border-box;
}

.m-card {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.m-card-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--m-border);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-muted);
}

.m-card-b {
  padding: 18px;
}

.m-main-card {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 20px 22px;
  min-height: 200px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
}

.m-main-card img {
  max-width: 100%;
  height: auto;
}

.m-main-card table {
  max-width: 100%;
  table-layout: auto;
}

.m-main-card font {
  font-family: inherit;
  font-size: inherit !important;
}

/* Conteúdo legado Tibia (latestnews: FeaturedArticle, NewsTicker) sem basic.css */
.m-main .Box,
.m-main #FeaturedArticle,
.m-main #NewsTicker,
.m-main #featuredTOPs {
  width: 100%;
  max-width: min(100%, var(--m-page-inner-max));
  margin-left: 0;
  margin-right: auto;
  box-sizing: border-box;
  position: relative;
  left: auto;
  right: auto;
}

.m-main .BoxContent {
  max-width: 100%;
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
}

.m-main .TableContent,
.m-main .InnerTableContainer,
.m-main table {
  max-width: 100%;
}

/* Aside widgets */
.m-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Linha interna Loja + Discord (metade/metade como no mockup) */
.m-aside-bottom {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.m-boosted {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.m-boosted a {
  display: block;
  padding: 8px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: var(--m-radius-sm);
  border: 1px solid var(--m-border);
}

.m-boosted img {
  display: block;
  image-rendering: pixelated;
}

.m-top-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.m-top-table th,
.m-top-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--m-border);
}

.m-top-table th {
  color: var(--m-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.m-top-table tr:last-child td {
  border-bottom: none;
}

.m-top-name {
  font-weight: 600;
  color: #f1f5f9;
}

.m-top-meta {
  color: var(--m-muted);
  font-size: 0.75rem;
}

.m-shop-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.m-discord {
  text-align: center;
}

.m-discord .m-btn {
  width: 100%;
}

/* Footer */
.m-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 24px 0 32px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--m-muted);
  border-top: 1px solid var(--m-border);
  box-sizing: border-box;
}

/* Tibia compat: helper + caps lock */
#HelperDivContainer,
#CapsLockWarning {
  z-index: 200;
}

#DeactivationContainer {
  z-index: 95;
}


/* Sidebar composition refinements */
.m-card-h {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.m-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.m-badge-soft {
  color: var(--m-muted);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.25);
}

.m-card-spotlight .m-card-b {
  padding-top: 14px;
  padding-bottom: 14px;
}

.m-boosted {
  gap: 10px;
}

.m-boosted-item {
  min-width: 104px;
  text-align: center;
}

.m-boosted-label {
  display: block;
  margin-bottom: 6px;
  color: var(--m-muted);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.m-card-top .m-top-table th,
.m-card-top .m-top-table td {
  padding-left: 14px;
  padding-right: 14px;
}

.m-card-coins .m-btn,
.m-discord .m-btn {
  min-height: 40px;
  font-weight: 700;
}

.m-aside-bottom .m-card-b {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}


/* Login page modernization (legacy markup from pages/login_redirect.php) */
#login_redirect {
  max-width: 100%;
}

#login_redirect .HeaderPagesText {
  display: block;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8fafc;
}

#login_redirect .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

#login_redirect .CaptionContainer,
#login_redirect .TableShadowContainer,
#login_redirect .TableShadowContainerRightTop,
#login_redirect .TableShadowRightTop,
#login_redirect .TableContentAndRightShadow,
#login_redirect .CaptionEdgeLeftTop,
#login_redirect .CaptionEdgeRightTop,
#login_redirect .CaptionBorderTop,
#login_redirect .CaptionVerticalLeft,
#login_redirect .CaptionVerticalRight,
#login_redirect .CaptionBorderBottom,
#login_redirect .CaptionEdgeLeftBottom,
#login_redirect .CaptionEdgeRightBottom {
  background: none !important;
}

#login_redirect .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#login_redirect .CaptionInnerContainer,
#login_redirect .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#login_redirect .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#login_redirect .InnerTableContainer,
#login_redirect .TableContentContainer {
  width: 100%;
}

#login_redirect .TableContent {
  border: none !important;
  background: transparent;
}

#login_redirect .loginBoxLogin {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px 12px;
  padding: 16px;
}

#login_redirect .Cell.LabelV120 {
  width: auto !important;
  min-width: 0 !important;
  color: var(--m-muted);
  font-size: 0.82rem;
  font-weight: 600;
  align-self: center;
}

#login_redirect .Cell.InputField {
  width: 100% !important;
  min-width: 0 !important;
}

#login_redirect .Break {
  display: none;
}

#login_redirect input[type="email"],
#login_redirect input[type="password"],
#login_redirect input[type="text"] {
  width: 100% !important;
  min-height: 42px;
  padding: 10px 12px;
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-text);
  outline: none;
}

#login_redirect input[type="email"]:focus,
#login_redirect input[type="password"]:focus,
#login_redirect input[type="text"]:focus {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

#login_redirect .LoginButtons {
  width: 180px;
  padding: 16px 16px 16px 0;
  vertical-align: top;
}

#login_redirect .LoginButtons .Cell.ButtonField {
  margin-bottom: 10px;
}

#login_redirect .BigButton,
#login_redirect .MediumButtonBackground {
  background: none !important;
}

#login_redirect .BigButton .ButtonText,
#login_redirect .MediumButtonText {
  border-radius: 8px;
  overflow: hidden;
}

#login_redirect #hiddeninfoToken,
#login_redirect #showinfoToken {
  margin: 0;
  padding: 14px 16px;
  color: var(--m-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

#login_redirect h3 {
  margin: 16px 0 10px;
  color: #f8fafc;
  font-size: 1rem;
}

#login_redirect #LoginCreateAccountBox {
  color: var(--m-text);
  padding: 16px;
}

#login_redirect #LoginCreateAccountBox p {
  margin: 0 0 8px;
}

@media (max-width: 767.98px) {
  #login_redirect .loginBoxLogin {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #login_redirect .LoginButtons {
    width: auto;
    padding: 0 16px 16px;
  }
}


#login_redirect .m-login-btn {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--m-font);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.18s ease;
}

#login_redirect .m-login-btn i {
  font-size: 0.9rem;
}

#login_redirect .m-login-btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-color: rgba(16, 185, 129, 0.6);
}

#login_redirect .m-login-btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

#login_redirect .m-login-btn-ghost {
  background: rgba(2, 6, 23, 0.6);
  color: var(--m-text);
  border-color: var(--m-border);
}

#login_redirect .m-login-btn-ghost:hover {
  border-color: rgba(56, 189, 248, 0.55);
  color: #bae6fd;
}

#login_redirect .m-login-btn-sm {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.76rem;
}

#login_redirect .BigButton,
#login_redirect .MediumButtonBackground,
#login_redirect .MediumButtonOver {
  width: 100% !important;
  height: auto !important;
}

#login_redirect #hiddeninfoTokenButton,
#login_redirect #showinfoTokenButton {
  max-width: 260px;
}


/* Create Account modernization (legacy markup from pages/createaccount.php) */
#createaccount {
  max-width: 100%;
}

#createaccount .HeaderPagesText {
  display: block;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8fafc;
}

#createaccount .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

#createaccount .CaptionContainer,
#createaccount .TableShadowContainer,
#createaccount .TableShadowContainerRightTop,
#createaccount .TableShadowRightTop,
#createaccount .TableContentAndRightShadow,
#createaccount .CaptionEdgeLeftTop,
#createaccount .CaptionEdgeRightTop,
#createaccount .CaptionBorderTop,
#createaccount .CaptionVerticalLeft,
#createaccount .CaptionVerticalRight,
#createaccount .CaptionBorderBottom,
#createaccount .CaptionEdgeLeftBottom,
#createaccount .CaptionEdgeRightBottom {
  background: none !important;
}

#createaccount .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#createaccount .CaptionInnerContainer,
#createaccount .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#createaccount .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#createaccount .TableContent {
  border: none !important;
  background: transparent;
}

#createaccount .InnerTableContainer,
#createaccount .TableContentContainer {
  width: 100%;
}

#createaccount td.LabelV200 {
  width: 220px !important;
  min-width: 180px;
  color: var(--m-muted);
  font-size: 0.84rem;
  font-weight: 600;
  vertical-align: middle;
}

#createaccount td.LabelV200 span,
#createaccount td.LabelV200 strong {
  color: var(--m-muted);
}

#createaccount .CreateAccountFormInput,
#createaccount input[type="text"],
#createaccount input[type="password"],
#createaccount input[type="email"],
#createaccount select,
#createaccount textarea {
  width: 100% !important;
  max-width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-text);
  outline: none;
}

#createaccount select {
  cursor: pointer;
}

#createaccount .CreateAccountFormInput:focus,
#createaccount input[type="text"]:focus,
#createaccount input[type="password"]:focus,
#createaccount input[type="email"]:focus,
#createaccount select:focus,
#createaccount textarea:focus {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

#createaccount .passwordStrength {
  width: auto !important;
  max-width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid var(--m-border);
  color: var(--m-muted);
  font-size: 0.78rem;
}

#createaccount input[type="radio"],
#createaccount input[type="checkbox"] {
  accent-color: #10b981;
  transform: scale(1.05);
}

/* Game World section */
#createaccount .LabelH td {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #e2e8f0 !important;
  border: 1px solid var(--m-border) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 10px 12px !important;
}

#createaccount .OptionContainer {
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  padding: 12px 10px;
  min-height: 110px;
}

#createaccount .OptionContainer label {
  color: var(--m-text);
  font-size: 0.84rem;
  cursor: pointer;
}

#createaccount .WorldLocationIcon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px !important;
}

#createaccount #options-container {
  position: static !important;
  left: auto !important;
  color: var(--m-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

#createaccount #options-container label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--m-border);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.5);
}

#createaccount #options-container label:hover {
  border-color: rgba(56, 189, 248, 0.55);
}

#createaccount .Odd td,
#createaccount .Even td {
  background: transparent !important;
  border-color: var(--m-border) !important;
}

#createaccount .BigButton,
#createaccount .BigButtonRed {
  background: none !important;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

#createaccount .BigButtonText {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--m-font);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.18s ease;
}

#createaccount .BigButton .BigButtonText {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-color: rgba(16, 185, 129, 0.6);
}

#createaccount .BigButtonRed .BigButtonText {
  background: rgba(2, 6, 23, 0.6);
  color: var(--m-text);
  border-color: var(--m-border);
}

#createaccount .BigButton .BigButtonText:hover,
#createaccount .BigButtonRed .BigButtonText:hover {
  transform: translateY(-1px);
}

#createaccount .Table5 td,
#createaccount .Table4 td {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Download page - accept agreement CTA */
#download #pixelDownload {
  display: inline-flex;
  justify-content: center;
  width: 100%;
}

#download .m-download-accept-btn {
  min-width: 220px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.65);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-family: var(--m-font);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.35);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

#download .m-download-accept-btn i {
  font-size: 0.95rem;
}

#download .m-download-accept-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.45);
}

#download .m-download-accept-btn:active {
  transform: translateY(0);
}

/* Download accepted - launcher/client description blocks */
#download .TableContent.TableStripped {
  border: 1px solid var(--m-border) !important;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.88);
}

#download .TableContent.TableStripped tr[bgcolor] td {
  background: rgba(15, 23, 42, 0.9) !important;
  color: var(--m-text);
  border-color: var(--m-border) !important;
}

#download .TableContent.TableStripped td {
  padding: 14px 16px !important;
  vertical-align: top;
}

#download .TableContent.TableStripped b {
  color: #f8fafc;
  font-size: 0.95rem;
  line-height: 1.4;
}

#download .TableContent.TableStripped font {
  color: #f87171 !important;
}

#download .TableContent.TableStripped small {
  color: var(--m-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

#download .TableContent.TableStripped a {
  color: #7dd3fc;
  font-weight: 600;
  text-decoration: none;
}

#download .TableContent.TableStripped a:hover {
  color: #bae6fd;
  text-decoration: underline;
}

#download .TableContent.TableStripped img[src*="client_cip"] {
  width: 58px !important;
  height: 58px;
  object-fit: contain;
}

/* Progressive enhancement: convert legacy table rows to modern grid rows */
#createaccount .TableContent tr.m-ca-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
}

#createaccount .TableContent tr.m-ca-row td {
  display: block;
  width: auto !important;
  padding-top: 0;
  padding-bottom: 0;
}

#createaccount .TableContent tr.m-ca-row .m-ca-label {
  margin: 0;
}

#createaccount .TableContent tr.m-ca-row .m-ca-field {
  min-width: 0;
}

@media (max-width: 767.98px) {
  #createaccount td.LabelV200 {
    width: auto !important;
    min-width: 0;
    display: block;
    padding-bottom: 4px;
  }

  #createaccount .TableContent tr {
    display: block;
    margin-bottom: 10px;
  }

  #createaccount .TableContent td {
    display: block;
    width: 100% !important;
  }

  #createaccount .TableContent tr.m-ca-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Characters page modernization (legacy markup from pages/characters.php) */
#characters {
  max-width: 100%;
}

#characters .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

#characters .CaptionContainer,
#characters .TableShadowContainer,
#characters .TableShadowContainerRightTop,
#characters .TableShadowRightTop,
#characters .TableContentAndRightShadow,
#characters .CaptionEdgeLeftTop,
#characters .CaptionEdgeRightTop,
#characters .CaptionBorderTop,
#characters .CaptionVerticalLeft,
#characters .CaptionVerticalRight,
#characters .CaptionBorderBottom,
#characters .CaptionEdgeLeftBottom,
#characters .CaptionEdgeRightBottom {
  background: none !important;
}

#characters .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#characters .CaptionInnerContainer,
#characters .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#characters .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#characters .InnerTableContainer,
#characters .TableContentContainer {
  width: 100%;
}

#characters table.Table3,
#characters table.Table5,
#characters table.TableContent {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}

#characters .TableContent {
  border: 1px solid var(--m-border) !important;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.35);
}

#characters .TableContent td,
#characters .TableContent th {
  color: var(--m-text) !important;
  font-size: 0.88rem;
  line-height: 1.45;
  vertical-align: top;
}

#characters .TableContent tr[bgcolor] td,
#characters .TableContent td[bgcolor],
#characters .TableContent th[style*="background-color"] {
  background: rgba(15, 23, 42, 0.9) !important;
}

#characters .TableContent tr + tr td {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}

#characters .LabelV175,
#characters .LabelV120 {
  color: var(--m-muted) !important;
  font-weight: 600;
}

#characters .TableContent a {
  color: #7dd3fc;
  text-decoration: none;
}

#characters .TableContent a:hover {
  color: #bae6fd;
  text-decoration: underline;
}

#characters .green,
#characters .red {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

#characters .green {
  color: #86efac !important;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

#characters .red {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

#characters .ThreeColumnsForm {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
}

#characters .m-chars-search-input,
#characters input[name="name"][maxlength] {
  width: 100% !important;
  min-height: 42px;
  padding: 10px 12px;
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-text);
  outline: none;
}

#characters .m-chars-search-input:focus,
#characters input[name="name"][maxlength]:focus {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

#characters .BigButton {
  background: none !important;
}

#characters .BigButtonText {
  min-height: 40px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.6);
  color: var(--m-text);
  font-weight: 700;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

#characters .BigButtonText:hover {
  border-color: rgba(56, 189, 248, 0.75);
  color: #bae6fd;
  transform: translateY(-1px);
}

@media (max-width: 991.98px) {
  #characters .ThreeColumnsForm {
    grid-template-columns: 1fr;
  }

  #characters .TableContent,
  #characters .InnerTableContainer {
    overflow-x: auto;
  }
}

/* Community pages modernization (guilds, guildwars, houses, highscores, lastdeaths) */
#guilds,
#guildwars,
#houses,
#highscores,
#lastdeaths {
  max-width: 100%;
}

#guilds .TableContainer,
#guildwars .TableContainer,
#houses .TableContainer,
#highscores .TableContainer,
#lastdeaths .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden;
}

#guilds .CaptionContainer,
#guildwars .CaptionContainer,
#houses .CaptionContainer,
#highscores .CaptionContainer,
#lastdeaths .CaptionContainer,
#guilds .TableShadowContainer,
#guildwars .TableShadowContainer,
#houses .TableShadowContainer,
#highscores .TableShadowContainer,
#lastdeaths .TableShadowContainer,
#guilds .TableShadowContainerRightTop,
#guildwars .TableShadowContainerRightTop,
#houses .TableShadowContainerRightTop,
#highscores .TableShadowContainerRightTop,
#lastdeaths .TableShadowContainerRightTop,
#guilds .TableShadowRightTop,
#guildwars .TableShadowRightTop,
#houses .TableShadowRightTop,
#highscores .TableShadowRightTop,
#lastdeaths .TableShadowRightTop,
#guilds .TableContentAndRightShadow,
#guildwars .TableContentAndRightShadow,
#houses .TableContentAndRightShadow,
#highscores .TableContentAndRightShadow,
#lastdeaths .TableContentAndRightShadow,
#guilds .CaptionEdgeLeftTop,
#guildwars .CaptionEdgeLeftTop,
#houses .CaptionEdgeLeftTop,
#highscores .CaptionEdgeLeftTop,
#lastdeaths .CaptionEdgeLeftTop,
#guilds .CaptionEdgeRightTop,
#guildwars .CaptionEdgeRightTop,
#houses .CaptionEdgeRightTop,
#highscores .CaptionEdgeRightTop,
#lastdeaths .CaptionEdgeRightTop,
#guilds .CaptionBorderTop,
#guildwars .CaptionBorderTop,
#houses .CaptionBorderTop,
#highscores .CaptionBorderTop,
#lastdeaths .CaptionBorderTop,
#guilds .CaptionVerticalLeft,
#guildwars .CaptionVerticalLeft,
#houses .CaptionVerticalLeft,
#highscores .CaptionVerticalLeft,
#lastdeaths .CaptionVerticalLeft,
#guilds .CaptionVerticalRight,
#guildwars .CaptionVerticalRight,
#houses .CaptionVerticalRight,
#highscores .CaptionVerticalRight,
#lastdeaths .CaptionVerticalRight,
#guilds .CaptionBorderBottom,
#guildwars .CaptionBorderBottom,
#houses .CaptionBorderBottom,
#highscores .CaptionBorderBottom,
#lastdeaths .CaptionBorderBottom,
#guilds .CaptionEdgeLeftBottom,
#guildwars .CaptionEdgeLeftBottom,
#houses .CaptionEdgeLeftBottom,
#highscores .CaptionEdgeLeftBottom,
#lastdeaths .CaptionEdgeLeftBottom,
#guilds .CaptionEdgeRightBottom,
#guildwars .CaptionEdgeRightBottom,
#houses .CaptionEdgeRightBottom,
#highscores .CaptionEdgeRightBottom,
#lastdeaths .CaptionEdgeRightBottom {
  background: none !important;
}

#guilds .CaptionContainer,
#guildwars .CaptionContainer,
#houses .CaptionContainer,
#highscores .CaptionContainer,
#lastdeaths .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#guilds .CaptionInnerContainer,
#guildwars .CaptionInnerContainer,
#houses .CaptionInnerContainer,
#highscores .CaptionInnerContainer,
#lastdeaths .CaptionInnerContainer,
#guilds .CaptionContainer .Text,
#guildwars .CaptionContainer .Text,
#houses .CaptionContainer .Text,
#highscores .CaptionContainer .Text,
#lastdeaths .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#guilds .CaptionContainer .Text,
#guildwars .CaptionContainer .Text,
#houses .CaptionContainer .Text,
#highscores .CaptionContainer .Text,
#lastdeaths .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#guilds .InnerTableContainer,
#guildwars .InnerTableContainer,
#houses .InnerTableContainer,
#highscores .InnerTableContainer,
#lastdeaths .InnerTableContainer,
#guilds .TableContentContainer,
#guildwars .TableContentContainer,
#houses .TableContentContainer,
#highscores .TableContentContainer,
#lastdeaths .TableContentContainer {
  width: 100%;
}

#guilds table.Table1,
#guildwars table.Table1,
#houses table.Table1,
#highscores table.Table1,
#lastdeaths table.Table1,
#guilds table.Table2,
#guildwars table.Table2,
#houses table.Table2,
#highscores table.Table2,
#lastdeaths table.Table2,
#guilds table.Table3,
#guildwars table.Table3,
#houses table.Table3,
#highscores table.Table3,
#lastdeaths table.Table3,
#guilds table.Table4,
#guildwars table.Table4,
#houses table.Table4,
#highscores table.Table4,
#lastdeaths table.Table4,
#guilds table.Table5,
#guildwars table.Table5,
#houses table.Table5,
#highscores table.Table5,
#lastdeaths table.Table5,
#guilds table.TableContent,
#guildwars table.TableContent,
#houses table.TableContent,
#highscores table.TableContent,
#lastdeaths table.TableContent {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}

#guilds .TableContent,
#guildwars .TableContent,
#houses .TableContent,
#highscores .TableContent,
#lastdeaths .TableContent {
  border: 1px solid var(--m-border) !important;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.35);
}

#guilds .TableContent td,
#guildwars .TableContent td,
#houses .TableContent td,
#highscores .TableContent td,
#lastdeaths .TableContent td,
#guilds .TableContent th,
#guildwars .TableContent th,
#houses .TableContent th,
#highscores .TableContent th,
#lastdeaths .TableContent th {
  color: var(--m-text) !important;
  font-size: 0.88rem;
  line-height: 1.45;
}

#guilds .TableContent tr[bgcolor] td,
#guildwars .TableContent tr[bgcolor] td,
#houses .TableContent tr[bgcolor] td,
#highscores .TableContent tr[bgcolor] td,
#lastdeaths .TableContent tr[bgcolor] td,
#guilds .TableContent tr[style*="background-color"] td,
#guildwars .TableContent tr[style*="background-color"] td,
#houses .TableContent tr[style*="background-color"] td,
#highscores .TableContent tr[style*="background-color"] td,
#lastdeaths .TableContent tr[style*="background-color"] td,
#guilds .TableContent td[bgcolor],
#guildwars .TableContent td[bgcolor],
#houses .TableContent td[bgcolor],
#highscores .TableContent td[bgcolor],
#lastdeaths .TableContent td[bgcolor],
#guilds .TableContent th[style*="background-color"],
#guildwars .TableContent th[style*="background-color"],
#houses .TableContent th[style*="background-color"],
#highscores .TableContent th[style*="background-color"],
#lastdeaths .TableContent th[style*="background-color"] {
  background: rgba(15, 23, 42, 0.9) !important;
}

#guilds .TableContent tr + tr td,
#guildwars .TableContent tr + tr td,
#houses .TableContent tr + tr td,
#highscores .TableContent tr + tr td,
#lastdeaths .TableContent tr + tr td {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}

#guilds .LabelV,
#guildwars .LabelV,
#houses .LabelV,
#highscores .LabelV,
#lastdeaths .LabelV,
#guilds .LabelV120,
#guildwars .LabelV120,
#houses .LabelV120,
#highscores .LabelV120,
#lastdeaths .LabelV120,
#guilds .LabelV175,
#guildwars .LabelV175,
#houses .LabelV175,
#highscores .LabelV175,
#lastdeaths .LabelV175 {
  color: var(--m-muted) !important;
  font-weight: 600;
}

#guilds a,
#guildwars a,
#houses a,
#highscores a,
#lastdeaths a {
  color: #7dd3fc;
  text-decoration: none;
}

#guilds a:hover,
#guildwars a:hover,
#houses a:hover,
#highscores a:hover,
#lastdeaths a:hover {
  color: #bae6fd;
  text-decoration: underline;
}

#guilds .BigButton,
#guildwars .BigButton,
#houses .BigButton,
#highscores .BigButton,
#lastdeaths .BigButton {
  background: none !important;
}

#guilds .BigButtonText,
#guildwars .BigButtonText,
#houses .BigButtonText,
#highscores .BigButtonText,
#lastdeaths .BigButtonText,
#guilds .ButtonText,
#guildwars .ButtonText,
#houses .ButtonText,
#highscores .ButtonText,
#lastdeaths .ButtonText,
#guilds input[type="submit"],
#guildwars input[type="submit"],
#houses input[type="submit"],
#highscores input[type="submit"],
#lastdeaths input[type="submit"] {
  min-height: 40px;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 8px !important;
  background: rgba(2, 6, 23, 0.6) !important;
  color: var(--m-text) !important;
  font-weight: 700;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

#guilds .BigButtonText:hover,
#guildwars .BigButtonText:hover,
#houses .BigButtonText:hover,
#highscores .BigButtonText:hover,
#lastdeaths .BigButtonText:hover,
#guilds .ButtonText:hover,
#guildwars .ButtonText:hover,
#houses .ButtonText:hover,
#highscores .ButtonText:hover,
#lastdeaths .ButtonText:hover,
#guilds input[type="submit"]:hover,
#guildwars input[type="submit"]:hover,
#houses input[type="submit"]:hover,
#highscores input[type="submit"]:hover,
#lastdeaths input[type="submit"]:hover {
  border-color: rgba(56, 189, 248, 0.75) !important;
  color: #bae6fd !important;
  transform: translateY(-1px);
}

#guilds input[type="text"],
#guildwars input[type="text"],
#houses input[type="text"],
#highscores input[type="text"],
#lastdeaths input[type="text"],
#guilds input[type="number"],
#guildwars input[type="number"],
#houses input[type="number"],
#highscores input[type="number"],
#lastdeaths input[type="number"],
#guilds select,
#guildwars select,
#houses select,
#highscores select,
#lastdeaths select {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--m-border);
  background: rgba(2, 6, 23, 0.75);
  color: var(--m-text);
}

#guilds input[type="text"]:focus,
#guildwars input[type="text"]:focus,
#houses input[type="text"]:focus,
#highscores input[type="text"]:focus,
#lastdeaths input[type="text"]:focus,
#guilds input[type="number"]:focus,
#guildwars input[type="number"]:focus,
#houses input[type="number"]:focus,
#highscores input[type="number"]:focus,
#lastdeaths input[type="number"]:focus,
#guilds select:focus,
#guildwars select:focus,
#houses select:focus,
#highscores select:focus,
#lastdeaths select:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Houses: fine tuning for Available Houses table */
#houses .TableContent tr.LabelH td {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m-muted) !important;
  font-weight: 700;
  white-space: nowrap;
}

#houses .TableContent tr td:nth-child(2),
#houses .TableContent tr td:nth-child(3) {
  white-space: nowrap;
}

#houses .TableContent tr td:nth-child(3) {
  color: #fcd34d !important;
  font-weight: 700;
}

#houses .TableContent tr td:nth-child(4) {
  color: var(--m-muted) !important;
}

#houses .TableContent tr td:last-child {
  text-align: right;
  min-width: 110px;
}

#houses .BigButtonTextLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 8px !important;
  background: rgba(2, 6, 23, 0.6) !important;
  color: var(--m-text) !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

#houses .BigButtonTextLink:hover {
  border-color: rgba(56, 189, 248, 0.75) !important;
  color: #bae6fd !important;
  transform: translateY(-1px);
}

/* Highscores: improve characters ranking table readability */
#highscores .TableContent tr.LabelH td {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m-muted) !important;
  font-weight: 700;
  white-space: nowrap;
}

#highscores .TableContent tr td:nth-child(1) {
  width: 70px;
  text-align: center;
  color: var(--m-muted) !important;
  font-weight: 700;
}

#highscores .TableContent tr td:nth-child(2) {
  min-width: 220px;
}

#highscores .TableContent tr td:nth-child(2) a {
  font-weight: 700;
}

#highscores .TableContent tr td:nth-child(3) {
  min-width: 150px;
  color: #cbd5e1 !important;
}

#highscores .TableContent tr td:nth-child(4) {
  min-width: 120px;
  color: #93c5fd !important;
  font-weight: 600;
}

#highscores .TableContent tr td:nth-child(5),
#highscores .TableContent tr td:nth-child(6) {
  min-width: 130px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

#highscores .TableContent tr td:nth-child(6) {
  min-width: 170px;
  color: #fcd34d !important;
}

#highscores .PageNavigation {
  color: var(--m-muted);
  font-size: 0.82rem;
}

#highscores .PageNavigation .PageLink a,
#highscores .PageNavigation .CurrentPageLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin: 0 2px;
  border-radius: 6px;
}

#highscores .PageNavigation .PageLink a {
  border: 1px solid var(--m-border);
  color: #7dd3fc;
  text-decoration: none;
}

#highscores .PageNavigation .PageLink a:hover {
  border-color: rgba(56, 189, 248, 0.65);
  color: #bae6fd;
}

#highscores .PageNavigation .CurrentPageLink {
  border: 1px solid rgba(56, 189, 248, 0.65);
  background: rgba(56, 189, 248, 0.18);
  color: #e0f2fe;
  font-weight: 700;
}

/* Support page table modernization */
#support {
  max-width: 100%;
}

#support .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden;
}

#support .CaptionContainer,
#support .CaptionEdgeLeftTop,
#support .CaptionEdgeRightTop,
#support .CaptionBorderTop,
#support .CaptionVerticalLeft,
#support .CaptionVerticalRight,
#support .CaptionBorderBottom,
#support .CaptionEdgeLeftBottom,
#support .CaptionEdgeRightBottom {
  background: none !important;
}

#support .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#support .CaptionInnerContainer,
#support .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#support .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#support table.TableContent {
  width: 100% !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 10px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(2, 6, 23, 0.35);
}

#support .TableContent tr.LabelH td {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--m-muted) !important;
  font-weight: 700;
  white-space: nowrap;
}

#support .TableContent tr[bgcolor] td,
#support .TableContent tr[style*="background-color"] td,
#support .TableContent td[bgcolor] {
  background: rgba(15, 23, 42, 0.9) !important;
  color: var(--m-text) !important;
}

#support .TableContent tr + tr td {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}

#support .TableContent td {
  font-size: 0.88rem;
  line-height: 1.45;
  vertical-align: middle;
}

#support .TableContent td:first-child {
  text-align: center;
  width: 52px;
}

#support .m-support-role-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--m-border);
  background: rgba(2, 6, 23, 0.6);
  font-size: 0.8rem;
}

#support .m-support-role-god {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.45);
}

#support .m-support-role-adm {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
}

#support .m-support-role-cm {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.45);
}

#support .m-support-role-gm {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.45);
}

#support .m-support-role-st,
#support .m-support-role-tutor {
  color: #c4b5fd;
  border-color: rgba(196, 181, 253, 0.45);
}

#support .TableContent td:nth-child(2) {
  white-space: nowrap;
  font-weight: 700;
}

#support .TableContent a {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 700;
}

#support .TableContent a:hover {
  color: #bae6fd;
  text-decoration: underline;
}

/* Server Info page modernization */
#serverinfo {
  max-width: 100%;
}

#serverinfo .interactiveDiv.TableContainer,
#serverinfo .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden;
}

#serverinfo .CaptionContainer,
#serverinfo .TableShadowContainer,
#serverinfo .TableShadowContainerRightTop,
#serverinfo .TableShadowRightTop,
#serverinfo .TableContentAndRightShadow,
#serverinfo .CaptionEdgeLeftTop,
#serverinfo .CaptionEdgeRightTop,
#serverinfo .CaptionBorderTop,
#serverinfo .CaptionVerticalLeft,
#serverinfo .CaptionVerticalRight,
#serverinfo .CaptionBorderBottom,
#serverinfo .CaptionEdgeLeftBottom,
#serverinfo .CaptionEdgeRightBottom {
  background: none !important;
}

#serverinfo .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#serverinfo .CaptionInnerContainer,
#serverinfo .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#serverinfo .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#serverinfo .closeFormButton {
  float: right;
  margin: 8px 12px 0 0;
  min-width: 28px;
  min-height: 28px;
  border: 1px solid var(--m-border);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.6);
  color: var(--m-muted);
  font-weight: 700;
  line-height: 1;
}

#serverinfo .closeFormButton:hover {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.65);
}

#serverinfo .InnerTableContainer,
#serverinfo .TableContentContainer {
  width: 100%;
}

#serverinfo table.Table1,
#serverinfo table.Table2,
#serverinfo table.Table3,
#serverinfo table.Table4,
#serverinfo table.Table5,
#serverinfo table.TableContent {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}

#serverinfo .TableContent {
  border: 1px solid var(--m-border) !important;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.35);
}

#serverinfo .TableContent tr[bgcolor] td,
#serverinfo .TableContent tr[style*="background-color"] td,
#serverinfo .TableContent td[bgcolor],
#serverinfo .TableContent th[style*="background-color"] {
  background: rgba(15, 23, 42, 0.9) !important;
  color: var(--m-text) !important;
}

#serverinfo .TableContent td,
#serverinfo .TableContent th {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--m-text) !important;
  vertical-align: top;
}

#serverinfo .TableContent tr + tr td {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}

#serverinfo .TableContent tr.LabelH td,
#serverinfo .TableContent > tbody > tr:first-child > td > b {
  color: var(--m-muted) !important;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#serverinfo .TableContent b {
  color: #e2e8f0;
}

#serverinfo .HintBox,
#serverinfo .SmallBox .MessageContainer,
#serverinfo .SmallBox .Message {
  background: transparent !important;
}

#serverinfo .HintBox {
  width: 100%;
  border: 1px solid var(--m-border);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.5) !important;
}

#serverinfo .HintBox li {
  color: var(--m-text);
  margin: 8px 0;
}

#serverinfo a {
  color: #7dd3fc;
}

#serverinfo a:hover {
  color: #bae6fd;
}

@media (max-width: 991.98px) {
  #serverinfo .TableContent,
  #serverinfo .InnerTableContainer {
    overflow-x: auto;
  }
}

/* Char Bazaar pages modernization */
#currentcharactertrades,
#pastcharactertrades,
#ownbids,
#owncharactertrades,
#watchedcharactertrades {
  max-width: 100%;
}

#currentcharactertrades .TableContainer,
#pastcharactertrades .TableContainer,
#ownbids .TableContainer,
#owncharactertrades .TableContainer,
#watchedcharactertrades .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden;
}

#currentcharactertrades .CaptionContainer,
#pastcharactertrades .CaptionContainer,
#ownbids .CaptionContainer,
#owncharactertrades .CaptionContainer,
#watchedcharactertrades .CaptionContainer,
#currentcharactertrades .TableShadowContainer,
#pastcharactertrades .TableShadowContainer,
#ownbids .TableShadowContainer,
#owncharactertrades .TableShadowContainer,
#watchedcharactertrades .TableShadowContainer,
#currentcharactertrades .TableShadowContainerRightTop,
#pastcharactertrades .TableShadowContainerRightTop,
#ownbids .TableShadowContainerRightTop,
#owncharactertrades .TableShadowContainerRightTop,
#watchedcharactertrades .TableShadowContainerRightTop,
#currentcharactertrades .TableShadowRightTop,
#pastcharactertrades .TableShadowRightTop,
#ownbids .TableShadowRightTop,
#owncharactertrades .TableShadowRightTop,
#watchedcharactertrades .TableShadowRightTop,
#currentcharactertrades .TableContentAndRightShadow,
#pastcharactertrades .TableContentAndRightShadow,
#ownbids .TableContentAndRightShadow,
#owncharactertrades .TableContentAndRightShadow,
#watchedcharactertrades .TableContentAndRightShadow,
#currentcharactertrades .CaptionEdgeLeftTop,
#pastcharactertrades .CaptionEdgeLeftTop,
#ownbids .CaptionEdgeLeftTop,
#owncharactertrades .CaptionEdgeLeftTop,
#watchedcharactertrades .CaptionEdgeLeftTop,
#currentcharactertrades .CaptionEdgeRightTop,
#pastcharactertrades .CaptionEdgeRightTop,
#ownbids .CaptionEdgeRightTop,
#owncharactertrades .CaptionEdgeRightTop,
#watchedcharactertrades .CaptionEdgeRightTop,
#currentcharactertrades .CaptionBorderTop,
#pastcharactertrades .CaptionBorderTop,
#ownbids .CaptionBorderTop,
#owncharactertrades .CaptionBorderTop,
#watchedcharactertrades .CaptionBorderTop,
#currentcharactertrades .CaptionVerticalLeft,
#pastcharactertrades .CaptionVerticalLeft,
#ownbids .CaptionVerticalLeft,
#owncharactertrades .CaptionVerticalLeft,
#watchedcharactertrades .CaptionVerticalLeft,
#currentcharactertrades .CaptionVerticalRight,
#pastcharactertrades .CaptionVerticalRight,
#ownbids .CaptionVerticalRight,
#owncharactertrades .CaptionVerticalRight,
#watchedcharactertrades .CaptionVerticalRight,
#currentcharactertrades .CaptionBorderBottom,
#pastcharactertrades .CaptionBorderBottom,
#ownbids .CaptionBorderBottom,
#owncharactertrades .CaptionBorderBottom,
#watchedcharactertrades .CaptionBorderBottom,
#currentcharactertrades .CaptionEdgeLeftBottom,
#pastcharactertrades .CaptionEdgeLeftBottom,
#ownbids .CaptionEdgeLeftBottom,
#owncharactertrades .CaptionEdgeLeftBottom,
#watchedcharactertrades .CaptionEdgeLeftBottom,
#currentcharactertrades .CaptionEdgeRightBottom,
#pastcharactertrades .CaptionEdgeRightBottom,
#ownbids .CaptionEdgeRightBottom,
#owncharactertrades .CaptionEdgeRightBottom,
#watchedcharactertrades .CaptionEdgeRightBottom {
  background: none !important;
}

#currentcharactertrades .CaptionContainer,
#pastcharactertrades .CaptionContainer,
#ownbids .CaptionContainer,
#owncharactertrades .CaptionContainer,
#watchedcharactertrades .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#currentcharactertrades .CaptionInnerContainer,
#pastcharactertrades .CaptionInnerContainer,
#ownbids .CaptionInnerContainer,
#owncharactertrades .CaptionInnerContainer,
#watchedcharactertrades .CaptionInnerContainer,
#currentcharactertrades .CaptionContainer .Text,
#pastcharactertrades .CaptionContainer .Text,
#ownbids .CaptionContainer .Text,
#owncharactertrades .CaptionContainer .Text,
#watchedcharactertrades .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#currentcharactertrades .CaptionContainer .Text,
#pastcharactertrades .CaptionContainer .Text,
#ownbids .CaptionContainer .Text,
#owncharactertrades .CaptionContainer .Text,
#watchedcharactertrades .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#currentcharactertrades table.Table1,
#pastcharactertrades table.Table1,
#ownbids table.Table1,
#owncharactertrades table.Table1,
#watchedcharactertrades table.Table1,
#currentcharactertrades table.Table2,
#pastcharactertrades table.Table2,
#ownbids table.Table2,
#owncharactertrades table.Table2,
#watchedcharactertrades table.Table2,
#currentcharactertrades table.Table3,
#pastcharactertrades table.Table3,
#ownbids table.Table3,
#owncharactertrades table.Table3,
#watchedcharactertrades table.Table3,
#currentcharactertrades table.Table4,
#pastcharactertrades table.Table4,
#ownbids table.Table4,
#owncharactertrades table.Table4,
#watchedcharactertrades table.Table4,
#currentcharactertrades table.Table5,
#pastcharactertrades table.Table5,
#ownbids table.Table5,
#owncharactertrades table.Table5,
#watchedcharactertrades table.Table5,
#currentcharactertrades table.TableContent,
#pastcharactertrades table.TableContent,
#ownbids table.TableContent,
#owncharactertrades table.TableContent,
#watchedcharactertrades table.TableContent {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}

#currentcharactertrades .TableContent,
#pastcharactertrades .TableContent,
#ownbids .TableContent,
#owncharactertrades .TableContent,
#watchedcharactertrades .TableContent {
  border: 1px solid var(--m-border) !important;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.35);
}

#currentcharactertrades .TableContent tr[bgcolor] td,
#pastcharactertrades .TableContent tr[bgcolor] td,
#ownbids .TableContent tr[bgcolor] td,
#owncharactertrades .TableContent tr[bgcolor] td,
#watchedcharactertrades .TableContent tr[bgcolor] td,
#currentcharactertrades .TableContent tr[style*="background-color"] td,
#pastcharactertrades .TableContent tr[style*="background-color"] td,
#ownbids .TableContent tr[style*="background-color"] td,
#owncharactertrades .TableContent tr[style*="background-color"] td,
#watchedcharactertrades .TableContent tr[style*="background-color"] td,
#currentcharactertrades .TableContent td[bgcolor],
#pastcharactertrades .TableContent td[bgcolor],
#ownbids .TableContent td[bgcolor],
#owncharactertrades .TableContent td[bgcolor],
#watchedcharactertrades .TableContent td[bgcolor] {
  background: rgba(15, 23, 42, 0.9) !important;
  color: var(--m-text) !important;
}

#currentcharactertrades .TableContent td,
#pastcharactertrades .TableContent td,
#ownbids .TableContent td,
#owncharactertrades .TableContent td,
#watchedcharactertrades .TableContent td,
#currentcharactertrades .TableContent th,
#pastcharactertrades .TableContent th,
#ownbids .TableContent th,
#owncharactertrades .TableContent th,
#watchedcharactertrades .TableContent th {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--m-text) !important;
}

#currentcharactertrades .TableContent tr.LabelH td,
#pastcharactertrades .TableContent tr.LabelH td,
#ownbids .TableContent tr.LabelH td,
#owncharactertrades .TableContent tr.LabelH td,
#watchedcharactertrades .TableContent tr.LabelH td {
  color: var(--m-muted) !important;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

#currentcharactertrades .TableContent tr + tr td,
#pastcharactertrades .TableContent tr + tr td,
#ownbids .TableContent tr + tr td,
#owncharactertrades .TableContent tr + tr td,
#watchedcharactertrades .TableContent tr + tr td {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}

#currentcharactertrades a,
#pastcharactertrades a,
#ownbids a,
#owncharactertrades a,
#watchedcharactertrades a {
  color: #7dd3fc;
  text-decoration: none;
}

#currentcharactertrades a:hover,
#pastcharactertrades a:hover,
#ownbids a:hover,
#owncharactertrades a:hover,
#watchedcharactertrades a:hover {
  color: #bae6fd;
  text-decoration: underline;
}

#currentcharactertrades .BigButton,
#currentcharactertrades .BigButtonGreen,
#currentcharactertrades .BigButtonRed,
#currentcharactertrades .BigButtonGrey,
#pastcharactertrades .BigButton,
#pastcharactertrades .BigButtonGreen,
#pastcharactertrades .BigButtonRed,
#pastcharactertrades .BigButtonGrey,
#ownbids .BigButton,
#ownbids .BigButtonGreen,
#ownbids .BigButtonRed,
#ownbids .BigButtonGrey,
#owncharactertrades .BigButton,
#owncharactertrades .BigButtonGreen,
#owncharactertrades .BigButtonRed,
#owncharactertrades .BigButtonGrey,
#watchedcharactertrades .BigButton,
#watchedcharactertrades .BigButtonGreen,
#watchedcharactertrades .BigButtonRed,
#watchedcharactertrades .BigButtonGrey {
  background: none !important;
}

#currentcharactertrades .BigButtonText,
#currentcharactertrades .BigButtonTextLink,
#pastcharactertrades .BigButtonText,
#pastcharactertrades .BigButtonTextLink,
#ownbids .BigButtonText,
#ownbids .BigButtonTextLink,
#owncharactertrades .BigButtonText,
#owncharactertrades .BigButtonTextLink,
#watchedcharactertrades .BigButtonText,
#watchedcharactertrades .BigButtonTextLink,
#currentcharactertrades .ButtonText,
#pastcharactertrades .ButtonText,
#ownbids .ButtonText,
#owncharactertrades .ButtonText,
#watchedcharactertrades .ButtonText {
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--m-border) !important;
  border-radius: 8px !important;
  background: rgba(2, 6, 23, 0.6) !important;
  color: var(--m-text) !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

#currentcharactertrades .BigButtonText:hover,
#currentcharactertrades .BigButtonTextLink:hover,
#pastcharactertrades .BigButtonText:hover,
#pastcharactertrades .BigButtonTextLink:hover,
#ownbids .BigButtonText:hover,
#ownbids .BigButtonTextLink:hover,
#owncharactertrades .BigButtonText:hover,
#owncharactertrades .BigButtonTextLink:hover,
#watchedcharactertrades .BigButtonText:hover,
#watchedcharactertrades .BigButtonTextLink:hover {
  border-color: rgba(56, 189, 248, 0.7) !important;
  color: #bae6fd !important;
  transform: translateY(-1px);
}

#currentcharactertrades input[type="text"],
#currentcharactertrades input[type="number"],
#currentcharactertrades select,
#pastcharactertrades input[type="text"],
#pastcharactertrades input[type="number"],
#pastcharactertrades select,
#ownbids input[type="text"],
#ownbids input[type="number"],
#ownbids select,
#owncharactertrades input[type="text"],
#owncharactertrades input[type="number"],
#owncharactertrades select,
#watchedcharactertrades input[type="text"],
#watchedcharactertrades input[type="number"],
#watchedcharactertrades select {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--m-border);
  background: rgba(2, 6, 23, 0.75);
  color: var(--m-text);
}

#currentcharactertrades input[type="text"]:focus,
#currentcharactertrades input[type="number"]:focus,
#currentcharactertrades select:focus,
#pastcharactertrades input[type="text"]:focus,
#pastcharactertrades input[type="number"]:focus,
#pastcharactertrades select:focus,
#ownbids input[type="text"]:focus,
#ownbids input[type="number"]:focus,
#ownbids select:focus,
#owncharactertrades input[type="text"]:focus,
#owncharactertrades input[type="number"]:focus,
#owncharactertrades select:focus,
#watchedcharactertrades input[type="text"]:focus,
#watchedcharactertrades input[type="number"]:focus,
#watchedcharactertrades select:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

@media (max-width: 991.98px) {
  #currentcharactertrades .TableContent,
  #currentcharactertrades .InnerTableContainer,
  #pastcharactertrades .TableContent,
  #pastcharactertrades .InnerTableContainer,
  #ownbids .TableContent,
  #ownbids .InnerTableContainer,
  #owncharactertrades .TableContent,
  #owncharactertrades .InnerTableContainer,
  #watchedcharactertrades .TableContent,
  #watchedcharactertrades .InnerTableContainer {
    overflow-x: auto;
  }
}

/* Donate page modernization */
#donate {
  max-width: 100%;
}

#donate .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.88) !important;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden;
}

#donate .CaptionContainer,
#donate .TableShadowContainer,
#donate .TableShadowContainerRightTop,
#donate .TableShadowRightTop,
#donate .TableContentAndRightShadow,
#donate .CaptionEdgeLeftTop,
#donate .CaptionEdgeRightTop,
#donate .CaptionBorderTop,
#donate .CaptionVerticalLeft,
#donate .CaptionVerticalRight,
#donate .CaptionBorderBottom,
#donate .CaptionEdgeLeftBottom,
#donate .CaptionEdgeRightBottom {
  background: none !important;
}

#donate .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#donate .CaptionInnerContainer,
#donate .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#donate .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#donate table.Table1,
#donate table.Table2,
#donate table.Table3,
#donate table.Table4,
#donate table.Table5,
#donate table.TableContent {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}

#donate .TableContent {
  border: 1px solid var(--m-border) !important;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.35);
}

#donate .TableContent tr[bgcolor] td,
#donate .TableContent tr[style*="background-color"] td,
#donate .TableContent td[bgcolor] {
  background: rgba(15, 23, 42, 0.9) !important;
  color: var(--m-text) !important;
}

#donate .TableContent td,
#donate .TableContent th {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--m-text) !important;
}

#donate .TableContent tr + tr td {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}

#donate .TableContent a {
  color: #7dd3fc;
  text-decoration: none;
}

#donate .TableContent a:hover {
  color: #bae6fd;
  text-decoration: underline;
}

#donate .BigButton,
#donate .BigButtonGreen,
#donate .BigButtonRed,
#donate .BigButtonGrey {
  background: none !important;
}

#donate .BigButtonText,
#donate .ButtonText {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--m-border) !important;
  border-radius: 8px !important;
  background: rgba(2, 6, 23, 0.6) !important;
  color: var(--m-text) !important;
  font-weight: 700;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

#donate .BigButtonText:hover,
#donate .ButtonText:hover {
  border-color: rgba(56, 189, 248, 0.7) !important;
  color: #bae6fd !important;
  transform: translateY(-1px);
}

#donate input[type="text"],
#donate input[type="number"],
#donate input[type="email"],
#donate input[type="password"],
#donate select {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--m-border);
  background: rgba(2, 6, 23, 0.75);
  color: var(--m-text);
}

#donate input[type="text"]:focus,
#donate input[type="number"]:focus,
#donate input[type="email"]:focus,
#donate input[type="password"]:focus,
#donate select:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

#donate .OptionsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
}

#donate .ServiceID_Icon_Container,
#donate .PMCID_Icon_Container {
  width: 100% !important;
  max-width: 170px;
  height: auto !important;
  min-height: 165px;
  float: none !important;
  margin: 0 auto !important;
}

#donate .ServiceID_Icon,
#donate .PMCID_Icon {
  border: 1px solid var(--m-border);
  border-radius: 12px;
  background-color: rgba(2, 6, 23, 0.55);
  overflow: hidden;
}

#donate .ServiceID_Icon .ServiceIDLabelContainer,
#donate .PMCID_Icon .PMCID_CP_Label {
  color: #e2e8f0;
  text-shadow: none;
}

#donate .TabsContainer {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

/* Remove legacy parchment background from donate content */
#donate .BoxContent,
#donate .BoxContent[style*="scroll.gif"] {
  background-image: none !important;
  background: transparent !important;
}

#donate .InnerTableTab,
#donate .ActiveInnerTableTab {
  margin: 0 !important;
  border-radius: 10px;
  border: 1px solid var(--m-border);
  background: rgba(2, 6, 23, 0.55) !important;
}

#donate .fundoWideTab,
#donate img[src*="tab_wide_active.png"],
#donate img[src*="tab_wide.png"] {
  display: none !important;
}

#donate .InnerTableTabLabel,
#donate .InnerTableTab .nameArea,
#donate .InnerTableTab .TabLableAdditional {
  color: #e2e8f0 !important;
  text-shadow: none !important;
}

/* Donate wizard/progress alignment */
#donate #ProgressBar {
  margin: 6px 0 16px;
}

#donate #BackgroundContainer,
#donate #TubeLeftEnd,
#donate #TubeRightEnd,
#donate .TubeContainer,
#donate .StepIcon {
  display: none !important;
}

#donate #MainContainer {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
  padding: 4px 0;
}

#donate #MainContainer::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: rgba(148, 163, 184, 0.35);
  transform: translateY(-50%);
  z-index: 0;
}

#donate #FirstStep,
#donate #StepsContainer1,
#donate #StepsContainer2,
#donate #StepsContainer2 .Steps {
  width: auto !important;
}

#donate #StepsContainer1,
#donate #StepsContainer2 {
  display: contents !important;
}

#donate .SingleStepContainer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--m-border);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.55);
}

#donate .StepText {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: #cbd5e1 !important;
  font-weight: 600;
}

#donate .StepText[style*="bold"] {
  color: #022c22 !important;
  font-weight: 800 !important;
}

#donate #FirstStep .SingleStepContainer::before,
#donate #StepsContainer2 .Steps:nth-child(1) .SingleStepContainer::before,
#donate #StepsContainer2 .Steps:nth-child(2) .SingleStepContainer::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(2, 6, 23, 0.65);
  color: #cbd5e1;
  font-size: 0.85rem;
  line-height: 1;
  flex: 0 0 26px;
}

#donate #FirstStep .SingleStepContainer::before {
  content: "🛒";
}

#donate #StepsContainer2 .Steps:nth-child(1) .SingleStepContainer::before {
  content: "💳";
}

#donate #StepsContainer2 .Steps:nth-child(2) .SingleStepContainer::before {
  content: "📄";
}

#donate .SingleStepContainer:has(.StepText[style*="bold"]) {
  border-color: rgba(34, 197, 94, 0.65);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.75), rgba(16, 185, 129, 0.7));
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.25);
}

#donate .SingleStepContainer:has(.StepText[style*="bold"])::before {
  border-color: rgba(2, 44, 34, 0.35);
  background: rgba(2, 44, 34, 0.18);
  color: #022c22;
}

@media (max-width: 767.98px) {
  #donate #MainContainer {
    grid-template-columns: 1fr;
  }

  #donate #MainContainer::before {
    display: none;
  }
}

@media (max-width: 991.98px) {
  #guilds .TableContent,
  #guildwars .TableContent,
  #houses .TableContent,
  #highscores .TableContent,
  #lastdeaths .TableContent,
  #guilds .InnerTableContainer,
  #guildwars .InnerTableContainer,
  #houses .InnerTableContainer,
  #highscores .InnerTableContainer,
  #lastdeaths .InnerTableContainer {
    overflow-x: auto;
  }
}

/* Account Management modernization (legacy markup from pages/accountmanagement.php) */
#accountmanagement {
  max-width: 100%;
}

#accountmanagement .HeaderPagesText {
  display: block;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8fafc;
}

#accountmanagement .TableContainer {
  margin-bottom: 16px;
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden;
}

#accountmanagement .CaptionContainer,
#accountmanagement .TableShadowContainer,
#accountmanagement .TableShadowContainerRightTop,
#accountmanagement .TableShadowRightTop,
#accountmanagement .TableContentAndRightShadow,
#accountmanagement .CaptionEdgeLeftTop,
#accountmanagement .CaptionEdgeRightTop,
#accountmanagement .CaptionBorderTop,
#accountmanagement .CaptionVerticalLeft,
#accountmanagement .CaptionVerticalRight,
#accountmanagement .CaptionBorderBottom,
#accountmanagement .CaptionEdgeLeftBottom,
#accountmanagement .CaptionEdgeRightBottom {
  background: none !important;
}

#accountmanagement .CaptionContainer {
  margin: 0;
  border-bottom: 1px solid var(--m-border);
}

#accountmanagement .CaptionInnerContainer,
#accountmanagement .CaptionContainer .Text {
  position: static !important;
  height: auto !important;
  line-height: normal !important;
}

#accountmanagement .CaptionContainer .Text {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m-muted);
}

#accountmanagement .InnerTableContainer,
#accountmanagement .TableContentContainer {
  width: 100%;
}

#accountmanagement .TableContent {
  border: none !important;
  background: transparent;
}

#accountmanagement .TableContent td,
#accountmanagement .TableContent th {
  border-color: var(--m-border) !important;
  color: var(--m-text);
}

#accountmanagement .TableContent th {
  background: rgba(15, 23, 42, 0.92) !important;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#accountmanagement .Odd td,
#accountmanagement .Even td {
  background: transparent !important;
}

#accountmanagement input[type="text"],
#accountmanagement input[type="password"],
#accountmanagement input[type="email"],
#accountmanagement input[type="number"],
#accountmanagement select,
#accountmanagement textarea {
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  background: rgba(2, 6, 23, 0.75);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-text);
  outline: none;
}

#accountmanagement input[type="text"]:focus,
#accountmanagement input[type="password"]:focus,
#accountmanagement input[type="email"]:focus,
#accountmanagement input[type="number"]:focus,
#accountmanagement select:focus,
#accountmanagement textarea:focus {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

#accountmanagement input[type="radio"],
#accountmanagement input[type="checkbox"] {
  accent-color: #10b981;
}

#accountmanagement .BigButton,
#accountmanagement .BigButtonGreen,
#accountmanagement .BigButtonRed {
  background: none !important;
  width: 100%;
  max-width: 280px;
}

#accountmanagement .BigButtonText {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--m-font);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.18s ease;
}

#accountmanagement .BigButton .BigButtonText,
#accountmanagement .BigButtonGreen .BigButtonText {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-color: rgba(16, 185, 129, 0.6);
}

#accountmanagement .BigButtonRed .BigButtonText {
  background: rgba(2, 6, 23, 0.6);
  color: var(--m-text);
  border-color: var(--m-border);
}

#accountmanagement .BigButton .BigButtonText:hover,
#accountmanagement .BigButtonGreen .BigButtonText:hover,
#accountmanagement .BigButtonRed .BigButtonText:hover {
  transform: translateY(-1px);
}

#accountmanagement .AccountStatusImage {
  max-width: 70px;
  height: auto;
}

#accountmanagement .m-account-status-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--m-border);
  background: rgba(2, 6, 23, 0.55);
  font-size: 1.05rem;
}

#accountmanagement .m-account-status-free {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
}

#accountmanagement .m-account-status-vip {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.5);
}

#accountmanagement .m-premium-feature-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  border-radius: 8px;
  border: 1px solid var(--m-border);
  background: rgba(2, 6, 23, 0.55);
  font-size: 0.9rem;
}

#accountmanagement .m-premium-feature-icon-blue {
  color: #38bdf8;
}

#accountmanagement .m-premium-feature-icon-violet {
  color: #a78bfa;
}

#accountmanagement .m-premium-feature-icon-gold {
  color: #facc15;
}

/* Character list modern actions/icons */
#accountmanagement .m-char-main {
  color: #facc15;
  margin-left: 6px;
  font-size: 0.85rem;
}

#accountmanagement .m-char-status {
  font-size: 0.9rem;
  margin-right: 6px;
  vertical-align: middle;
}

#accountmanagement .m-char-status-ok {
  color: #22c55e;
}

#accountmanagement .m-char-status-muted {
  color: #94a3b8;
}

#accountmanagement .m-char-status-danger {
  color: #ef4444;
}

#accountmanagement .m-char-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--m-border);
  background: rgba(2, 6, 23, 0.55);
  color: var(--m-text);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

#accountmanagement .m-char-action:hover {
  border-color: rgba(56, 189, 248, 0.55);
  color: #bae6fd;
}

#accountmanagement .m-char-action-delete {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}

#accountmanagement .m-char-action-delete:hover {
  border-color: rgba(239, 68, 68, 0.7);
  color: #fee2e2;
}

#accountmanagement .m-char-action-edit {
  border-color: rgba(56, 189, 248, 0.45);
}

#accountmanagement .m-char-action-restore {
  border-color: rgba(34, 197, 94, 0.45);
  color: #86efac;
}

#accountmanagement .green,
#accountmanagement .red,
#accountmanagement .yellow {
  color: #f8fafc !important;
}

/* General Informations as modern data cards */
#accountmanagement .m-am-general-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}

#accountmanagement .m-am-info-item {
  background: rgba(2, 6, 23, 0.48);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}

#accountmanagement .m-am-info-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--m-muted);
  margin-bottom: 8px;
  font-weight: 700;
}

#accountmanagement .m-am-info-value {
  color: var(--m-text);
  font-size: 0.9rem;
  line-height: 1.4;
  min-height: 24px;
  position: relative;
  padding-right: 40px;
}

#accountmanagement .m-am-info-value .pull-right,
#accountmanagement .m-am-info-value font[style*="float: right"] {
  float: none !important;
  position: static !important;
  right: auto !important;
  display: inline-flex;
  margin-left: 8px;
}

/* Fix legacy inline absolute styles for account/email masked text */
#accountmanagement #MaskedAccount2,
#accountmanagement #ReadableAccount2,
#accountmanagement #MaskedEmail,
#accountmanagement #ReadableEmail {
  position: static !important;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

/* Keep show/hide icons anchored in one fixed place */
#accountmanagement #showInfoAccount2,
#accountmanagement #btn_hiddenAccount2,
#accountmanagement #showInfoEmail,
#accountmanagement #btn_hiddenEmail {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  float: none !important;
  margin: 0 !important;
  line-height: 0;
}

#accountmanagement .am-toggle-icon {
  font-size: 1.05rem;
  color: var(--m-muted);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  padding: 6px;
  background: rgba(2, 6, 23, 0.55);
}

#accountmanagement #btn_hiddenAccount2:hover .am-toggle-icon,
#accountmanagement #showInfoAccount2:hover .am-toggle-icon,
#accountmanagement #btn_hiddenEmail:hover .am-toggle-icon,
#accountmanagement #showInfoEmail:hover .am-toggle-icon {
  color: #bae6fd;
  border-color: rgba(56, 189, 248, 0.55);
}

/* Account Management - legacy table cleanup and structured readability */
#accountmanagement table.Table3,
#accountmanagement table.Table4,
#accountmanagement table.Table5,
#accountmanagement table.TableContent {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
}

#accountmanagement .TableContent {
  border: 1px solid var(--m-border) !important;
  border-radius: 10px;
  overflow: hidden;
}

#accountmanagement .TableContent tr[bgcolor] td,
#accountmanagement .TableContent td[bgcolor],
#accountmanagement .TableContent th[style*="background-color"] {
  background: rgba(15, 23, 42, 0.9) !important;
  color: var(--m-text) !important;
}

#accountmanagement .TableContent tr + tr td {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
}

#accountmanagement .TableContent td {
  font-size: 0.88rem;
  line-height: 1.45;
  vertical-align: top;
}

#accountmanagement .TableContent td:first-child {
  color: var(--m-muted);
  font-weight: 600;
}

#accountmanagement .TableContent td > div[style*="float: right"],
#accountmanagement .TableContent td > form[style*="display: inline-block"] {
  float: none !important;
  display: inline-flex !important;
  margin: 6px 8px 0 0 !important;
}

#accountmanagement .TableContent a {
  color: #7dd3fc;
  text-decoration: none;
}

#accountmanagement .TableContent a:hover {
  color: #bae6fd;
  text-decoration: underline;
}

#accountmanagement .premiumbenefits {
  color: var(--m-text) !important;
}

#accountmanagement .premiumbenefits li,
#accountmanagement .premiumbenefits p {
  color: var(--m-muted);
}

@media (max-width: 991.98px) {
  #accountmanagement .TableContent,
  #accountmanagement .InnerTableContainer {
    overflow-x: auto;
  }

  #accountmanagement .TableContent td,
  #accountmanagement .TableContent th {
    min-width: 140px;
  }

  #accountmanagement .TableContent td:first-child {
    min-width: 160px;
  }

  #accountmanagement .BigButton,
  #accountmanagement .BigButtonGreen,
  #accountmanagement .BigButtonRed {
    max-width: 100%;
  }

  #accountmanagement .m-am-general-grid {
    grid-template-columns: 1fr;
  }
}


/* World Name table header (legacy inline th style override) */
#createaccount .TableContent thead th {
  background: rgba(15, 23, 42, 0.92) !important;
  color: #e2e8f0 !important;
  border: 1px solid var(--m-border) !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 12px !important;
}

#createaccount .TableContent thead th span {
  left: 0 !important;
  position: static !important;
}

/* Legacy Tickets (player + admin) */
#tickets .InnerTableContainer > table > tbody > tr > td {
  padding: 0 !important;
}

#tickets .TableContainer {
  border: 1px solid var(--m-border) !important;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92)) !important;
  overflow: hidden;
}

#tickets details.tk-acc {
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 10px !important;
  margin: 0 0 10px !important;
  background: rgba(15, 23, 42, 0.7) !important;
  box-shadow: none !important;
}

#tickets details.tk-acc > summary {
  padding: 10px 12px !important;
  background: rgba(30, 41, 59, 0.9) !important;
  color: #e2e8f0 !important;
  font-size: 0.9rem !important;
  text-shadow: none !important;
}

#tickets .tk-count {
  background: rgba(14, 165, 233, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #bae6fd !important;
  border-radius: 999px !important;
}

#tickets table.tk-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.6) !important;
}

#tickets table.tk-table tr.head {
  background: rgba(30, 41, 59, 0.95) !important;
}

#tickets table.tk-table tr.head td {
  color: #e2e8f0 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#tickets table.tk-table tr:nth-child(even),
#tickets table.tk-table tr:nth-child(odd) {
  background: transparent !important;
}

#tickets table.tk-table td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  color: #cbd5e1 !important;
  padding: 9px 10px !important;
}

#tickets table.tk-table tr:hover td {
  background: rgba(56, 189, 248, 0.08) !important;
}

#tickets .st-open,
#tickets .st-closed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
}

#tickets .st-open {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

#tickets .st-closed {
  background: rgba(244, 63, 94, 0.18);
  color: #fda4af !important;
  border: 1px solid rgba(244, 63, 94, 0.35);
}

#tickets a[href*="subtopic=tickets"] {
  color: #7dd3fc !important;
  text-decoration: none;
}

#tickets a[href*="subtopic=tickets"]:hover {
  color: #bae6fd !important;
  text-decoration: underline;
}

#tickets form[action*="subtopic=tickets"] label {
  display: block;
  color: #e2e8f0;
  font-size: 0.86rem;
  font-weight: 600;
}

#tickets form[action*="subtopic=tickets"] input[type="text"],
#tickets form[action*="subtopic=tickets"] textarea,
#tickets form[action*="subtopic=tickets"] select,
#tickets form[action*="subtopic=tickets"] input[type="file"] {
  width: 100% !important;
  margin-top: 6px;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  color: #e2e8f0 !important;
  padding: 9px 10px !important;
  box-shadow: none !important;
}

#tickets form[action*="subtopic=tickets"] textarea {
  min-height: 120px;
  resize: vertical;
}

#tickets form[action*="subtopic=tickets"] input[type="text"]:focus,
#tickets form[action*="subtopic=tickets"] textarea:focus,
#tickets form[action*="subtopic=tickets"] select:focus {
  border-color: rgba(56, 189, 248, 0.8) !important;
  outline: none !important;
}

#tickets .file-highlight {
  width: 100% !important;
  max-width: 420px;
  margin-top: 0 !important;
  background: rgba(15, 23, 42, 0.8) !important;
  color: #cbd5e1 !important;
  border: 1px dashed rgba(148, 163, 184, 0.45) !important;
  border-radius: 8px !important;
  transform: none !important;
}

#tickets .file-highlight:hover {
  border-color: rgba(56, 189, 248, 0.65) !important;
  background: rgba(30, 41, 59, 0.9) !important;
}

#tickets img[src*="/uploads/tickets/"] {
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
}

/* Ticket View – Meta card */
#tickets .tk-meta-card {
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  color: #cbd5e1;
  font-size: 0.86rem;
}

#tickets .tk-meta-card b {
  color: #e2e8f0;
}

#tickets .tk-meta-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Ticket View – First message */
#tickets .tk-first-message {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  color: #e2e8f0;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Ticket View – Attachment */
#tickets .tk-attachment {
  margin-top: 10px;
  margin-bottom: 14px;
}

#tickets .tk-attachment img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
}

/* Ticket View – Message bubbles */
#tickets .tk-msg {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  position: relative;
  word-break: break-word;
}

#tickets .tk-msg-user {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

#tickets .tk-msg-admin {
  background: rgba(56, 189, 248, 0.1) !important;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

#tickets .tk-msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

#tickets .tk-msg-sender {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#tickets .tk-sender-user {
  color: #94a3b8;
}

#tickets .tk-sender-admin {
  color: #38bdf8;
}

#tickets .tk-msg-body {
  color: #e2e8f0;
  font-size: 0.88rem;
  line-height: 1.6;
}

#tickets .tk-msg-time {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 8px;
}

#tickets .tk-msg-delete {
  color: #f87171 !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  opacity: 0.6;
  transition: opacity 0.15s;
}

#tickets .tk-msg-delete:hover {
  opacity: 1;
}

/* Ticket View – Closed notice */
#tickets .tk-closed-notice {
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fda4af;
  font-weight: 700;
  font-size: 0.86rem;
  text-align: center;
  margin-top: 10px;
}

@media (max-width: 767.98px) {
  #tickets .TableContainer {
    border-radius: 10px;
  }

  #tickets details.tk-acc > summary {
    font-size: 0.82rem !important;
    padding: 9px 10px !important;
  }

  #tickets table.tk-table td {
    font-size: 0.8rem !important;
    padding: 8px !important;
  }

  #tickets .tk-meta-row {
    flex-direction: column;
  }

  #tickets .tk-msg {
    padding: 10px 12px;
  }
}

/* ==========================================================
   MMORPG THEME ENHANCEMENTS — Dark Fantasy / Tibia
   ========================================================== */

:root {
  --m-gold:        #f59e0b;
  --m-gold-dim:    rgba(245, 158, 11, 0.12);
  --m-gold-border: rgba(245, 158, 11, 0.28);
  --m-rune:        #8b5cf6;
  --m-blood:       #ef4444;
}

/* ——— Hero ——— */
.m-hero {
  /* background-image set via Blade inline style using config('game.legacy_url') */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.m-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(2,6,23,.45) 0%,rgba(2,6,23,.72) 60%,rgba(2,6,23,.92) 100%);
  pointer-events: none;
  z-index: 0;
}

.m-hero .container-xl {
  position: relative;
  z-index: 1;
}

.m-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--m-cta);
}

.m-hero h1 {
  background: linear-gradient(130deg, #f8fafc 30%, #fcd34d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.m-btn-cta {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 20px rgba(16,185,129,0.3);
  transition: filter 0.18s, transform 0.18s, box-shadow 0.18s, color 0.18s;
}
.m-btn-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(16,185,129,0.45);
  color: #fff;
}

.m-hero-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--m-gold-border);
}

.m-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.m-hero-stat-value {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--m-gold);
  line-height: 1;
}

.m-hero-stat-label {
  font-size: 0.68rem;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
}

.m-hero-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--m-border);
  flex-shrink: 0;
}

.m-hero::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 32px;
  background: linear-gradient(90deg, transparent 0%, var(--m-gold) 50%, transparent 100%);
  opacity: 0.35;
}

/* ——— Pulse dot ——— */
@keyframes m-pulse-online {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); opacity: 1; }
  60%       { box-shadow: 0 0 0 5px rgba(16,185,129,0); opacity: .8; }
}

.m-online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--m-cta);
  flex-shrink: 0;
  animation: m-pulse-online 2.2s ease infinite;
}

/* ——— Widget Players Online ——— */
.m-card-online .m-card-h { border-bottom-color: rgba(16,185,129,.25); }

.m-online-widget { display: flex; align-items: center; gap: 16px; }

.m-online-count {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--m-cta);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.m-online-info { display: flex; flex-direction: column; gap: 3px; }
.m-online-label { font-size: .8rem; color: var(--m-text); font-weight: 500; }
.m-online-peak  { font-size: .73rem; color: var(--m-muted); }

/* ——— Boosted ——— */
.m-boosted img {
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(56,189,248,.4));
  transition: filter .3s, transform .25s;
}
.m-boosted-item a:hover img,
.m-boosted a:hover img {
  filter: drop-shadow(0 0 16px rgba(56,189,248,.85));
  transform: translateY(-3px) scale(1.05);
}
.m-boosted-item a { transition: transform .25s; }

.m-card-spotlight .m-card-h   { border-bottom-color: var(--m-gold-border); }
.m-card-spotlight .m-badge    { color:#fcd34d; background:var(--m-gold-dim); border-color:var(--m-gold-border); }

/* ——— Top table medals ——— */
.m-top-table tbody tr:nth-child(1) td:first-child { color:#f59e0b; font-weight:800; }
.m-top-table tbody tr:nth-child(2) td:first-child { color:#94a3b8; font-weight:700; }
.m-top-table tbody tr:nth-child(3) td:first-child { color:#c97d37; font-weight:700; }

/* ——— Sidebar links ——— */
.m-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--m-muted);
  text-decoration: none;
  font-size: .85rem;
  transition: background .15s, color .15s;
}
.m-sidebar-link:hover {
  background: rgba(255,255,255,.05);
  color: var(--m-text);
  text-decoration: none;
}
.m-sidebar-link-icon {
  width: 14px;
  text-align: center;
  color: var(--m-gold);
  font-size: .78rem;
  flex-shrink: 0;
}

/* ——— Responsive ——— */
@media (max-width: 575.98px) {
  .m-hero-stats { gap: 14px; }
  .m-hero-stat-value { font-size: 1.15rem; }
  .m-hero-stat-divider { height: 28px; }
  .m-online-count { font-size: 2.2rem; }
}