/* Misfit Galaxy shared UI system
   This file is intentionally broad: it normalizes the visual language across
   older pages that accumulated page-specific styles over time. */

:root {
  color-scheme: dark;
  --mg-bg: #05070c;
  --mg-bg-2: #090d14;
  --mg-panel: rgba(9, 13, 21, 0.9);
  --mg-panel-strong: rgba(13, 18, 28, 0.96);
  --mg-panel-soft: rgba(18, 25, 37, 0.78);
  --mg-page-max: 1800px;
  --mg-page-gutter: 24px;
  --mg-line: rgba(255, 138, 61, 0.24);
  --mg-line-strong: rgba(255, 142, 66, 0.48);
  --mg-text: #eef4ff;
  --mg-muted: #9aa8bd;
  --mg-dim: #657287;
  --mg-ember: #ff8a3d;
  --mg-ember-2: #ffb35f;
  --mg-cyan: #c084fc;
  --mg-gold: #f5c84b;
  --mg-green: #75e7a8;
  --mg-red: #ff6275;
  --mg-violet: #c084fc;
  --hud-orange: var(--mg-ember);
  --hud-cyan: var(--mg-ember);
  --hud-blue: var(--mg-violet);
  --hud-purple: var(--mg-violet);
  --color-primary: var(--mg-ember);
  --color-orange: var(--mg-ember);
  --color-blue: var(--mg-violet);
  --color-cyan: var(--mg-ember);
  --color-purple: var(--mg-violet);
  --border-orange: rgba(255, 138, 61, 0.36);
  --border-blue: rgba(157, 78, 221, 0.42);
  --mg-radius: 8px;
  --mg-font-display: "Orbitron", "Rajdhani", system-ui, sans-serif;
  --mg-font-body: "Inter", "Rajdhani", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mg-font-mono: "Share Tech Mono", "SFMono-Regular", Consolas, monospace;
  --mg-space-background: url('/images/misfit-galaxy-background.png');
  --mg-shadow: 0 20px 70px rgba(0, 0, 0, 0.48);
  --mg-shadow-hover: 0 24px 90px rgba(0, 0, 0, 0.64), 0 0 34px rgba(157, 78, 221, 0.08);
  --mg-ease: cubic-bezier(.2, .8, .2, 1);
}

body.mg-customer-page {
  --mg-page-max: 1800px;
  --mg-customer-page-max: 1800px;
}

body.mg-admin-page {
  --mg-page-max: 1840px;
  --mg-customer-page-max: 1840px;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--mg-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--mg-text);
  font-family: var(--mg-font-body);
  letter-spacing: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, .78), rgba(5, 7, 12, .93) 48%, #05070c 100%),
    linear-gradient(115deg, rgba(255, 138, 61, .10), transparent 34%, rgba(157, 78, 221, .10) 72%, transparent),
    var(--mg-space-background) center center / cover fixed;
}

html,
body {
  view-transition-name: none !important;
}

::view-transition,
::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  mix-blend-mode: normal !important;
}

body.mg-app-page :where(
  .page-transition,
  .page-transition-overlay,
  .route-transition,
  .route-transition-overlay,
  .screen-transition,
  .screen-transition-overlay,
  .transition-overlay,
  .transition-panel,
  .wipe-overlay,
  .wipe-panel,
  .curtain,
  .curtain-panel
) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 138, 61, .09), transparent 20%, transparent 80%, rgba(157, 78, 221, .06));
  mix-blend-mode: screen;
  opacity: .48;
}

a {
  color: var(--mg-cyan);
  text-decoration: none;
}

a:hover { color: var(--mg-ember-2); }

img { max-width: 100%; }

::selection {
  color: #05070c;
  background: var(--mg-cyan);
}

.container,
.dashboard-container,
.marketplace-container,
.marketplace-shell,
.marketplace-title-header,
.marketplace-content,
.dashboard-content,
.page-title-header,
.tokens-title-header,
.guild-title-header,
.archive-title-header,
.leaderboard-title-header,
.mw-title-header,
.migration-title-header,
.guide-title-header,
.ot-title-header,
.ship-title-header,
.port-title-header,
.smcw-title-header,
.pnl-header,
.ops-header,
.instructions-header,
.twitch-hero,
.studio-header,
.wallet-shell,
.history-shell,
.crafting-shell,
.crafting-container,
.crafting-main,
.engineering-shell,
.engineering-hero,
.engineering-panel,
.clone-stats-container,
.history-container,
.leaderboard-container,
.ot-container,
.settings-container,
.twitch-container,
.guilds-container,
.avatar-studio-container,
.avatar-creator-container,
.avatar-order-container,
.exchange-container,
.arbitrage-container,
.guide-container,
.station-container,
.outpost-container,
.supply-container,
.migration-container,
.nft-migration-container,
.studio-container,
.page-container,
.main-container,
.app-container,
.sw-full-inv-content,
#sw-app .sw-screen,
.content,
body.mg-app-page > section,
body.mg-app-page > article,
main {
  width: min(var(--mg-page-max), calc(100% - (var(--mg-page-gutter) * 2)));
  max-width: var(--mg-page-max);
  margin-left: auto;
  margin-right: auto;
}

body.mg-app-page > :where(div, main, section, article):not(.stars):not(.dev-banner):not(.dev-banner-spacer):not(.mg-dev-ribbon):not(.mg-dev-ribbon-spacer):not(.mg-legacy-logo-block):not(.customer-nav-header):not([data-customer-nav]):not(#nav-placeholder):not(.modal):not(.modal-overlay):not(.modal-backdrop):not(.overlay):not(.mg-toast-stack):not(.mg-hud-dialog-overlay):not(.mg-celebration-overlay) {
  width: min(var(--mg-page-max), calc(100% - (var(--mg-page-gutter) * 2)));
  max-width: var(--mg-page-max);
  margin-left: auto;
  margin-right: auto;
}

body.mg-app-page .mg-page-shell :where(
  .history-container,
  .twitch-container,
  .engineering-grid,
  .engineering-actions,
  .summary-grid,
  .stats-grid,
  .section-grid,
  .quick-nav,
  .guide-nav-bar,
  .filters-container,
  .logs-container,
  .admin-header,
  .section-content,
  .tab-content,
  .phase-content,
  .kpi-grid,
  .review-grid,
  .concepts-grid,
  .character-grid,
  .orders-grid,
  .avatar-grid,
  .order-details-grid,
  .pricing-grid,
  .info-grid,
  .exchange-grid,
  .best-trades-grid,
  .modifiers-grid,
  .resource-grid,
  .scores-grid,
  .stations-grid,
  .goods-list,
  .chart-container,
  .chart-wrapper,
  .log-table-container,
  .contracts-table-wrapper,
  .player-table-container,
  .guild-table-wrapper,
  .pnl-table-wrapper,
  .orders-container,
  .stats-container,
  .logos-grid,
  .admin-tabs,
  .tabs,
  .tab-nav,
  .tabs-container,
  .phase-tabs,
  .admin-nav,
  .nav-actions,
  .controls,
  .filter-row,
  .filters,
  .search-bar,
  .model-viewer-container,
  .concept-image-container,
  .dashboard-grid,
  .content-grid,
  .stat-grid,
  .cards-grid,
  .order-form-grid
) {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

body.mg-app-page :where(.summary-grid, .stats-grid, .kpi-grid, .stat-grid, .cards-grid, .review-grid, .concepts-grid, .character-grid, .orders-grid, .avatar-grid, .logos-grid, .resource-grid, .scores-grid, .stations-grid, .pricing-grid, .info-grid, .order-details-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
  align-items: stretch;
}

body.mg-app-page :where(.section-grid, .content-grid, .dashboard-grid, .exchange-grid, .best-trades-grid, .modifiers-grid, .goods-list) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  align-items: stretch;
}

