/*
  TopMuOnline production cleanup layer
  Loaded after legacy/page CSS to normalize desktop width, surfaces, and account/reward visuals.
  Keep future page-specific exceptions below this layer minimal and prefer the utility classes here.
*/
:root {
  --site-container-max: 1240px;
  --site-container-wide: 1360px;
  --site-gutter: clamp(14px, 2vw, 24px);

  --theme-ink: #0f172a;
  --theme-ink-soft: #334155;
  --theme-muted: #64748b;
  --theme-surface: rgba(255, 255, 255, .94);
  --theme-surface-strong: #fff;
  --theme-surface-subtle: #f8fafc;
  --theme-border: rgba(15, 23, 42, .12);
  --theme-border-strong: rgba(15, 23, 42, .18);
  --theme-gold: #f5c950;
  --theme-gold-strong: #f59e0b;
  --theme-blue: #2563eb;
  --theme-cyan: #06b6d4;
  --theme-danger: #dc2626;
  --theme-success: #16a34a;
  --theme-radius-sm: 12px;
  --theme-radius: 18px;
  --theme-radius-lg: 24px;
  --theme-shadow-card: 0 18px 48px rgba(15, 23, 42, .09), 0 2px 10px rgba(15, 23, 42, .04);
  --theme-shadow-soft: 0 12px 32px rgba(15, 23, 42, .07);
  --theme-focus: 0 0 0 3px rgba(37, 99, 235, .18), 0 0 0 6px rgba(6, 182, 212, .12);
}

body {
  color: var(--theme-ink);
}

.container,
main.container {
  max-width: var(--site-container-max);
}

@media (min-width: 769px) {
  .container,
  main.container {
    width: min(var(--site-container-max), calc(100% - (var(--site-gutter) * 2)));
  }
}

/* Universal layout helpers used by account/reward pages. */
.u-stack { display: grid !important; gap: 1rem !important; }
.u-flex { display: flex !important; align-items: center !important; }
.u-flex-wrap { display: flex !important; flex-wrap: wrap !important; }
.u-flex-end { justify-content: flex-end !important; }
.u-titlebar-actions { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.u-gap-sm { gap: .5rem !important; }
.u-gap-md { gap: 1rem !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-xs { margin-top: .35rem !important; }
.u-mt-sm { margin-top: .65rem !important; }
.u-mt-md { margin-top: 1rem !important; }
.u-mb-sm { margin-bottom: .85rem !important; }
.u-m-0 { margin: 0 !important; }
.u-full { width: 100% !important; max-width: 100% !important; }
.u-text-muted { color: var(--theme-muted) !important; }
.u-text-strong { color: var(--theme-ink) !important; }

/* Screen-reader-only utility used by responsive data tables. */
.u-sr-only,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.u-surface {
  background: var(--theme-surface-strong) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  box-shadow: var(--theme-shadow-soft) !important;
  color: var(--theme-ink) !important;
}

/* Prevent unreadable text inherited from legacy dark blocks. */
.account-main,
.account-main p,
.account-main li,
.account-main td,
.account-main th,
.account-main label,
.account-main small,
.account-main span {
  color: inherit;
}

.account-main {
  --acc-container-max: var(--site-container-max);
  --acc-container-dash: var(--site-container-max);
  --acc-panel-md: 100%;
  --acc-panel-lg: 100%;
  --acc-bg: var(--theme-surface-strong);
  --acc-bg-weak: var(--theme-surface-subtle);
  --acc-ink: var(--theme-ink);
  --acc-ink-soft: var(--theme-muted);
  --acc-accent: var(--theme-ink);
  --acc-border: var(--theme-border);
  --acc-gold: var(--theme-gold);
  --acc-shadow: var(--theme-shadow-card);
  --acc-radius: var(--theme-radius-lg);
}

.account-main,
.account-main.container,
.container.account-main,
main.account-main {
  width: min(var(--acc-container-max), calc(100% - (var(--site-gutter) * 2))) !important;
  max-width: var(--acc-container-max) !important;
  margin: 0 auto 32px !important;
  padding: clamp(18px, 2.7vw, 34px) 0 !important;
  color: var(--theme-ink) !important;
}

.account-main .account-section,
.account-main > .account-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: clamp(16px, 2vw, 24px) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius-lg) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(6, 182, 212, .08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94)) !important;
  color: var(--theme-ink) !important;
  box-shadow: var(--theme-shadow-card) !important;
}

