:root {
  --lm-page-top: #120a10;
  --lm-page-mid: #1d1119;
  --lm-page-bottom: #0f080e;
  --lm-panel: rgba(32, 17, 30, 0.94);
  --lm-panel-soft: rgba(255, 255, 255, 0.045);
  --lm-panel-strong: rgba(58, 27, 46, 0.9);
  --lm-line: rgba(255, 211, 230, 0.16);
  --lm-line-strong: rgba(255, 183, 212, 0.34);
  --lm-text: #fff5f9;
  --lm-muted: #f2dce7;
  --lm-soft: #cbaebd;
  --lm-accent: #ff9fc9;
  --lm-accent-2: #ffc7dd;
  --lm-gold: #ffd979;
  --lm-good: #8de1b8;
  --lm-danger: #ff91b1;
  --lm-shadow: 0 30px 72px rgba(7, 2, 9, 0.50);
  --lm-radius-xl: 28px;
  --lm-radius-lg: 22px;
  --lm-radius-md: 16px;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  color: var(--lm-text) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 145, 199, 0.18), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(255, 213, 169, 0.10), transparent 26rem),
    radial-gradient(circle at 72% 88%, rgba(255, 125, 180, 0.08), transparent 24rem),
    linear-gradient(180deg, var(--lm-page-top) 0%, var(--lm-page-mid) 48%, var(--lm-page-bottom) 100%) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 198, 224, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 198, 224, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 96%);
}

a {
  color: inherit;
}

.shell,
.page,
.wrap,
.app,
.container,
.main,
.layout {
  max-width: calc(100vw - 32px);
}

.shell,
.app {
  padding-top: 18px !important;
}

.topbar,
.site-bar,
.rail,
.hero,
.lead-panel,
.panel,
.card,
.stat-card,
.metric-card,
.analysis-card,
.control-shell,
.status-block,
.alert-row,
.compare-summary,
.item-card,
.workspace-side-note,
.token-home-card,
.fun-card,
.billing-card,
.admin-card {
  border-color: var(--lm-line) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 176, 208, 0.11), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.024)),
    var(--lm-panel) !important;
  box-shadow: var(--lm-shadow) !important;
  backdrop-filter: blur(18px);
}

.topbar,
.site-bar,
.rail {
  position: sticky;
  top: 14px;
  z-index: 40;
  border-radius: var(--lm-radius-xl) !important;
}

.hero,
.lead-panel {
  border-radius: 34px !important;
  overflow: hidden;
}

.panel,
.card,
.analysis-card,
.metric-card,
.control-shell,
.status-block {
  border-radius: var(--lm-radius-lg) !important;
}

h1,
h2,
h3,
h4,
.section-title,
.brand h1,
.brand-title,
.hero-title {
  color: var(--lm-text) !important;
  letter-spacing: -0.03em;
}

p,
small,
.muted,
.subhint,
.hint,
.section-desc,
.brand p,
.hero-copy,
.meta,
.desc {
  color: var(--lm-muted) !important;
}