body.mg-app-page .marketplace-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(280px, 340px);
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: none;
}

body.mg-app-page .marketplace-asset-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-height: none;
  overflow: visible;
  min-width: 0;
}

body.mg-app-page .marketplace-grid .catalog-filter-panel,
body.mg-app-page .marketplace-grid .trade-side-panel {
  position: sticky;
  top: clamp(84px, 12vh, 132px);
  align-self: start;
  max-height: calc(100vh - clamp(104px, 14vh, 152px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 138, 61, .55) rgba(255, 255, 255, .05);
}

@media (max-width: 1400px) and (min-width: 1101px) {
  body.mg-app-page .marketplace-grid {
    grid-template-columns: minmax(210px, 260px) minmax(360px, 1fr) minmax(260px, 320px);
    gap: 12px;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  body.mg-app-page .marketplace-grid {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  }

  body.mg-app-page .marketplace-grid .trade-side-panel {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.page-title,
.section-title,
h1, h2, h3 {
  font-family: var(--mg-font-display);
  letter-spacing: .04em;
}

.page-title,
h1 {
  color: var(--mg-text);
  text-shadow: 0 0 28px rgba(255, 138, 61, .16);
}

.panel,
.card,
.dashboard-card,
.stat-card,
.wallet-card,
.asset-card,
.market-card,
.resource-card,
.clone-card,
.trade-card,
.summary-card,
.link-card,
.info-card,
.pricing-info,
.market-stats,
.reward-card,
.session-card,
.kpi-card,
.review-card,
.daemon-panel,
.exchange-panel,
.price-card,
.best-trade-card,
.week-card,
.modifier-card,
.score-card,
.station-card,
.good-item,
.detail-card,
.model-info-panel,
.active-contract-card,
.chart-container,
.chart-wrapper,
.log-table-container,
.contracts-table-wrapper,
.player-table-container,
.guild-table-wrapper,
.pnl-table-wrapper,
.orders-container,
.stats-container,
.filters-container,
.logos-grid,
.admin-tabs,
.tabs,
.tab-nav,
.tabs-container,
.phase-tabs,
.admin-nav,
.nav-actions,
.controls,
.filter-row,
.filters,
.search-bar,
.concept-image-container,
.model-viewer-container,
.trait-card,
.module-card,
.token-card,
.nft-card,
.catalog-card,
.earnings-card,
.balance-card,
.live-session-card,
.pricing-item,
.info-item,
.trading-panel,
.selected-asset-panel,
.catalog-filter-panel,
.trade-side-panel,
.admin-card,
.history-card,
.settings-card,
.modal-dialog,
.modal-content {
  position: relative;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
    var(--mg-panel);
  box-shadow: var(--mg-shadow);
  overflow: hidden;
}

.marketplace-header:not(.customer-nav-header):has(.nav-dropdown),
.header:not(.customer-nav-header):has(.nav-dropdown),
.guilds-header:has(.nav-dropdown),
.pnl-header:has(.nav-dropdown),
.nav-container:not(.customer-nav-header):has(.nav-dropdown),
body.mg-app-page .marketplace-header:not(.customer-nav-header):has(.nav-dropdown),
body.mg-app-page .header:not(.customer-nav-header):has(.nav-dropdown),
body.mg-app-page .guilds-header:has(.nav-dropdown),
body.mg-app-page .pnl-header:has(.nav-dropdown),
body.mg-app-page .nav-container:has(.nav-dropdown) {
  display: none !important;
}

body.mg-app-page {
  --accent-color: var(--mg-ember);
  --accent-primary: var(--mg-ember);
  --accent-secondary: var(--mg-violet);
  --primary-orange: var(--mg-ember);
  --primary-purple: var(--mg-violet);
  --primary-blue: var(--mg-violet);
  --primary-cyan: var(--mg-ember);
  --accent-blue: var(--mg-violet);
  --accent-cyan: var(--mg-ember);
  --hud-cyan: var(--mg-ember);
  --hud-blue: var(--mg-violet);
  --color-blue: var(--mg-violet);
  --color-cyan: var(--mg-ember);
  max-width: none !important;
}

body.mg-app-page :where(.admin-tabs, .tabs, .tab-nav, .tabs-container, .phase-tabs, .admin-nav, .nav-actions, .controls, .filter-row, .filters, .search-bar, .nav-container:not(.customer-nav-header)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid rgba(255, 138, 61, .18);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 138, 61, .08), rgba(157, 78, 221, .055)),
    rgba(6, 10, 17, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  padding: 10px;
}

body.mg-app-page :where(.admin-tabs, .tabs, .tab-nav, .tabs-container, .phase-tabs, .admin-nav, .nav-actions, .controls, .filter-row, .filters, .search-bar, .nav-container:not(.customer-nav-header)) :where(a, button, .admin-tab, .tab-btn, .phase-tab) {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 138, 61, .24);
  border-radius: 8px;
  background: rgba(9, 13, 21, .78);
  color: #cbd6e8;
  font-family: var(--mg-font-display);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .05em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .16s var(--mg-ease), border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}

body.mg-app-page :where(.admin-tabs, .tabs, .tab-nav, .tabs-container, .phase-tabs, .admin-nav, .nav-actions, .controls, .filter-row, .filters, .search-bar, .nav-container:not(.customer-nav-header)) :where(a, button, .admin-tab, .tab-btn, .phase-tab):hover,
body.mg-app-page :where(.admin-tabs, .tabs, .tab-nav, .tabs-container, .phase-tabs, .admin-nav, .nav-actions, .controls, .filter-row, .filters, .search-bar, .nav-container:not(.customer-nav-header)) :where(.active, [aria-selected="true"]) {
  transform: translateY(-1px);
  border-color: rgba(255, 138, 61, .58);
  background: linear-gradient(135deg, rgba(255, 138, 61, .18), rgba(157, 78, 221, .12));
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28), 0 0 22px rgba(255, 138, 61, .12);
}

.marketplace-hero,
.marketplace-title-header,
.wallet-hero,
.history-hero,
.engineering-hero,
.page-title-header,
.tokens-title-header,
.guild-title-header,
.archive-title-header,
.leaderboard-title-header,
.mw-title-header,
.migration-title-header,
.guide-title-header,
.ot-title-header,
.ship-title-header,
.port-title-header,
.smcw-title-header,
.pnl-header,
.ops-header,
.instructions-header,
.twitch-hero,
.studio-header,
.admin-header,
.page-header,
.dashboard-header,
.profile-card,
.player-info,
.station-selector-container,
.guild-header,
.leaderboard-header {
  position: relative;
  border: 1px solid rgba(255, 138, 61, .34);
  border-radius: 10px;
  background:
    linear-gradient(112deg, rgba(5, 7, 12, .92) 0%, rgba(5, 7, 12, .78) 50%, rgba(5, 7, 12, .45) 100%),
    radial-gradient(circle at 16% 12%, rgba(255, 138, 61, .22), transparent 38%),
    radial-gradient(circle at 84% 22%, rgba(157, 78, 221, .18), transparent 42%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 44px rgba(255, 138, 61, .13);
  overflow: hidden;
}

.panel::before,
.card::before,
.dashboard-card::before,
.wallet-card::before,
.asset-card::before,
.market-card::before,
.resource-card::before,
.clone-card::before,
.trade-card::before,
.summary-card::before,
.link-card::before,
.info-card::before,
.reward-card::before,
.session-card::before,
.kpi-card::before,
.review-card::before,
.daemon-panel::before,
.exchange-panel::before,
.price-card::before,
.best-trade-card::before,
.week-card::before,
.modifier-card::before,
.score-card::before,
.station-card::before,
.good-item::before,
.detail-card::before,
.model-info-panel::before,
.active-contract-card::before,
.chart-container::before,
.log-table-container::before,
.contracts-table-wrapper::before,
.player-table-container::before,
.guild-table-wrapper::before,
.pnl-table-wrapper::before,
.orders-container::before,
.stats-container::before,
.filters-container::before,
.admin-tabs::before,
.tabs::before,
.tabs-container::before,
.admin-nav::before,
.concept-image-container::before,
.model-viewer-container::before,
.trait-card::before,
.module-card::before,
.token-card::before,
.nft-card::before,
.catalog-card::before,
.earnings-card::before,
.balance-card::before,
.live-session-card::before,
.pricing-item::before,
.info-item::before,
.admin-card::before,
.history-card::before,
.settings-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 61, .62), rgba(157, 78, 221, .48), transparent);
  opacity: .72;
  pointer-events: none;
}