.account-main .account-titlebar {
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 201, 80, .16), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96)) !important;
  box-shadow: var(--theme-shadow-soft) !important;
  color: var(--theme-ink) !important;
}

.account-main .account-title,
.account-main .account-titlebar .account-title,
.account-main .info-header h1,
.account-main .info-header h2 {
  color: var(--theme-ink) !important;
}

.account-main .account-subtitle,
.account-main .account-titlebar .account-subtitle,
.account-main .muted,
.account-main .hint {
  color: var(--theme-muted) !important;
}

.account-main .account-action-panel,
.account-main .account-action-stack,
.account-main .account-chars-box,
.account-main .account-info-box,
.account-main .card,
.account-main .glass-card,
.account-main .panel,
.account-main .reward-panel,
.account-main .reward-card,
.account-main .sp-box,
.account-main .sp-hero,
.account-main .sp-panel,
.account-main .acc-card {
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  background: var(--theme-surface-strong) !important;
  color: var(--theme-ink) !important;
  box-shadow: var(--theme-shadow-soft) !important;
}

.account-main .account-panel-flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
  gap: clamp(18px, 2vw, 24px) !important;
  align-items: start !important;
}

.account-main .account-info-col,
.account-main .account-action-col {
  min-width: 0 !important;
}

.account-main .account-points-modern {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.account-main .points-card {
  min-width: 0 !important;
  border-color: rgba(245, 201, 80, .34) !important;
  background: linear-gradient(135deg, #fffaf0, #fff) !important;
  color: var(--theme-ink) !important;
}

.account-main .points-card.wcoin,
.account-main .points-card.webgp {
  border-color: rgba(37, 99, 235, .20) !important;
  background: linear-gradient(135deg, #f8fbff, #fff) !important;
}

.account-main .point-label,
.account-main .points-card.wcoin .point-label,
.account-main .points-card.webgp .point-label {
  color: var(--theme-muted) !important;
}

.account-main .point-value,
.account-main .points-card.wcoin .point-value,
.account-main .points-card.webgp .point-value {
  color: var(--theme-ink) !important;
}

.account-main .realm-banner {
  max-width: 100% !important;
}

.account-main .realm-desc,
.account-main .server-note {
  background: linear-gradient(135deg, #fffaf0, #fff) !important;
  border-color: rgba(245, 201, 80, .35) !important;
  color: var(--theme-ink-soft) !important;
}

.account-main .realm-chip,
.account-main .status-pill,
.account-main .xp-chip,
.account-main .reward-pill,
.account-main .sp-pill {
  background: #fff !important;
  border: 1px solid var(--theme-border) !important;
  color: var(--theme-ink) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
}

.account-main .realm-chip.active,
.account-main .status-pill--online,
.account-main .xp-chip--hot,
.account-main .reward-pill--hot {
  background: linear-gradient(135deg, #fff4cc, #fff) !important;
  border-color: rgba(245, 201, 80, .48) !important;
  color: var(--theme-ink) !important;
}

/* Reward titlebars: use one website theme instead of page-specific purple/green/blue hero blocks. */
.account-main .account-titlebar.reward-hero,
.account-main .account-titlebar[class*="reward-hero--"],
.account-main .account-titlebar.account-titlebar--reward,
.account-main[data-page="invite"] .account-titlebar.reward-titlebar--invite,
.account-main[data-page="share"] .account-titlebar.reward-titlebar--share {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(245, 201, 80, .34) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(245, 201, 80, .24), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(6, 182, 212, .12), transparent 34%),
    linear-gradient(135deg, #fffaf0 0%, #ffffff 52%, #f8fbff 100%) !important;
  color: var(--theme-ink) !important;
  box-shadow: var(--theme-shadow-card) !important;
}

.account-main .account-titlebar.reward-hero .account-title,
.account-main .account-titlebar[class*="reward-hero--"] .account-title,
.account-main .account-titlebar.account-titlebar--reward .account-title,
.account-main .account-titlebar.reward-hero .account-subtitle,
.account-main .account-titlebar[class*="reward-hero--"] .account-subtitle,
.account-main .account-titlebar.account-titlebar--reward .account-subtitle,
.account-main .account-titlebar.reward-hero .reward-kicker,
.account-main .account-titlebar[class*="reward-hero--"] .reward-kicker,
.account-main .account-titlebar.account-titlebar--reward .reward-kicker {
  color: var(--theme-ink) !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.account-main .account-titlebar.reward-hero .account-subtitle,
.account-main .account-titlebar[class*="reward-hero--"] .account-subtitle,
.account-main .account-titlebar.account-titlebar--reward .account-subtitle {
  color: var(--theme-muted) !important;
  opacity: 1 !important;
}

.account-main .account-titlebar.reward-hero .xp-chip,
.account-main .account-titlebar[class*="reward-hero--"] .xp-chip,
.account-main .account-titlebar.account-titlebar--reward .xp-chip,
.account-main .account-titlebar.reward-hero .xp-chip .strong,
.account-main .account-titlebar[class*="reward-hero--"] .xp-chip .strong,
.account-main .account-titlebar.account-titlebar--reward .xp-chip .strong {
  color: var(--theme-ink) !important;
}

.account-main .account-titlebar.reward-hero .xp-chip,
.account-main .account-titlebar[class*="reward-hero--"] .xp-chip,
.account-main .account-titlebar.account-titlebar--reward .xp-chip {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(245, 201, 80, .34) !important;
  backdrop-filter: none !important;
}

.account-main .account-titlebar.reward-hero--has-ready,
.account-main .account-titlebar.account-titlebar--ready {
  border-color: rgba(245, 201, 80, .62) !important;
  box-shadow: 0 22px 60px rgba(245, 158, 11, .13), var(--theme-shadow-soft) !important;
}

/* Dashboard quick-action CTAs. */
.account-main[data-page="dashboard"] .dashboard-daily-btn,
.account-main[data-page="dashboard"] .dashboard-vp-system-btn {
  border: 1px solid rgba(245, 201, 80, .38) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(245, 201, 80, .18), transparent 32%),
    linear-gradient(135deg, #fffaf0, #ffffff 68%, #f8fbff) !important;
  color: var(--theme-ink) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

.account-main[data-page="dashboard"] .dashboard-vp-system-btn strong,
.account-main[data-page="dashboard"] .dashboard-vp-system-btn small,
.account-main[data-page="dashboard"] .dashboard-daily-btn strong,
.account-main[data-page="dashboard"] .dashboard-daily-btn small {
  color: var(--theme-ink) !important;
  opacity: 1 !important;
}

.account-main[data-page="dashboard"] .dashboard-vp-system-btn small,
.account-main[data-page="dashboard"] .dashboard-daily-btn small {
  color: var(--theme-muted) !important;
}

.account-main[data-page="dashboard"] .dashboard-daily-btn__icon,
.account-main[data-page="dashboard"] .dashboard-vp-system-btn .dashboard-daily-btn__icon {
  background: linear-gradient(135deg, var(--theme-gold), var(--theme-gold-strong)) !important;
  color: #111827 !important;
  box-shadow: 0 12px 24px rgba(245, 158, 11, .18) !important;
}

.account-main[data-page="dashboard"] .dashboard-daily-btn__badge,
.account-main[data-page="dashboard"] .dashboard-vp-system-btn__badge {
  background: #111827 !important;
  color: #fff !important;
  border: 0 !important;
}

.account-main .buy-gp-btn--special {
  margin-top: 10px !important;
  background: linear-gradient(135deg, #fffaf0, #ffffff) !important;
  border-color: rgba(245, 201, 80, .42) !important;
  color: var(--theme-ink) !important;
}

.account-main .buy-gp-btn--special i {
  color: var(--theme-gold-strong) !important;
}

/* Forms, alerts, tables: keep contrast predictable on light surfaces. */
.account-main input,
.account-main select,
.account-main textarea,
.account-main .share-input,
.account-main .invite-link-input {
  background-color: #fff !important;
  color: var(--theme-ink) !important;
  border-color: var(--theme-border-strong) !important;
}

.account-main input::placeholder,
.account-main textarea::placeholder {
  color: #94a3b8 !important;
}

.account-main input:focus,
.account-main select:focus,
.account-main textarea:focus,
.account-main .share-input:focus,
.account-main .invite-link-input:focus {
  outline: 0 !important;
  border-color: rgba(37, 99, 235, .45) !important;
  box-shadow: var(--theme-focus) !important;
}

.account-main table,
.account-main .table-wrap,
.account-main .char-table-wrap {
  color: var(--theme-ink) !important;
}

.account-main table th {
  color: var(--theme-ink) !important;
}

.account-main table td {
  color: var(--theme-ink-soft) !important;
}

.form-alert,
.account-main .form-alert,
.account-main .vote-notice {
  color: var(--theme-ink) !important;
  border: 1px solid var(--theme-border) !important;
  background: #fff !important;
}

.form-alert.error,
.account-main .form-alert.error,
.account-main .vote-notice--error {
  color: #991b1b !important;
  background: #fff5f5 !important;
  border-color: rgba(220, 38, 38, .24) !important;
}

.form-alert.success,
.account-main .form-alert.success,
.account-main .vote-notice--success {
  color: #166534 !important;
  background: #f0fdf4 !important;
  border-color: rgba(22, 163, 74, .22) !important;
}

.form-alert.warning,
.account-main .form-alert.warning,
.account-main .vote-notice--warn {
  color: #92400e !important;
  background: #fffbeb !important;
  border-color: rgba(245, 158, 11, .28) !important;
}

footer .footer-note {
  margin-top: 6px;
  color: rgba(226, 232, 240, .72);
  font-size: .9em;
}

@media (max-width: 1180px) {
  .account-main .account-panel-flex {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 860px) {
  .account-main,
  .account-main.container,
  .container.account-main,
  main.account-main {
    width: min(100% - 24px, var(--acc-container-max)) !important;
  }

  .account-main .account-points-modern,
  .reward-grid--wallet,
  .reward-earn-grid--buttons,
  .daily-fast-actions,
  .share-status-strip {
    grid-template-columns: 1fr !important;
  }

  .u-titlebar-actions,
  .account-main .account-titlebar__right,
  .daily-hero-chips {
    justify-content: flex-start !important;
  }
}

/* Daily rewards uses the wider site container because it is a dashboard overview, not a small form. */
.account-main[data-page="daily-rewards"] {
  --acc-container-max: var(--site-container-wide);
}

/* Keep account desktop width consistent even when legacy reward pages declare wider sections. */
.account-main[data-page] > .account-section,
.account-main[data-page] .account-section {
  max-width: 100% !important;
}

.account-main[data-page="daily-rewards"] .account-section {
  max-width: 100% !important;
}

.account-main[data-page="vote-points-system"] .account-section,
.account-main[data-page="vip-vote-shop"] .account-section,
.account-main[data-page="share"] .account-section,
.account-main[data-page="invite"] .account-section,
.account-main[data-page="dashboard"] .account-section {
  max-width: 100% !important;
}

.account-main .white-box,
.account-main .content-box,
.account-main .module-box,
.account-main .settings-box {
  background: var(--theme-surface-strong) !important;
  color: var(--theme-ink) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: var(--theme-radius) !important;
  box-shadow: var(--theme-shadow-soft) !important;
}

.account-main .white-box h1,
.account-main .white-box h2,
.account-main .white-box h3,
.account-main .content-box h1,
.account-main .content-box h2,
.account-main .content-box h3 {
  color: var(--theme-ink) !important;
}

/* Production cleanup v6: reusable responsive table wrapper. */
.account-table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--theme-border);
  border-radius:var(--theme-radius);
  background:var(--theme-surface-strong);
  box-shadow:var(--theme-shadow-soft);
}
.account-table-scroll table{
  margin:0;
  border-collapse:separate;
  border-spacing:0;
}
.account-table-scroll th,
.account-table-scroll td{
  white-space:nowrap;
}
.account-table-scroll td code{
  white-space:nowrap;
}
/* Daily Rewards v8: use the wider account canvas with no inner max-width clamp. */
.account-main[data-page="daily-rewards"] {
  --acc-container-max: var(--site-container-wide);
  max-width: var(--site-container-wide) !important;
}
.account-main[data-page="daily-rewards"] .account-section {
  max-width: 100% !important;
}