:root {
  color-scheme: dark;
  --xxt-bg: #070a12;
  --xxt-surface: #101624;
  --xxt-surface-2: #151d2f;
  --xxt-ink: #eef4ff;
  --xxt-muted: #91a1b8;
  --xxt-line: #253147;
  --xxt-accent: #4f8cff;
  --xxt-accent-2: #17d6a3;
}

body:has(.classic-page-fill) {
  background:
    radial-gradient(circle at 24% 0%, rgba(79, 140, 255, 0.18), transparent 32%),
    radial-gradient(circle at 78% 12%, rgba(23, 214, 163, 0.12), transparent 28%),
    var(--xxt-bg) !important;
  color: var(--xxt-ink);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}

body:has(.classic-page-fill) header.semi-layout-header > header {
  border-bottom: 1px solid rgba(37, 49, 71, 0.86);
  background: rgba(7, 10, 18, 0.94) !important;
  color: var(--xxt-ink) !important;
  backdrop-filter: none !important;
}

body:has(.classic-page-fill) header.semi-layout-header a,
body:has(.classic-page-fill) header.semi-layout-header h4,
body:has(.classic-page-fill) header.semi-layout-header button {
  color: var(--xxt-muted) !important;
}

body:has(.classic-page-fill) header.semi-layout-header a:hover,
body:has(.classic-page-fill) header.semi-layout-header button:hover {
  color: var(--xxt-ink) !important;
}

body:has(.classic-page-fill) header.semi-layout-header a[href="/register"] button {
  border: 1px solid rgba(79, 140, 255, 0.48) !important;
  border-radius: 0 6px 6px 0 !important;
  background: rgba(79, 140, 255, 0.18) !important;
}

body:has(.classic-page-fill) header.semi-layout-header a[href="/login"] button {
  border: 1px solid var(--xxt-line) !important;
  border-radius: 6px 0 0 6px !important;
  background: var(--xxt-surface) !important;
}

body:has(.classic-page-fill) img[alt="logo"],
body:has(.classic-page-fill) img[alt="Logo"] {
  content: url("/assets/xxtoken-logo.png");
  opacity: 1 !important;
}

body:has(.classic-page-fill) header.semi-layout-header a[href="/"] > div:has(img[alt="logo"]) {
  border-radius: 50%;
  background: #ffffff url("/assets/xxtoken-logo.png") center / cover no-repeat;
}

body:has(.classic-page-fill) header.semi-layout-header a[href="/"] img[alt="logo"],
body:has(.classic-page-fill) header.semi-layout-header a[href="/"] .semi-skeleton,
.classic-page-fill .flex:has(> img[alt="Logo"]) > img[alt="Logo"] {
  display: none !important;
}

.classic-page-fill .flex:has(> img[alt="Logo"])::before {
  content: "";
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #ffffff url("/assets/xxtoken-logo.png") center / cover no-repeat;
}

.classic-page-fill {
  min-height: calc(100vh - 64px) !important;
  padding-top: 96px !important;
  padding-bottom: 56px !important;
  background: transparent !important;
}

.classic-page-fill .blur-ball {
  display: none !important;
}

body:has(.classic-page-fill) .semi-banner:has(.classic-frontend-deprecation-body) {
  display: none !important;
}

.classic-page-fill > .w-full {
  width: min(420px, 100%) !important;
  max-width: none !important;
  margin-top: 0 !important;
}

.classic-page-fill .semi-typography {
  color: var(--xxt-ink) !important;
}

.classic-page-fill .semi-card {
  overflow: hidden;
  border: 1px solid var(--xxt-line) !important;
  border-radius: 8px !important;
  background: rgba(16, 22, 36, 0.96) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32) !important;
}

html body #root .classic-page-fill .semi-card.semi-card {
  border-radius: 8px !important;
}

.classic-page-fill .semi-card-body {
  padding: 24px !important;
}

.classic-page-fill .semi-form-field-label-text {
  color: var(--xxt-muted) !important;
  font-size: 13px;
}

.classic-page-fill .semi-input-wrapper {
  min-height: 42px;
  border: 1px solid var(--xxt-line) !important;
  border-radius: 6px !important;
  background: #0b111d !important;
  box-shadow: none !important;
}

.classic-page-fill .semi-input-wrapper:focus-within {
  border-color: var(--xxt-accent) !important;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.14) !important;
}

.classic-page-fill .semi-input,
.classic-page-fill .semi-input-prefix,
.classic-page-fill .semi-input-modebtn {
  color: var(--xxt-ink) !important;
  background: transparent !important;
}

.classic-page-fill .semi-input::placeholder {
  color: #65758c !important;
}

.classic-page-fill button[type="submit"] {
  min-height: 42px;
  border-radius: 6px !important;
  background: var(--xxt-accent) !important;
  color: #ffffff !important;
  font-weight: 650;
}

html body #root .classic-page-fill button[type="submit"] {
  border-radius: 6px !important;
}

.classic-page-fill form button[type="button"] {
  min-height: 38px;
  border: 1px solid var(--xxt-line) !important;
  border-radius: 6px !important;
  background: var(--xxt-surface-2) !important;
  color: var(--xxt-muted) !important;
}

html body #root .classic-page-fill form button[type="button"] {
  border-radius: 6px !important;
}

@layer tailwind-base {
  html body #root .classic-page-fill .semi-card.semi-card {
    border-radius: 8px !important;
  }

  html body #root .classic-page-fill button[type="submit"],
  html body #root .classic-page-fill form button[type="button"] {
    border-radius: 6px !important;
  }
}

.classic-page-fill a {
  color: var(--xxt-accent) !important;
}

body:has(.classic-page-fill) footer {
  border-top: 1px solid var(--xxt-line);
  background: var(--xxt-bg) !important;
  color: var(--xxt-muted) !important;
}

@media (max-width: 640px) {
  .classic-page-fill {
    align-items: flex-start !important;
    padding: 88px 16px 36px !important;
  }

  .classic-page-fill .semi-card-body {
    padding: 18px !important;
  }

  body:has(.classic-page-fill) header.semi-layout-header nav {
    display: none;
  }
}