.card,
.dashboard-card,
.wallet-card,
.asset-card,
.market-card,
.resource-card,
.clone-card,
.trade-card,
.summary-card,
.link-card,
.info-card,
.reward-card,
.session-card,
.kpi-card,
.review-card,
.daemon-panel,
.exchange-panel,
.price-card,
.best-trade-card,
.week-card,
.modifier-card,
.score-card,
.station-card,
.good-item,
.detail-card,
.model-info-panel,
.active-contract-card,
.admin-card,
.history-card,
.settings-card {
  transition: transform .2s var(--mg-ease), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.card:hover,
.dashboard-card:hover,
.wallet-card:hover,
.asset-card:hover,
.market-card:hover,
.resource-card:hover,
.clone-card:hover,
.trade-card:hover,
.summary-card:hover,
.link-card:hover,
.info-card:hover,
.reward-card:hover,
.session-card:hover,
.kpi-card:hover,
.review-card:hover,
.daemon-panel:hover,
.exchange-panel:hover,
.price-card:hover,
.best-trade-card:hover,
.week-card:hover,
.modifier-card:hover,
.score-card:hover,
.station-card:hover,
.good-item:hover,
.detail-card:hover,
.model-info-panel:hover,
.active-contract-card:hover,
.chart-container:hover,
.log-table-container:hover,
.contracts-table-wrapper:hover,
.player-table-container:hover,
.guild-table-wrapper:hover,
.pnl-table-wrapper:hover,
.orders-container:hover,
.stats-container:hover,
.filters-container:hover,
.concept-image-container:hover,
.model-viewer-container:hover,
.trait-card:hover,
.module-card:hover,
.token-card:hover,
.nft-card:hover,
.catalog-card:hover,
.earnings-card:hover,
.balance-card:hover,
.live-session-card:hover,
.pricing-item:hover,
.info-item:hover,
.admin-card:hover,
.history-card:hover,
.settings-card:hover {
  transform: translateY(-3px);
  border-color: var(--mg-line-strong);
  box-shadow: var(--mg-shadow-hover);
}

button,
.btn,
.button,
.nav-btn,
.wallet-btn,
.action-btn,
.admin-btn,
.market-btn,
.station-go-btn,
.tab-btn,
.save-btn,
.primary-btn,
.secondary-btn,
input[type="button"],
input[type="submit"] {
  border: 1px solid rgba(255, 138, 61, .36);
  border-radius: var(--mg-radius);
  background: linear-gradient(180deg, rgba(255, 138, 61, .16), rgba(255, 138, 61, .07));
  color: var(--mg-text);
  font-family: var(--mg-font-display);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 0, 0, .24);
  transition: transform .16s var(--mg-ease), border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled),
.button:hover:not(:disabled),
.wallet-btn:hover:not(:disabled),
.action-btn:hover:not(:disabled),
.admin-btn:hover:not(:disabled),
.market-btn:hover:not(:disabled),
.station-go-btn:hover:not(:disabled),
.tab-btn:hover:not(:disabled),
.save-btn:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.secondary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(157, 78, 221, .58);
  color: #ffffff;
  background: linear-gradient(180deg, rgba(157, 78, 221, .15), rgba(255, 138, 61, .12));
  box-shadow: 0 0 0 1px rgba(157, 78, 221, .1), 0 16px 36px rgba(0, 0, 0, .38), 0 0 28px rgba(255, 138, 61, .12);
}

button:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: translateY(0);
}

button:disabled,
.btn:disabled,
.button:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: grayscale(.4);
}

.btn-primary,
.primary-btn,
.admin-btn-success,
.save-btn {
  border-color: rgba(255, 138, 61, .54);
  background: linear-gradient(180deg, rgba(255, 138, 61, .24), rgba(157, 78, 221, .12));
}

.btn-danger,
.danger,
.delete-btn {
  border-color: rgba(255, 98, 117, .54);
  background: linear-gradient(180deg, rgba(255, 98, 117, .22), rgba(255, 98, 117, .08));
}

input,
select,
textarea,
.form-control,
.search-input {
  border: 1px solid rgba(255, 138, 61, .26);
  border-radius: var(--mg-radius);
  background: rgba(5, 8, 14, .72);
  color: var(--mg-text);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.search-input:focus {
  border-color: rgba(157, 78, 221, .72);
  background: rgba(7, 13, 21, .92);
  box-shadow: 0 0 0 3px rgba(157, 78, 221, .12), 0 0 28px rgba(157, 78, 221, .12);
}

body.mg-app-page input[type="checkbox"],
body.mg-app-page input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0 8px 0 0;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  border: 1px solid rgba(255, 138, 61, .42);
  border-radius: 5px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
    rgba(4, 8, 15, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 18px rgba(255, 138, 61, .06);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s var(--mg-ease);
}

body.mg-app-page input[type="radio"] {
  border-radius: 50%;
}

body.mg-app-page input[type="checkbox"]:hover,
body.mg-app-page input[type="radio"]:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 138, 61, .74);
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .08), 0 0 22px rgba(157, 78, 221, .1);
}

body.mg-app-page input[type="checkbox"]:checked,
body.mg-app-page input[type="radio"]:checked {
  border-color: rgba(255, 138, 61, .9);
  background:
    radial-gradient(circle at center, rgba(255, 179, 95, .95) 0 28%, transparent 31%),
    linear-gradient(135deg, rgba(255, 138, 61, .34), rgba(157, 78, 221, .2)),
    rgba(5, 8, 14, .94);
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .1), 0 0 24px rgba(255, 138, 61, .16);
}

body.mg-app-page input[type="checkbox"]:checked {
  background:
    linear-gradient(135deg, rgba(255, 138, 61, .92), rgba(157, 78, 221, .68)),
    rgba(5, 8, 14, .94);
}

body.mg-app-page input[type="checkbox"]:checked::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translateY(-1px);
}

body.mg-app-page input[type="checkbox"]:focus-visible,
body.mg-app-page input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(157, 78, 221, .22), 0 0 26px rgba(255, 138, 61, .14);
}