button,
.steam-link,
.btn,
.link-btn,
.action-btn,
input[type="button"],
input[type="submit"] {
  border: 1px solid var(--lm-line) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
    rgba(255,255,255,0.035) !important;
  color: var(--lm-text) !important;
  box-shadow: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

button:hover,
.steam-link:hover,
.btn:hover,
.link-btn:hover,
.action-btn:hover {
  transform: translateY(-1px);
  border-color: var(--lm-line-strong) !important;
  box-shadow: 0 12px 26px rgba(255, 126, 180, 0.12);
}

button.primary,
.btn.primary,
input.primary,
.el-button--primary {
  border-color: rgba(255, 183, 212, 0.42) !important;
  background: linear-gradient(135deg, #ffd8e8, #ff9fc9) !important;
  color: #351322 !important;
  font-weight: 800;
}

input,
select,
textarea {
  border-color: var(--lm-line) !important;
  background: rgba(16, 8, 14, 0.62) !important;
  color: var(--lm-text) !important;
  border-radius: 14px !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(242, 220, 231, 0.62) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(255, 159, 201, 0.64) !important;
  box-shadow: 0 0 0 3px rgba(255, 159, 201, 0.11) !important;
  outline: none !important;
}

table,
.table {
  border-color: var(--lm-line) !important;
}

th,
td {
  border-color: rgba(255, 211, 230, 0.10) !important;
}

th {
  color: var(--lm-soft) !important;
  background: rgba(255,255,255,0.035) !important;
}

tr:hover td {
  background: rgba(255, 159, 201, 0.055) !important;
}

.badge,
.tag,
.pill,
.chip,
.status-pill,
.alert-pill,
.micro-pill {
  border-color: var(--lm-line) !important;
  background: rgba(255,255,255,0.055) !important;
  color: var(--lm-muted) !important;
}

.good,
.success,
.up {
  color: var(--lm-good) !important;
}

.danger,
.error,
.down {
  color: var(--lm-danger) !important;
}

.warn,
.warning {
  color: var(--lm-gold) !important;
}

@media (max-width: 760px) {
  .shell,
  .page,
  .wrap,
  .container,
  .main,
  .layout {
    width: min(100% - 20px, 100%) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .topbar,
  .site-bar,
  .hero,
  .lead-panel,
  .panel {
    border-radius: 20px !important;
  }

  body {
    background:
      radial-gradient(circle at 20% 0%, rgba(255, 145, 199, 0.18), transparent 20rem),
      linear-gradient(180deg, var(--lm-page-top), var(--lm-page-bottom)) !important;
  }
}

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(255, 217, 121, 0.86) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(255, 159, 201, 0.18) !important;
}

.lm-skip-link {
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 2147483647;
  transform: translateY(-140%);
  padding: 10px 14px;
  border: 1px solid rgba(255, 217, 121, 0.56);
  border-radius: 999px;
  color: #2d1421;
  background: linear-gradient(135deg, #ffe7a8, #ffb6d4);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(32, 10, 24, 0.28);
}

.lm-skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Dark anime base theme shared by early-loading pages. */
:root {
  --lm-page-top: #050404;
  --lm-page-mid: #120c0c;
  --lm-page-bottom: #030303;
  --lm-panel: rgba(17, 12, 12, 0.92);
  --lm-panel-soft: rgba(231, 204, 147, 0.045);
  --lm-panel-strong: rgba(42, 18, 19, 0.86);
  --lm-line: rgba(202, 166, 91, 0.26);
  --lm-line-strong: rgba(228, 188, 103, 0.48);
  --lm-text: #f1e6d0;
  --lm-muted: rgba(232, 213, 180, 0.76);
  --lm-soft: rgba(210, 185, 140, 0.72);
  --lm-accent: #8d1d2b;
  --lm-accent-2: #caa65b;
  --lm-gold: #d4ad62;
  --lm-good: #a8b884;
  --lm-danger: #c9504e;
  --lm-shadow: 0 28px 82px rgba(0, 0, 0, 0.58);
}

body {
  color: var(--lm-text) !important;
  background:
    radial-gradient(circle at 16% 8%, rgba(123, 24, 35, 0.28), transparent 28rem),
    radial-gradient(circle at 90% 6%, rgba(202, 166, 91, 0.13), transparent 24rem),
    linear-gradient(180deg, var(--lm-page-top) 0%, var(--lm-page-mid) 48%, var(--lm-page-bottom) 100%) !important;
}

body::before {
  opacity: 0.22 !important;
  background-image:
    linear-gradient(rgba(214, 188, 128, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 188, 128, 0.04) 1px, transparent 1px),
    radial-gradient(circle, rgba(242, 216, 165, 0.13) 0 1px, transparent 1.7px) !important;
  background-size: 76px 76px, 76px 76px, 18px 18px !important;
}

button.primary,
.btn.primary,
input.primary,
.el-button--primary {
  border-color: rgba(232, 190, 99, 0.62) !important;
  background: linear-gradient(135deg, #781923 0%, #3c1114 58%, #a47c38 100%) !important;
  color: #f7ead0 !important;
}

.lm-skip-link {
  color: #f7ead0 !important;
  background: linear-gradient(135deg, #781923, #a47c38) !important;
}

html,
html[data-theme="dark"],
html[data-theme="light"],
html:not([data-theme="dark"]) {
  color-scheme: dark !important;
}

html[data-theme="light"] body,
html:not([data-theme="dark"]) body {
  color: var(--lm-text) !important;
  background:
    radial-gradient(circle at 16% 8%, rgba(123, 24, 35, 0.28), transparent 28rem),
    radial-gradient(circle at 90% 6%, rgba(202, 166, 91, 0.13), transparent 24rem),
    linear-gradient(180deg, var(--lm-page-top) 0%, var(--lm-page-mid) 48%, var(--lm-page-bottom) 100%) !important;
}

html[data-theme="light"] :is(.topbar, .site-bar, .rail, .hero, .lead-panel, .panel, .card, .surface, .auth-shell, .auth-panel, .auth-visual, .toolbar, .table-wrap, .list-card, .monitor-card, .item-card) {
  color: var(--lm-text) !important;
  border-color: var(--lm-line) !important;
  background:
    linear-gradient(180deg, rgba(242, 221, 170, 0.055), rgba(242, 221, 170, 0.018)),
    rgba(17, 12, 12, 0.92) !important;
}

html[data-theme="light"] :is(button, .btn, .steam-link, .link-btn, .action-btn, input[type="button"], input[type="submit"]) {
  color: #f7ead0 !important;
  border-color: rgba(202, 166, 91, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(242, 221, 170, 0.055), rgba(242, 221, 170, 0.018)),
    rgba(16, 10, 10, 0.86) !important;
}

html[data-theme="light"] :is(input, select, textarea) {
  color: var(--lm-text) !important;
  border-color: rgba(202, 166, 91, 0.30) !important;
  background: rgba(10, 8, 7, 0.72) !important;
}