:root {
  color-scheme: dark;
  --hero-background: #050605;
  --hero-foreground: #f4f4f5;
  --hero-content-1: #232423;
  --hero-content-2: rgba(39, 39, 42, 0.82);
  --hero-content-3: rgba(63, 63, 70, 0.5);
  --hero-divider: rgba(255, 255, 255, 0.08);
  --hero-default: rgba(255, 255, 255, 0.08);
  --hero-default-hover: rgba(255, 255, 255, 0.14);
  --hero-primary: #20d760;
  --hero-primary-hover: #3fe57a;
  --hero-primary-soft: rgba(32, 215, 96, 0.16);
  --hero-success: #20d760;
  --hero-success-hover: #1cc157;
  --hero-success-soft: rgba(32, 215, 96, 0.16);
  --hero-warning-soft: rgba(245, 165, 36, 0.16);
  --hero-danger-soft: rgba(243, 18, 96, 0.16);
  --hero-focus: rgba(0, 111, 238, 0.36);
  --hero-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  --hero-radius-xl: 20px;
  --hero-radius-lg: 16px;
  --hero-radius-md: 14px;
}

body {
  background: var(--hero-background);
  color: var(--hero-foreground);
  font-family:
    "IBM Plex Sans",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.numeric-font {
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
}

[x-cloak] {
  display: none !important;
}

.hero-card {
  border-radius: var(--hero-radius-xl);
  padding: 0rem;
}

.hero-search-card {
  min-height: 12rem;
  display: flex;
  align-items: center;
}

.hero-section-divider {
  height: 1px;
  background: #1f1f1f;
}

.hero-subtle {
  background: var(--hero-content-2);
  border: 1px solid var(--hero-divider);
  border-radius: var(--hero-radius-lg);
}

.hero-metric-card {
  background: #171917;
  border-radius: var(--hero-radius-xl);
}

.hero-metric-label {
  font-size: 0.875rem;
  color: #9fa19f;
}

.hero-metric-value {
  font-size: 1.5rem;
  color: #ffffff;
}

.hero-metric-sub {
  color: #9fa19f;
}

.hero-company-price {
  font-size: 1.5rem;
  color: #ffffff;
}

.hero-price-up {
  color: #20d760;
}

.hero-price-down {
  color: #d9385e;
}

.hero-chip {
  border: 1px solid var(--hero-divider);
  background: var(--hero-default);
  border-radius: 999px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero-chip:hover {
  background: var(--hero-default-hover);
}

.hero-score-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.625rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #202220;
  color: #cfd2cf;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

.hero-score-tag--primary {
  border-color: rgba(165, 180, 252, 0.24);
  background: rgba(99, 102, 241, 0.14);
  color: #e0e7ff;
}

.hero-score-tag--muted {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  color: #898b89;
}

.hero-input {
  border: 1px solid transparent;
  background: #171917;
  border-radius: var(--hero-radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.hero-input::placeholder {
  color: #898b89;
}

.hero-input:hover {
  background: #191b1a;
}

.hero-input:focus {
  border-color: #00d976;
  box-shadow: none;
  background: #191b1a;
}

.hero-input[type="number"]::-webkit-outer-spin-button,
.hero-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hero-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.hero-button-primary,
.hero-button-success,
.hero-button-neutral {
  border-radius: var(--hero-radius-md);
}

.hero-button-primary {
  background: var(--hero-primary);
  color: #020f05;
}

.hero-button-primary:hover {
  background: var(--hero-primary-hover);
}

.hero-button-success {
  background: var(--hero-success);
  color: #020f05;
}

.hero-button-success:hover {
  background: var(--hero-success-hover);
  color: #020f05;
}

.hero-button-neutral {
  background: var(--hero-default);
  border: 1px solid var(--hero-divider);
  color: #020f05;
}

.hero-button-neutral:hover {
  background: var(--hero-default-hover);
}

.hero-button-manual {
  background: #272827;
  color: #ffffff;
  border: none;
  border-radius: var(--hero-radius-md);
}

.hero-button-manual:hover {
  background: #272827;
  color: #ffffff;
}

.hero-price-panel {
  background: rgba(17, 24, 39, 0.44);
  border: 1px solid var(--hero-divider);
  border-radius: var(--hero-radius-lg);
}

.hero-section-title {
  letter-spacing: -0.01em;
}

.hero-panel-title {
  color: #fafafa;
}

.hero-modal {
  background: #050605;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px #1f1f1f;
}

.hero-modal-header {
  padding: 2rem 2rem 0 2rem;
}

.hero-modal-body {
  padding: 2rem;
}

.hero-modal-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  padding-top: 1.5rem;
}

.hero-form-note {
  background: #171917;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--hero-radius-xl);
}

.hero-form-note {
  padding: 1rem 1rem 1.125rem;
}

.hero-form-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.hero-form-label {
  display: block;
  font-size: 0.875rem;
  color: #9fa19f;
}

@media (min-width: 640px) {
  .hero-modal-header {
    padding: 2rem 2rem 0 2rem;
  }

  .hero-modal-body {
    padding: 2rem;
  }

  .hero-form-note {
    padding: 1.25rem;
  }

  .hero-modal-actions {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
}

.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}