body.mg-app-page input[type="range"] {
  appearance: none;
  width: 100%;
  min-height: 24px;
  border: 0 !important;
  background: transparent;
  box-shadow: none !important;
  cursor: pointer;
}

body.mg-app-page input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid rgba(255, 138, 61, .28);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 138, 61, .44), rgba(157, 78, 221, .36)),
    rgba(4, 8, 15, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 22px rgba(255, 138, 61, .08);
}

body.mg-app-page input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 1px solid rgba(255, 179, 95, .95);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #ffb35f 36%, #9d4edd 100%);
  box-shadow: 0 0 18px rgba(255, 138, 61, .32), 0 0 26px rgba(157, 78, 221, .18);
}

body.mg-app-page input[type="range"]::-moz-range-track {
  height: 8px;
  border: 1px solid rgba(255, 138, 61, .28);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 138, 61, .44), rgba(157, 78, 221, .36)), rgba(4, 8, 15, .86);
}

body.mg-app-page input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 179, 95, .95);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #ffb35f 36%, #9d4edd 100%);
  box-shadow: 0 0 18px rgba(255, 138, 61, .32), 0 0 26px rgba(157, 78, 221, .18);
}

body.mg-app-page input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px dashed rgba(255, 138, 61, .42);
  border-radius: var(--mg-radius);
  background:
    linear-gradient(135deg, rgba(255, 138, 61, .08), rgba(157, 78, 221, .07)),
    rgba(4, 8, 15, .82);
  color: var(--mg-muted);
  font-family: var(--mg-font-mono);
  font-size: 12px;
}

body.mg-app-page input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  border: 1px solid rgba(255, 138, 61, .42);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255, 138, 61, .24), rgba(157, 78, 221, .14));
  color: #ffffff;
  font-family: var(--mg-font-display);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

body.mg-app-page :where(progress, .progress, .progress-bar, .spec-progress-bar, .treasury-upgrade-bar) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 138, 61, .28) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(255, 138, 61, .1), rgba(157, 78, 221, .08)),
    rgba(4, 8, 15, .82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 20px rgba(255, 138, 61, .08) !important;
}

body.mg-app-page progress {
  width: 100%;
  height: 12px;
  appearance: none;
  border-radius: 999px !important;
  overflow: hidden !important;
}

body.mg-app-page progress::-webkit-progress-bar {
  background: transparent;
}

body.mg-app-page progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mg-ember), var(--mg-violet));
  box-shadow: 0 0 18px rgba(255, 138, 61, .28);
}

body.mg-app-page progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mg-ember), var(--mg-violet));
  box-shadow: 0 0 18px rgba(255, 138, 61, .28);
}

table,
.data-table,
.order-table,
.orders-table,
.player-table,
.airdrop-table,
.contracts-table,
.history-table,
.guild-table,
.log-table,
.leaderboard-table,
.pnl-table,
.sink-table,
.cost-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 138, 61, .18);
  border-radius: 10px;
  color: var(--mg-text);
  background:
    linear-gradient(145deg, rgba(255, 138, 61, .055), rgba(157, 78, 221, .04)),
    rgba(3, 6, 12, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 18px 54px rgba(0, 0, 0, .34);
}

thead,
.table-header {
  background:
    linear-gradient(90deg, rgba(255, 138, 61, .2), rgba(157, 78, 221, .13)),
    rgba(7, 10, 17, .94);
  color: var(--mg-ember-2);
  font-family: var(--mg-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 138, 61, .11);
  color: var(--mg-text);
  line-height: 1.35;
  vertical-align: middle;
}

th {
  border-bottom-color: rgba(255, 138, 61, .3);
  color: var(--mg-ember-2);
  font-family: var(--mg-font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  color: #bfcbda;
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .012);
}

tbody tr {
  transition: transform .16s var(--mg-ease), background .16s ease, box-shadow .16s ease;
}

tbody tr:hover {
  transform: translateX(2px);
  background: linear-gradient(90deg, rgba(255, 138, 61, .11), rgba(157, 78, 221, .07));
  box-shadow: inset 3px 0 0 rgba(255, 138, 61, .72), inset 0 1px 0 rgba(255, 255, 255, .035);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.table-responsive,
.table-wrapper,
.mg-table-scroll,
.sink-table-wrap,
.orders-table-wrapper,
.history-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

body.mg-app-page :where(td, th) :where(a, button) {
  white-space: nowrap;
}

.badge,
.tag,
.status-badge,
.cat-badge,
.rarity-badge {
  border: 1px solid rgba(157, 78, 221, .28);
  border-radius: 5px;
  background: rgba(255, 255, 255, .055);
  color: var(--mg-muted);
  font-family: var(--mg-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.mg-app-page :where(.blue, .cyan, .teal, .text-blue, .text-cyan, .text-teal, .border-blue, .border-cyan, .border-teal) {
  color: var(--mg-violet) !important;
  border-color: rgba(157, 78, 221, .5) !important;
}

body.mg-app-page :where(.bg-blue, .bg-cyan, .bg-teal) {
  background: linear-gradient(135deg, rgba(255, 138, 61, .18), rgba(157, 78, 221, .18)) !important;
}

body.mg-app-page .mg-dev-ribbon,
body.mg-app-page .dev-banner {
  position: relative !important;
  inset: auto !important;
  z-index: 520 !important;
  width: min(var(--mg-page-max), calc(100% - (var(--mg-page-gutter) * 2))) !important;
  min-height: 30px !important;
  margin: 18px auto 28px !important;
  padding: 9px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 138, 61, .32) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(90deg, rgba(255, 138, 61, .14), rgba(157, 78, 221, .1)),
    rgba(7, 10, 17, .9) !important;
  color: var(--mg-ember-2) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 24px rgba(255, 138, 61, .1) !important;
  font-family: var(--mg-font-mono) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  transform: none !important;
  opacity: 1 !important;
  clear: both !important;
  flex: 0 0 auto !important;
}

body.mg-app-page .mg-dev-ribbon::before,
body.mg-app-page .dev-banner::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--mg-ember-2);
  box-shadow: 0 0 18px rgba(255, 179, 95, .58);
  flex: 0 0 8px;
}

body.mg-app-page .mg-dev-ribbon-spacer,
body.mg-app-page .dev-banner-spacer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.mg-app-page .mg-legacy-logo-block,
body.mg-app-page .mg-page-shell > div:has(> img[src*="images/logo.png"]),
body.mg-app-page .mg-page-shell > div:has(> img[src*="/images/logo.png"]),
body.mg-app-page .container > div[style*="text-align: center"]:has(> img[src*="images/logo.png"]),
body.mg-app-page .container > div[style*="text-align:center"]:has(> img[src*="images/logo.png"]) {
  display: none !important;
}

body.mg-app-page .empty-state,
body.mg-app-page .loading-state,
body.mg-app-page .sw-empty-state,
body.mg-app-page .no-data,
body.mg-app-page .loading-spinner:not(.mg-preserve-spinner) {
  position: relative;
  min-height: 92px;
  padding: 22px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed rgba(255, 138, 61, .36);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 138, 61, .08), rgba(157, 78, 221, .07)),
    rgba(5, 8, 14, .78);
  color: var(--mg-muted);
  font-family: var(--mg-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 44px rgba(0, 0, 0, .28);
}

