/* Marble Fade tier checker — rebuilt from skincash.gg/tools/marble-fade */

.mf-page { position: relative; width: 100%; overflow-x: hidden }
.mf-page *, .mf-page *::before, .mf-page *::after { box-sizing: border-box }
.mf-bg { position: absolute; left: 0; right: 0; top: 0; z-index: 0; height: 700px; overflow: hidden; pointer-events: none }
.mf-bg::before, .mf-bg::after {
  content: ''; position: absolute; top: -128px; width: 400px; height: 400px;
  border-radius: 9999px; opacity: .25; filter: blur(120px);
}
.mf-bg::before { left: 20%; background: hsla(220, 90%, 55%, .5) }
.mf-bg::after { right: 20%; background: hsla(0, 84%, 55%, .5) }
.mf-content { position: relative; z-index: 10; width: 100%; max-width: var(--content-width, 1792px); margin: 0 auto; padding: 48px 64px 96px }

/* ---- hero ---- */
.mf-header { margin-bottom: 40px; text-align: center }
.mf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(251, 113, 133, .3); border-radius: 9999px; padding: 4px 12px;
  background: rgba(251, 113, 133, .1); color: #fda4af;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.mf-badge svg { width: 12px; height: 12px }
.mf-title { margin: 16px 0 0; font-size: 60px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05 }
.mf-gradient-text {
  background: linear-gradient(110deg, #fff 0%, #fff 35%, hsla(0, 84%, 70%, 1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mf-lead { max-width: 672px; margin: 16px auto 0; color: rgba(255, 255, 255, .65); font-size: 15px; line-height: 1.625 }

/* ---- form ---- */
.mf-form { display: flex; max-width: 672px; margin: 0 auto; gap: 8px }
.mf-field { position: relative; flex: 1 }
.mf-field > svg { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: rgba(255, 255, 255, .4); pointer-events: none }
.mf-input {
  width: 100%; height: 55px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 16px 16px 16px 44px;
  background: #0e1014; color: #fff; font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.mf-input::placeholder { color: rgba(255, 255, 255, .35) }
/* The archived global stylesheet paints every focused text input green, so the rose wins explicitly. */
.mf-input:focus { border-color: rgba(251, 113, 133, .5) !important; box-shadow: 0 0 0 3px rgba(244, 63, 94, .12) !important }
.mf-submit {
  position: relative; display: inline-flex; height: 55px; flex: none;
  align-items: center; justify-content: center; gap: 8px; overflow: hidden;
  border: 0; border-radius: 12px; padding: 16px 28px; background: #fb7185; color: #000;
  font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 8px 30px -8px rgba(244, 63, 94, .7); cursor: pointer;
  transition: box-shadow .2s, transform .1s;
}
.mf-submit svg { width: 16px; height: 16px }
.mf-submit:hover { box-shadow: 0 12px 40px -8px rgba(244, 63, 94, .9) }
.mf-submit:active { transform: scale(.98) }
.mf-submit:disabled { opacity: .6; cursor: progress }
@keyframes mf-spin { to { transform: rotate(360deg) } }
.mf-submit .mf-spinner { animation: mf-spin 1s linear infinite }

.mf-error-wrap { max-width: 672px; margin: 12px auto 0 }
.mf-error {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(251, 113, 133, .3); border-radius: 6px; padding: 8px 12px;
  background: rgba(244, 63, 94, .1); color: #fda4af; font-size: 12px;
}
.mf-error svg { width: 14px; height: 14px; flex: none }

.mf-example-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px auto 0 }
.mf-example {
  border: 1px solid rgba(251, 113, 133, .3); border-radius: 4px; padding: 2px 8px;
  background: rgba(251, 113, 133, .06); color: #fda4af;
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  cursor: pointer; transition: background .15s;
}
.mf-example:hover { background: rgba(244, 63, 94, .12) }
.mf-example:disabled { opacity: .5; cursor: progress }

/* ---- result ---- */
.mf-result { max-width: 768px; margin: 32px auto 0 }
.mf-item {
  display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 16px;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 16px; background: #101216;
}
.mf-item-image {
  position: relative; display: flex; aspect-ratio: 1 / 1; overflow: hidden;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; background: #0a0d0c;
}
.mf-item-image img { width: 85%; height: 85%; object-fit: contain }
.mf-item-label { color: rgba(255, 255, 255, .4); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.mf-item-name { margin: 4px 0 0; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.mf-item-seed { margin-top: 4px; color: rgba(255, 255, 255, .45); font-size: 12px }
.mf-item-seed span { color: rgba(255, 255, 255, .75); font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace }

.mf-tier { position: relative; overflow: hidden; margin-top: 12px; border: 1px solid; border-radius: 12px; padding: 24px }
.mf-tier-shine {
  position: absolute; inset: 0; opacity: .25; mix-blend-mode: overlay; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .6) 0%, transparent 55%);
}
.mf-tier-body { position: relative }
.mf-tier-label { color: rgba(255, 255, 255, .85); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }
.mf-tier-name { margin: 4px 0 0; color: #fff; font-size: 36px; font-weight: 800; line-height: 1.1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }
.mf-tier-desc { margin: 8px 0 0; color: rgba(255, 255, 255, .85); font-size: 12px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) }

.mf-warn { margin-top: 12px; border: 1px solid rgba(251, 191, 36, .2); border-radius: 12px; padding: 20px; background: rgba(251, 191, 36, .05) }
.mf-warn-head { display: flex; align-items: center; gap: 8px }
.mf-warn-head svg { width: 16px; height: 16px; flex: none; color: #fcd34d }
.mf-warn-title { color: #fde68a; font-size: 13px; font-weight: 700 }
.mf-warn-text { margin: 6px 0 0; color: rgba(255, 255, 255, .6); font-size: 12px }

.mf-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px }
.mf-tier-box { border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 16px; background: #0a0c10 }
.mf-tier-head { margin-bottom: 8px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase }
.mf-tier-head span { color: rgba(255, 255, 255, .3); font-weight: 400 }
.mf-seeds { display: flex; flex-wrap: wrap; gap: 4px }
.mf-seed {
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; padding: 2px 6px;
  background: rgba(255, 255, 255, .03); color: rgba(255, 255, 255, .65);
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700;
}
.mf-seed.is-match { border-color: rgba(251, 113, 133, .6); background: rgba(251, 113, 133, .2); color: #fecdd3 }

/* ---- sell banner (shared tool CTA) ---- */
.mf-cta {
  position: relative; display: block; overflow: hidden; margin-top: 24px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 16px; padding: 24px;
  background: linear-gradient(to bottom right, #0d1411, #0a0d0c, #0a1f15);
  text-decoration: none; transition: transform .2s;
}
.mf-cta:hover { transform: translateY(-2px) }
.mf-cta-glow {
  position: absolute; right: -128px; top: -128px; width: 360px; height: 360px; border-radius: 9999px;
  background: rgba(17, 197, 107, .5); opacity: .3; filter: blur(100px); transition: opacity .5s; pointer-events: none;
}
.mf-cta:hover .mf-cta-glow { opacity: .6 }
.mf-cta-sheen {
  position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .07), transparent);
  transition: transform 1s ease-out;
}
.mf-cta:hover .mf-cta-sheen { transform: translateX(100%) }
.mf-cta-grid {
  position: absolute; inset: 0; opacity: .03; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mf-cta-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.mf-cta-copy { display: block; min-width: 0 }
.mf-cta-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid rgba(61, 255, 158, .3); border-radius: 9999px; padding: 2px 8px;
  background: rgba(61, 255, 158, .08); color: #3dff9e;
  font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.mf-cta-badge svg { width: 10px; height: 10px }
.mf-cta-title { display: block; margin: 8px 0 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.mf-cta-title span { display: block; margin-top: 2px; color: rgba(255, 255, 255, .45); font-size: 13px; font-weight: 700 }
.mf-cta-note { display: block; margin: 4px 0 0; color: rgba(255, 255, 255, .55); font-size: 12.5px }
.mf-cta-button {
  position: relative; overflow: hidden; display: inline-flex; flex: none;
  align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; padding: 12px 20px; background: #3dff9e; color: #000;
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 30px -8px rgba(34, 197, 94, .6); transition: box-shadow .2s;
}
.mf-cta:hover .mf-cta-button { box-shadow: 0 14px 42px -8px rgba(34, 197, 94, .9) }
.mf-cta-button i {
  position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .3), transparent);
  transition: transform .7s;
}
.mf-cta:hover .mf-cta-button i { transform: translateX(100%) }
.mf-cta-button svg { position: relative; width: 16px; height: 16px; transition: transform .2s }
.mf-cta:hover .mf-cta-button svg { transform: translateX(2px) }

/* ---- footer promo ---- */
.mf-more {
  margin-top: 56px; border: 1px solid rgba(251, 113, 133, .2); border-radius: 16px; padding: 40px;
  background: linear-gradient(to bottom right, #1c1015, #0e0c12, #0a0d12);
}
.mf-more h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.025em }
.mf-more p { max-width: 576px; margin: 8px 0 0; color: rgba(255, 255, 255, .6); font-size: 14px }
.mf-more-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.mf-more-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(251, 191, 36, .3); border-radius: 8px; padding: 8px 12px;
  background: rgba(251, 191, 36, .08); color: #fcd34d; font-size: 12px; font-weight: 700;
  text-decoration: none; transition: background .15s;
}
.mf-more-link:hover { background: rgba(251, 191, 36, .15) }
.mf-more-link svg { width: 14px; height: 14px }

@media (max-width: 1100px) {
  .mf-content { padding: 40px 24px 72px }
  .mf-title { font-size: 44px }
}
@media (max-width: 767px) {
  .mf-content { padding: 28px 12px 64px }
  .mf-title { font-size: 32px }
  .mf-tier-name { font-size: 30px }
  .mf-form { flex-direction: column }
  .mf-submit { width: 100% }
  .mf-item { grid-template-columns: 1fr }
  .mf-tiers { grid-template-columns: 1fr }
  .mf-item-name { font-size: 16px }
  .mf-more { padding: 32px }
  .mf-cta-row { flex-direction: column; align-items: stretch; text-align: center }
}
@media (prefers-reduced-motion: reduce) { .mf-cta, .mf-submit { transition: none } }