/*
  WaveDance shared light UI skin.
  Loaded after page-local CSS so older dark pages inherit the new landing style
  without touching their generation logic.
*/
:root {
  --bg: #f7f8fb !important;
  --bg-2: #ffffff !important;
  --ink: #101318 !important;
  --ink-dim: #667085 !important;
  --accent: #5b5cf6 !important;
  --accent-2: #11b981 !important;
  --accent-3: #f5a524 !important;
  --green: #11845b !important;
  --red: #d92d20 !important;
  --line: rgba(16, 19, 24, 0.10) !important;
  --card: #ffffff !important;
}

html,
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,248,251,0.96)),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}

.grad-bg,
.grain {
  display: none !important;
}

nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  padding: 1rem 3rem !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.logo {
  color: var(--ink) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.logo-mark {
  width: 28px !important;
  height: 28px !important;
  background: #101318 !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav-right,
.nav-links {
  gap: 1.35rem !important;
}

.nav-right a,
.nav-links a,
.back-link,
.back {
  color: var(--ink-dim) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.nav-right a:hover,
.nav-right a.active,
.nav-links a:hover,
.nav-links a.active,
.back-link:hover,
.back:hover {
  color: var(--ink) !important;
}

.nav-right a[style*="background"],
.nav-links .btn-primary,
.btn.btn-primary,
.btn-primary,
.generate-btn,
.quick-pack-buy,
.pack-cta.primary {
  background: #101318 !important;
  border-color: #101318 !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(16,19,24,0.18) !important;
}

.btn-primary:hover:not(:disabled),
.generate-btn:hover:not(:disabled),
.quick-pack-buy:hover:not(:disabled),
.pack-cta.primary:hover:not(:disabled) {
  background: #252a34 !important;
  border-color: #252a34 !important;
  box-shadow: 0 16px 34px rgba(16,19,24,0.20) !important;
}

main {
  position: relative !important;
  z-index: 1 !important;
}

h1,
.page-head h1 {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

h2,
.section-title {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

h3,
.panel h3,
.category-head h2 {
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

p,
li,
.subtitle,
.page-head p,
.card-body p,
.roadmap-text p {
  color: var(--ink-dim) !important;
}

.hint,
.page-head .hint,
.updated {
  color: var(--accent) !important;
}

.panel,
.app-card,
.price-card,
.flow-card,
.modal,
.quick-pack,
.company-box,
.card,
.roadmap,
.output,
.upload-zone,
.compare-table {
  background: var(--card) !important;
  border-color: var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.app-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 14px 34px rgba(16,19,24,0.10) !important;
}

.featured .app-card {
  background: #f4f4ff !important;
  border-color: rgba(91, 92, 246, 0.20) !important;
}

.card-thumb,
.card-thumb.media,
.card-thumb.split,
textarea,
input,
select,
.cost-bar,
.credits-pill,
.account-btn,
.account-dropdown,
.preset-chips button {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
}

textarea:focus,
input:focus,
select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(91,92,246,0.12) !important;
}

label,
.card-cost,
.pack-pay-hint,
.company-box dt {
  color: var(--ink-dim) !important;
}

.cost-bar,
.credits-pill,
.credits-info,
.card-cost,
.company-box .label,
.company-box a,
a {
  color: var(--accent) !important;
}

.credits-pill .add-cr {
  border-radius: 6px !important;
  background: rgba(245,165,36,0.14) !important;
  color: var(--accent-3) !important;
}

.credits-pill:hover {
  background: #f4f4ff !important;
  border-color: var(--accent) !important;
}

.badge.featured,
.badge.image,
.demo-badge {
  background: #101318 !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.badge.video {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.download-btn {
  background: rgba(16,19,24,0.86) !important;
  border-color: rgba(16,19,24,0.16) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

.toast {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 16px 34px rgba(16,19,24,0.14) !important;
  border-radius: 8px !important;
}

.footer-bar,
footer {
  border-color: var(--line) !important;
  color: var(--ink-dim) !important;
}

@media (max-width: 900px) {
  nav {
    position: relative !important;
    padding: 1rem 1.25rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nav-right,
  .nav-links {
    gap: 0.55rem 0.8rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }
}