body.mg-app-page .notification-item,
body.mg-app-page .log-entry,
body.mg-app-page .order-row,
body.mg-app-page .asset-row,
body.mg-app-page .user-row,
body.mg-app-page .status-row,
body.mg-app-page .detail-row,
body.mg-app-page .order-info-item,
body.mg-app-page .history-row,
body.mg-app-page .transfer-row,
body.mg-app-page .contract-row {
  border-color: rgba(255, 138, 61, .14) !important;
  background: linear-gradient(90deg, rgba(255, 138, 61, .055), rgba(157, 78, 221, .04)) !important;
  transition: transform .16s var(--mg-ease), background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

body.mg-app-page .notification-item:hover,
body.mg-app-page .log-entry:hover,
body.mg-app-page .order-row:hover,
body.mg-app-page .asset-row:hover,
body.mg-app-page .user-row:hover,
body.mg-app-page .status-row:hover,
body.mg-app-page .detail-row:hover,
body.mg-app-page .order-info-item:hover,
body.mg-app-page .history-row:hover,
body.mg-app-page .transfer-row:hover,
body.mg-app-page .contract-row:hover {
  transform: translateX(3px);
  border-color: rgba(255, 138, 61, .38) !important;
  background: linear-gradient(90deg, rgba(255, 138, 61, .12), rgba(157, 78, 221, .08)) !important;
  box-shadow: inset 2px 0 0 rgba(255, 138, 61, .72), 0 14px 34px rgba(0, 0, 0, .26);
}

body.mg-app-page :where(.forge-scene, .buy-scene, .buy-success-scene, .craft-success-scene) {
  overflow: visible !important;
  filter: drop-shadow(0 0 34px rgba(255, 138, 61, .22)) drop-shadow(0 0 42px rgba(157, 78, 221, .14));
}

.modal-overlay,
.modal,
.overlay,
.modal-backdrop,
.admin-modal-overlay,
.approval-modal-backdrop,
.capsule-modal-overlay,
.migration-modal-overlay,
.forge-overlay,
.buy-overlay,
.buy-success-overlay,
.craft-success-overlay,
.ship-modal-bg,
.token-modal-overlay,
.dossier-overlay,
.rejection-modal-backdrop,
.trade-fill-overlay,
.loading-overlay,
.coming-soon-overlay,
#clone-detail-overlay,
.confirmation-modal,
.mg-hud-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(157, 78, 221, .18), transparent 36%),
    radial-gradient(circle at 18% 88%, rgba(255, 138, 61, .12), transparent 34%),
    rgba(0, 0, 0, .74) !important;
  backdrop-filter: blur(12px) saturate(1.12);
  animation: mgHudFade .18s ease both;
}

.loading-overlay {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.trade-fill-overlay:not(.show):not(.active) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

.trade-fill-overlay.show,
.trade-fill-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-dialog,
.modal-content,
.admin-modal,
.approval-modal,
.approval-modal-content,
.confirmation-modal .modal-content,
.modal-backdrop > .modal,
.modal-box,
.modal-lg,
.capsule-modal,
.migration-modal,
.deposit-modal-redesign,
.token-modal,
.ship-modal,
.dossier-card,
.dossier-modal,
.rejection-modal,
.clone-detail-panel,
.asset-info-content,
.trade-fill-modal,
.coming-soon-content,
#modal-content,
.popup,
.info-popup,
.mg-hud-modal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 138, 61, .48) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 138, 61, .18), transparent 38%),
    radial-gradient(circle at 90% 8%, rgba(157, 78, 221, .16), transparent 40%),
    linear-gradient(145deg, rgba(255, 138, 61, .12), transparent 34%, rgba(157, 78, 221, .12)),
    rgba(7, 10, 17, .97) !important;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .72), 0 0 54px rgba(157, 78, 221, .18), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  animation: mgHudPop .22s cubic-bezier(.2, .9, .2, 1.08) both;
}

body.mg-app-page .modal-backdrop > .modal {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: min(600px, 92vw) !important;
  height: auto !important;
  max-height: min(760px, 88vh) !important;
  overflow-y: auto !important;
  backdrop-filter: none !important;
}

.modal-dialog::before,
.modal-content::before,
.admin-modal::before,
.approval-modal-content::before,
.confirmation-modal .modal-content::before,
.modal-backdrop > .modal::before,
.modal-box::before,
.capsule-modal::before,
.migration-modal::before,
.deposit-modal-redesign::before,
.token-modal::before,
.ship-modal::before,
.dossier-card::before,
.dossier-modal::before,
.rejection-modal::before,
.clone-detail-panel::before,
.asset-info-content::before,
.trade-fill-modal::before,
.coming-soon-content::before,
.mg-hud-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 61, .9), rgba(157, 78, 221, .72), transparent);
  pointer-events: none;
}

.modal-dialog::after,
.modal-content::after,
.admin-modal::after,
.approval-modal-content::after,
.confirmation-modal .modal-content::after,
.modal-backdrop > .modal::after,
.modal-box::after,
.capsule-modal::after,
.migration-modal::after,
.deposit-modal-redesign::after,
.token-modal::after,
.ship-modal::after,
.dossier-card::after,
.dossier-modal::after,
.rejection-modal::after,
.clone-detail-panel::after,
.asset-info-content::after,
.trade-fill-modal::after,
.coming-soon-content::after,
.mg-hud-modal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(140deg, rgba(0, 0, 0, .45), transparent 58%);
}

.modal-header,
.modal-footer,
.modal-actions,
.approval-modal-actions,
.capsule-modal-actions,
.token-modal-actions,
.ship-modal-actions,
.rejection-actions,
.mg-hud-modal-actions {
  border-color: rgba(255, 138, 61, .18) !important;
  background: linear-gradient(90deg, rgba(255, 138, 61, .06), rgba(157, 78, 221, .04)) !important;
}

.modal-title,
.token-modal h2,
.ship-modal h2,
.dossier-card h2,
.dossier-modal h2,
.rejection-modal h2,
.clone-detail-panel h2,
.asset-info-content h2,
.trade-fill-title,
.coming-soon-content h2,
.craft-success-title,
.buy-success-title {
  color: var(--mg-ember-2);
  font-family: var(--mg-font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(255, 138, 61, .22), 0 0 38px rgba(157, 78, 221, .14);
}

.trade-fill-details,
.craft-success-sub,
.buy-success-sub,
.coming-soon-content p {
  color: var(--mg-muted);
  font-family: var(--mg-font-body);
  line-height: 1.55;
}

body.mg-app-page :where(.modal-close, .token-modal-close, .admin-modal-close, .ship-modal-close, .capsule-modal-close, .close-modal, .close-btn),
body.mg-app-page :where(.rejection-modal-header button, .notification-close) {
  min-width: 34px;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 138, 61, .36) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 138, 61, .16), rgba(157, 78, 221, .12)),
    rgba(4, 8, 15, .9) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 18px rgba(255, 138, 61, .08) !important;
  transition: transform .16s var(--mg-ease), border-color .16s ease, box-shadow .16s ease;
}

body.mg-app-page :where(.modal-close, .token-modal-close, .admin-modal-close, .ship-modal-close, .capsule-modal-close, .close-modal, .close-btn):hover,
body.mg-app-page :where(.rejection-modal-header button, .notification-close):hover {
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(255, 138, 61, .74) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .08), 0 0 24px rgba(157, 78, 221, .16) !important;
}

body.mg-app-page :where(.modal-btn, .btn-modal, .modal-btn-primary, .modal-btn-secondary, .modal-actions button, .token-modal-actions button, .ship-modal-actions button, .capsule-modal-actions button, .rejection-modal-footer button) {
  border-radius: 8px !important;
  font-family: var(--mg-font-display) !important;
  font-weight: 850 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

body.mg-app-page :where(.modal-content img, .modal-dialog img, .token-modal img, .token-modal-image, .capsule-modal-img, .ship-modal img, .rejection-modal img, .asset-info-content img) {
  border: 1px solid rgba(255, 138, 61, .28) !important;
  border-radius: 9px !important;
  background: rgba(4, 8, 15, .72) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .36), 0 0 28px rgba(255, 138, 61, .12) !important;
}

.toast-container {
  position: fixed;
  top: 88px;
  right: 18px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast,
.sh-toast,
.notification,
.notification-toast,
.notification-panel,
.notification-dropdown,
.alert,
.alert-box,
.payment-status,
.mg-hud-toast {
  border: 1px solid rgba(255, 138, 61, .28);
  border-radius: var(--mg-radius);
  background: rgba(8, 12, 19, .94);
  color: var(--mg-text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px);
}

.toast-success,
.toast.success,
.sh-toast.toast-success,
.notification-success,
.notification-toast.notification-success,
.alert-success,
.alert-box.alert-success { border-color: rgba(255, 179, 95, .68) !important; }
.toast-error,
.toast.error,
.sh-toast.toast-error,
.notification-error,
.notification-toast.notification-error,
.alert-error,
.alert-box.alert-error { border-color: rgba(255, 98, 117, .62) !important; }
.toast-info,
.toast.info,
.sh-toast.toast-info,
.notification-info,
.notification-toast.notification-info,
.alert-info,
.alert-box.alert-info { border-color: rgba(157, 78, 221, .56) !important; }
.toast-warning,
.toast.warning,
.sh-toast.toast-warning,
.notification-warning,
.notification-toast.notification-warning,
.alert-warning,
.alert-box.alert-warning { border-color: rgba(245, 200, 75, .6) !important; }

.loading-spinner,
.spinner {
  border-color: rgba(255, 138, 61, .18);
  border-top-color: var(--mg-cyan);
  border-right-color: var(--mg-ember);
  animation: mg-spin .85s linear infinite;
}

.empty,
.empty-state,
.loading,
.muted,
.text-muted {
  color: var(--mg-muted);
}

.mg-spotlight {
  animation: mg-spotlight 1.1s var(--mg-ease);
}

/* Late-stage normalization for legacy page CSS that still ships after this file. */
body.mg-app-page {
  background:
    linear-gradient(180deg, rgba(5, 7, 12, .78), rgba(5, 7, 12, .93) 48%, #05070c 100%),
    linear-gradient(115deg, rgba(255, 138, 61, .10), transparent 34%, rgba(157, 78, 221, .10) 72%, transparent),
    var(--mg-space-background) center center / cover fixed !important;
}

body.mg-app-page :where(
  .guild-title-header,
  .guilds-header,
  .guild-tabs,
  .guild-card,
  .twitch-hero,
  .link-card,
  .account-bar,
  .reward-settings,
  .streamer-card,
  .reward-tier,
  .leaderboard-card,
  .smcw-title-header,
  .price-card,
  .exchange-panel,
  .wallet-bar,
  .balance-display,
  .conversion-preview,
  .ship-title-header,
  .ship-status-bar,
  .ship-hero,
  .ship-art,
  .ship-panel,
  .ship-card,
  .stat-slot,
  .capsule-card,
  .roll-result,
  .result-card,
  .migration-info-banner,
  .migration-status-bar,
  .nft-card,
  .outpost-card,
  .supply-card,
  .mission-card,
  .route-card,
  .contract-card,
  .contract-section,
  .cargo-selection,
  .cargo-item,
  .route-selection,
  .status-panel,
  .status-bar,
  .status-indicator,
  .status-banner,
  .my-rank-panel,
  .my-rank-stat,
  .stats-overview,
  .filters-section,
  .filter-bar,
  .filter-tabs,
  .date-filter,
  .clone-type-card,
  .warning-box,
  .notice-box,
  .info-box,
  .resource-status,
  .resource-item,
  .balance-panel,
  .payment-status,
  .admin-nav-tabs,
  .section-tabs,
  .upload-zone,
  .drop-zone,
  #csv-dropzone,
  #csv-filename,
  .approval-status,
  .approval-actions,
  .progress-status,
  .sync-status,
  .wallet-stat,
  .wallet-stat-card,
  .wallet-token-card,
  .transfer-card,
  .nft-tags,
  .level-bar
) {
  border: 1px solid rgba(255, 138, 61, .24) !important;
  border-radius: var(--mg-radius) !important;
  background:
    linear-gradient(145deg, rgba(255, 138, 61, .075), transparent 42%, rgba(157, 78, 221, .07)),
    rgba(7, 10, 17, .88) !important;
  box-shadow: 0 22px 68px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

body.mg-app-page :where(
  .guild-title-header,
  .twitch-hero,
  .smcw-title-header,
  .ship-title-header,
  .migration-title-header,
  .page-title-header,
  .tokens-title-header,
  .leaderboard-title-header,
  .archive-title-header,
  .ot-title-header,
  .mw-title-header
) {
  padding: clamp(22px, 3vw, 36px) clamp(18px, 2.5vw, 28px) !important;
  margin-bottom: 18px !important;
}

body.mg-app-page :where(
  .guild-title-header h1,
  .twitch-hero h1,
  .smcw-title-header h1,
  .ship-title-header h1,
  .migration-title-header h1,
  .page-title-header h1,
  .tokens-title-header h1,
  .leaderboard-title-header h1,
  .archive-title-header h1,
  .ot-title-header h1,
  .mw-title-header h1,
  .price-card .value.orange,
  .balance-pill strong,
  .ship-info h2,
  .spec-block .spec-value
) {
  color: var(--mg-ember-2) !important;
  text-shadow: 0 0 26px rgba(255, 138, 61, .22), 0 0 44px rgba(157, 78, 221, .14) !important;
}

body.mg-app-page :where(
  .guild-title-header .subtitle,
  .twitch-hero .subtitle,
  .smcw-title-header .subtitle,
  .ship-title-header .subtitle,
  .migration-title-header .subtitle,
  .page-title-header .subtitle,
  .tokens-title-header .subtitle,
  .leaderboard-title-header .subtitle,
  .archive-title-header .subtitle,
  .ot-title-header .subtitle,
  .mw-title-header .subtitle,
  .price-card .label,
  .price-card .sub,
  .panel-header p,
  .class-line,
  .spec-label
) {
  color: var(--mg-muted) !important;
}

body.mg-app-page :where(
  .guild-tab,
  .arch-btn,
  .filter-btn,
  .category-tab,
  .btn-twitch,
  .btn-exchange,
  .btn-deposit,
  .btn-roll,
  .btn-mint,
  .btn-finalize,
  .btn-success,
  .btn.success,
  .admin-btn-success,
  button.success
) {
  border: 1px solid rgba(255, 138, 61, .36) !important;
  border-radius: var(--mg-radius) !important;
  background:
    linear-gradient(135deg, rgba(255, 138, 61, .2), rgba(157, 78, 221, .12)),
    rgba(8, 12, 20, .86) !important;
  color: var(--mg-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 28px rgba(0, 0, 0, .26) !important;
}

body.mg-app-page :where(
  .guild-tab:hover,
  .guild-tab.active,
  .arch-btn:hover,
  .arch-btn.active,
  .filter-btn:hover,
  .filter-btn.active,
  .category-tab:hover,
  .category-tab.active,
  .btn-twitch:hover,
  .btn-exchange:hover:not(:disabled),
  .btn-roll:hover:not(:disabled),
  .btn-mint:hover:not(:disabled),
  .btn-finalize:hover:not(:disabled),
  .btn-success:hover:not(:disabled),
  .btn.success:hover:not(:disabled),
  .admin-btn-success:hover,
  button.success:hover
) {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 138, 61, .72) !important;
  background:
    linear-gradient(135deg, rgba(255, 138, 61, .28), rgba(157, 78, 221, .18)),
    rgba(12, 16, 25, .94) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36), 0 0 30px rgba(255, 138, 61, .15), 0 0 22px rgba(157, 78, 221, .1) !important;
}

body.mg-app-page:not(.theme-Miner) :where(
  .green,
  .text-green,
  .value.green,
  .panel-header h2.green,
  .wallet-connected,
  .badge-connected,
  .alert-success,
  .success-message,
  .sw-success-msg,
  .status-completed,
  .task-complete
) {
  color: var(--mg-ember-2) !important;
  border-color: rgba(255, 179, 95, .48) !important;
}

body.mg-app-page :where(.guild-card, .link-card, .price-card, .exchange-panel, .ship-card, .stat-slot, .nft-card, .outpost-card, .supply-card, .mission-card, .route-card, .contract-section, .cargo-selection, .cargo-item, .clone-type-card, .my-rank-stat, .resource-item) {
  transition: transform .2s var(--mg-ease), border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

body.mg-app-page :where(.guild-card, .link-card, .price-card, .exchange-panel, .ship-card, .stat-slot:not(.empty), .nft-card, .outpost-card, .supply-card, .mission-card, .route-card, .cargo-item, .clone-type-card, .my-rank-stat, .resource-item):hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 138, 61, .54) !important;
  box-shadow: 0 26px 76px rgba(0, 0, 0, .52), 0 0 34px rgba(157, 78, 221, .13), 0 0 24px rgba(255, 138, 61, .1) !important;
}

body.mg-app-page :where(
  .stat-value,
  .kpi-value,
  .value,
  .status-value,
  .my-rank-stat .value,
  .balance-value,
  .price-value,
  .resource-amount,
  .count-value
) {
  color: var(--mg-ember-2) !important;
  font-family: var(--mg-font-display) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 0 24px rgba(255, 138, 61, .24), 0 0 38px rgba(157, 78, 221, .13) !important;
}

body.mg-app-page :where(
  .stat-label,
  .kpi-label,
  .label,
  .status-label,
  .my-rank-stat .label,
  .balance-label,
  .resource-label,
  .filter-group label,
  .wallet-stat-label,
  .filter-label
) {
  color: var(--mg-muted) !important;
  font-family: var(--mg-font-mono) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body.mg-app-page :where(
  .badge,
  .tag,
  .status-badge,
  .stat-badge,
  .class-badge,
  .tier-badge,
  .detail-badge,
  .daemon-badge,
  .hijack-badge,
  .cat-badge,
  .rarity-badge,
  .trait-badge,
  .filter-tab,
  .admin-tab,
  .section-tab,
  .tab-button,
  .import-tab,
  .tree-badge,
  .nft-tag,
  .status-pill
) {
  display: inline-flex !important;
  min-height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 5px 9px !important;
  border: 1px solid rgba(255, 138, 61, .34) !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(255, 138, 61, .14), rgba(157, 78, 221, .11)), rgba(5, 8, 14, .78) !important;
  color: var(--mg-ember-2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 10px 24px rgba(0, 0, 0, .24) !important;
  font-family: var(--mg-font-display) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.mg-app-page :where(.filter-tab:hover, .filter-tab.active, .admin-tab:hover, .admin-tab.active, .section-tab:hover, .section-tab.active, .tab-button:hover, .tab-button.active, .import-tab:hover, .import-tab.active, .status-badge.active, .daemon-badge.enabled, .badge-info) {
  border-color: rgba(157, 78, 221, .58) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(255, 138, 61, .2), rgba(157, 78, 221, .2)), rgba(8, 12, 20, .9) !important;
}

body.mg-app-page .badge,
body.mg-app-page .tag,
body.mg-app-page .status-badge,
body.mg-app-page .stat-badge,
body.mg-app-page .class-badge,
body.mg-app-page .tier-badge,
body.mg-app-page .detail-badge,
body.mg-app-page .daemon-badge,
body.mg-app-page .hijack-badge,
body.mg-app-page .cat-badge,
body.mg-app-page .rarity-badge,
body.mg-app-page .trait-badge,
body.mg-app-page .admin-tab,
body.mg-app-page .section-tab,
body.mg-app-page .tab-button,
body.mg-app-page .import-tab,
body.mg-app-page .tree-badge,
body.mg-app-page .nft-tag,
body.mg-app-page .status-pill {
  border-color: rgba(255, 138, 61, .34) !important;
  background: linear-gradient(135deg, rgba(255, 138, 61, .14), rgba(157, 78, 221, .11)), rgba(5, 8, 14, .78) !important;
  color: var(--mg-ember-2) !important;
  border-radius: 6px !important;
}

body.mg-app-page .status-badge.active,
body.mg-app-page .daemon-badge.enabled,
body.mg-app-page .badge-info,
body.mg-app-page .admin-tab.active,
body.mg-app-page .section-tab.active,
body.mg-app-page .tab-button.active,
body.mg-app-page .import-tab.active {
  border-color: rgba(157, 78, 221, .58) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(255, 138, 61, .2), rgba(157, 78, 221, .2)), rgba(8, 12, 20, .9) !important;
}

body.mg-app-page :where(.status-dot, .online-dot, .indicator-dot) {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--mg-ember-2) !important;
  box-shadow: 0 0 18px rgba(255, 179, 95, .62), 0 0 28px rgba(157, 78, 221, .18) !important;
}

body.mg-app-page :where(
  .status-badge.status-active,
  .status-badge.active,
  .status-pill.ready,
  .status-pill.completed,
  .status-pill.approved,
  .status-pill.available,
  .status-active,
  .status-completed,
  .status-approved,
  .wallet-stat-value.good,
  .nft-tag.available
) {
  border-color: rgba(117, 231, 168, .42) !important;
  color: var(--mg-green) !important;
  background: linear-gradient(135deg, rgba(117, 231, 168, .14), rgba(255, 138, 61, .11)), rgba(5, 8, 14, .82) !important;
}

body.mg-app-page :where(
  .status-badge.status-paused,
  .status-badge.status-pending,
  .status-pill.pending,
  .status-pill.processing,
  .status-paused,
  .status-pending,
  .wallet-stat-value.warn
) {
  border-color: rgba(245, 200, 75, .42) !important;
  color: var(--mg-gold) !important;
  background: linear-gradient(135deg, rgba(245, 200, 75, .14), rgba(255, 138, 61, .1)), rgba(5, 8, 14, .82) !important;
}

body.mg-app-page :where(
  .status-badge.status-failed,
  .status-badge.status-error,
  .status-badge.status-rejected,
  .status-pill.failed,
  .status-pill.error,
  .status-pill.rejected,
  .status-failed,
  .status-error,
  .status-rejected,
  .wallet-stat-value.bad,
  .nft-tag.locked
) {
  border-color: rgba(255, 98, 117, .46) !important;
  color: var(--mg-red) !important;
  background: linear-gradient(135deg, rgba(255, 98, 117, .14), rgba(157, 78, 221, .1)), rgba(5, 8, 14, .82) !important;
}

body.mg-app-page .status-badge.status-active,
body.mg-app-page .status-pill.ready,
body.mg-app-page .status-pill.completed,
body.mg-app-page .status-pill.approved,
body.mg-app-page .status-pill.available,
body.mg-app-page .wallet-stat-value.good,
body.mg-app-page .nft-tag.available {
  border-color: rgba(117, 231, 168, .42) !important;
  color: var(--mg-green) !important;
  background: linear-gradient(135deg, rgba(117, 231, 168, .14), rgba(255, 138, 61, .11)), rgba(5, 8, 14, .82) !important;
}

body.mg-app-page .status-badge.status-paused,
body.mg-app-page .status-badge.status-pending,
body.mg-app-page .status-pill.pending,
body.mg-app-page .status-pill.processing,
body.mg-app-page .wallet-stat-value.warn {
  border-color: rgba(245, 200, 75, .42) !important;
  color: var(--mg-gold) !important;
  background: linear-gradient(135deg, rgba(245, 200, 75, .14), rgba(255, 138, 61, .1)), rgba(5, 8, 14, .82) !important;
}

body.mg-app-page .status-badge.status-failed,
body.mg-app-page .status-badge.status-error,
body.mg-app-page .status-badge.status-rejected,
body.mg-app-page .status-pill.failed,
body.mg-app-page .status-pill.error,
body.mg-app-page .status-pill.rejected,
body.mg-app-page .wallet-stat-value.bad,
body.mg-app-page .nft-tag.locked {
  border-color: rgba(255, 98, 117, .46) !important;
  color: var(--mg-red) !important;
  background: linear-gradient(135deg, rgba(255, 98, 117, .14), rgba(157, 78, 221, .1)), rgba(5, 8, 14, .82) !important;
}

body.mg-app-page :where(.level-bar) {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 7px !important;
}

body.mg-app-page :where(.level-pip) {
  width: 12px !important;
  height: 12px !important;
  border: 1px solid rgba(255, 138, 61, .22) !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

body.mg-app-page :where(.level-pip.active, .level-pip.trading, .level-pip.combat, .level-pip.mining) {
  border-color: rgba(255, 179, 95, .58) !important;
  background: linear-gradient(135deg, var(--mg-ember), var(--mg-violet)) !important;
  box-shadow: 0 0 16px rgba(255, 138, 61, .24), 0 0 22px rgba(157, 78, 221, .16) !important;
}

body.mg-app-page :where(#csv-dropzone, .upload-zone, .drop-zone) {
  cursor: pointer !important;
  border-style: dashed !important;
  border-width: 1px !important;
  text-align: center !important;
  color: var(--mg-muted) !important;
}

body.mg-app-page :where(#csv-dropzone:hover, .upload-zone:hover, .drop-zone:hover) {
  border-color: rgba(255, 138, 61, .72) !important;
  background: linear-gradient(135deg, rgba(255, 138, 61, .13), rgba(157, 78, 221, .09)), rgba(9, 13, 21, .94) !important;
  color: var(--mg-text) !important;
}

body.mg-app-page :where(.approval-actions, .form-actions, .review-actions, .modal-actions, .nft-tags) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

body.mg-app-page :where(.warning-box, .notice-box, .info-box, .status-banner) {
  border-left: 3px solid rgba(255, 138, 61, .78) !important;
  padding: 16px 18px !important;
}

body.mg-app-page :where(.filter-tabs, .filters-section, .filter-bar, .filters, .filter-row) {
  gap: 10px !important;
  align-items: center !important;
}

body.mg-app-page .mg-hud-interactive {
  --mg-hover-x: 50%;
  --mg-hover-y: 50%;
  isolation: isolate;
}

body.mg-app-page .mg-hud-interactive > .mg-hud-glint {
  display: none !important;
}

body.mg-app-page :where(
  .container,
  .marketplace-shell,
  .marketplace-hero,
  .engineering-hero,
  .history-shell,
  .wallet-shell,
  .page-container,
  .main-container,
  .content,
  main,
  section
) > .mg-hud-glint {
  display: none !important;
}

body.mg-app-page .mg-hud-interactive:hover > .mg-hud-glint,
body.mg-app-page .mg-hud-interactive:focus-within > .mg-hud-glint {
  display: none !important;
  opacity: 0 !important;
}

body.mg-app-page .mg-click-ripple {
  position: absolute;
  left: var(--mg-ripple-x);
  top: var(--mg-ripple-y);
  z-index: 2;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 179, 95, .72), rgba(157, 78, 221, .32) 48%, transparent 70%);
  box-shadow: 0 0 28px rgba(255, 138, 61, .34), 0 0 38px rgba(157, 78, 221, .2);
  animation: mg-ripple .58s var(--mg-ease) forwards;
}

body.mg-app-page .mg-reveal-ready {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  will-change: auto;
}

body.mg-app-page .mg-reveal-ready.mg-reveal-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@keyframes mg-spin {
  to { transform: rotate(360deg); }
}

@keyframes mg-spotlight {
  0% { box-shadow: 0 0 0 rgba(157, 78, 221, 0); }
  35% { box-shadow: 0 0 0 3px rgba(157, 78, 221, .22), 0 0 52px rgba(255, 138, 61, .22); }
  100% { box-shadow: 0 0 0 rgba(157, 78, 221, 0); }
}

@keyframes mg-ripple {
  0% { opacity: .84; transform: scale(.4); }
  72% { opacity: .32; }
  100% { opacity: 0; transform: scale(18); }
}

@keyframes mgHudFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mgHudPop {
  from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes mgHudSlide {
  from { opacity: 0; transform: translateX(18px) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 900px) {
  :root {
    --mg-page-gutter: 10px;
  }

  body.mg-app-page table,
  body.mg-app-page .data-table,
  body.mg-app-page .order-table,
  body.mg-app-page .orders-table,
  body.mg-app-page .player-table,
  body.mg-app-page .airdrop-table,
  body.mg-app-page .contracts-table,
  body.mg-app-page .history-table,
  body.mg-app-page .guild-table,
  body.mg-app-page .log-table,
  body.mg-app-page .leaderboard-table,
  body.mg-app-page .pnl-table,
  body.mg-app-page .sink-table,
  body.mg-app-page .cost-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.mg-app-page .mg-table-scroll > table {
    display: table !important;
    min-width: 620px;
  }

  .container,
  .dashboard-container,
  .marketplace-container,
  .marketplace-shell,
  .wallet-shell,
  .history-shell,
  .engineering-hero,
  .engineering-panel,
  .clone-stats-container,
  .history-container,
  .leaderboard-container,
  .ot-container,
  .settings-container,
  .twitch-container,
  .guilds-container,
  .avatar-studio-container,
  .studio-container,
  .page-container,
  .main-container,
  .sw-full-inv-content,
  #sw-app .sw-screen,
  .content,
  main {
    width: min(var(--mg-page-max), calc(100% - (var(--mg-page-gutter) * 2)));
  }

  .toast-container {
    left: 10px;
    right: 10px;
    top: 72px;
  }

  .toast,
  .sh-toast {
    max-width: none;
    min-width: 0;
  }
}

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

  body.mg-app-page .mg-reveal-ready {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}