/* Fade % calculator — rebuilt from measurements of skincash.gg/tools/fade-checker */

.fc-page { position: relative }
.fc-page *, .fc-page *::before, .fc-page *::after { box-sizing: border-box }
.fc-content { width: 100%; max-width: var(--content-width, 1792px); margin: 0 auto; padding: 64px }

/* ---- hero ---- */
.fc-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center }
.fc-hero-glow {
  position: absolute; left: 50%; top: -128px; width: 700px; height: 700px; transform: translateX(-50%);
  border-radius: 9999px; opacity: .25; filter: blur(120px); pointer-events: none;
  background: radial-gradient(circle, rgba(244, 106, 37, .45) 0%, transparent 70%);
}
.fc-hero > *:not(.fc-hero-glow) { position: relative }
.fc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(251, 146, 60, .3); border-radius: 9999px; padding: 4px 12px;
  background: rgba(251, 146, 60, .1); color: #fdba74;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.fc-badge svg { width: 12px; height: 12px }
.fc-title { margin: 0; font-size: 60px; font-weight: 800; letter-spacing: -.025em; line-height: 1 }
.fc-gradient-text {
  background: linear-gradient(110deg, #fff 0%, #fff 40%, hsla(20, 90%, 65%, 1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fc-lead { max-width: 672px; margin: 0; color: rgba(255, 255, 255, .65); font-size: 15px; line-height: 1.6 }

/* ---- form ---- */
.fc-form { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 672px; margin-top: 4px }
.fc-field { position: relative; flex: 1 }
.fc-field > svg { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: rgba(255, 255, 255, .35); pointer-events: none }
.fc-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;
  transition: border-color .2s, box-shadow .2s;
}
.fc-input::placeholder { color: rgba(255, 255, 255, .3) }
.fc-input:focus { outline: none; border-color: rgba(251, 146, 60, .5); box-shadow: 0 0 0 3px rgba(251, 146, 60, .12) }
.fc-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 55px; border: 0; border-radius: 12px; padding: 16px 28px;
  background: #fb923c; color: #000; font-family: inherit;
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 8px 30px -8px rgba(251, 146, 60, .7);
  cursor: pointer; transition: box-shadow .2s, transform .1s;
}
.fc-submit svg { width: 16px; height: 16px }
.fc-submit:hover { box-shadow: 0 12px 40px -8px rgba(251, 146, 60, .9) }
.fc-submit:active { transform: scale(.98) }
.fc-submit:disabled { opacity: .6; cursor: progress }
.fc-example {
  border: 1px solid rgba(251, 146, 60, .3); border-radius: 4px; padding: 2px 8px;
  background: rgba(251, 146, 60, .06); color: #fdba74;
  font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.5;
  cursor: pointer; transition: background .15s;
}
.fc-example:hover { background: rgba(251, 146, 60, .12) }
.fc-error { color: #fca5a5; font-size: 13px }

/* ---- result ---- */
.fc-result { max-width: 768px; margin: 32px auto 0 }
.fc-card {
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 32px;
  background: linear-gradient(to bottom right, #15171c, #10141c, #0a0d0c);
}
.fc-item { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center }
.fc-item-image {
  position: relative; display: flex; aspect-ratio: 1; overflow: hidden; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px;
  background: linear-gradient(to bottom right, #15171c, #0a0d0c);
}
.fc-item-image img { width: 85%; height: 85%; object-fit: contain }
.fc-item-label { color: rgba(255, 255, 255, .4); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.fc-item-name { margin: 4px 0 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.fc-item-meta { margin-top: 4px; color: rgba(255, 255, 255, .45); font-size: 12px }
.fc-item-meta b { color: rgba(255, 255, 255, .75); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400 }

.fc-fade { margin-top: 24px }
.fc-fade-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.fc-fade-label { color: rgba(255, 255, 255, .4); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase }
.fc-tier {
  border: 1px solid; border-radius: 6px; padding: 3px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.fc-tier.t100 { border-color: rgba(61, 255, 158, .4); background: rgba(61, 255, 158, .18); color: #3dff9e }
.fc-tier.t95 { border-color: rgba(251, 146, 60, .4); background: rgba(251, 146, 60, .18); color: #fdba74 }
.fc-tier.t90 { border-color: rgba(239, 67, 67, .4); background: rgba(239, 67, 67, .18); color: #ef4343 }
.fc-tier.low { border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .6) }
.fc-value { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; color: #fff; font-size: 60px; font-weight: 800; line-height: 1 }
.fc-value span { color: rgba(255, 255, 255, .4); font-size: 28px; font-weight: 700 }
.fc-track { height: 12px; margin-top: 12px; overflow: hidden; border-radius: 9999px; background: rgba(255, 255, 255, .06) }
.fc-fill {
  height: 100%; width: var(--fill, 0); border-radius: 9999px;
  background: linear-gradient(90deg, #f46a25 0%, #ed2c2c 50%, #b447eb 100%);
  animation: fc-grow .8s cubic-bezier(.22, 1, .36, 1);
}
@keyframes fc-grow { from { width: 0 } to { width: var(--fill, 0) } }
.fc-note-line { margin: 12px 0 0; color: rgba(255, 255, 255, .4); font-size: 11px }

/* ---- payout call to action ---- */
.fc-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;
}
.fc-cta:hover { transform: translateY(-2px) }
.fc-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;
}
.fc-cta:hover .fc-cta-glow { opacity: .6 }
.fc-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;
}
.fc-cta:hover .fc-cta-sheen { transform: translateX(100%) }
.fc-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;
}
.fc-cta-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.fc-cta-copy { display: block; min-width: 0 }
.fc-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;
}
.fc-cta-badge svg { width: 10px; height: 10px }
.fc-cta-title { display: block; margin: 8px 0 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25 }
.fc-cta-title span { display: block; margin-top: 2px; color: rgba(255, 255, 255, .45); font-size: 13px; font-weight: 700 }
.fc-cta-note { display: block; margin: 4px 0 0; color: rgba(255, 255, 255, .55); font-size: 12.5px; line-height: 1.375 }
.fc-cta-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden;
  flex: none; 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;
}
.fc-cta:hover .fc-cta-button { box-shadow: 0 14px 42px -8px rgba(34, 197, 94, .9) }
.fc-cta-button svg { width: 16px; height: 16px; transition: transform .2s }
.fc-cta:hover .fc-cta-button svg { transform: translateX(2px) }

/* ---- known top seeds ---- */
.fc-section { margin-top: 48px; text-align: center }
.fc-section-title { margin: 0 0 24px; font-size: 24px; font-weight: 800 }
.fc-seed-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; text-align: left }
.fc-seed-card { border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 16px; background: #0a0c10 }
.fc-seed-title { margin-bottom: 8px; color: #fdba74; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase }
.fc-seed-row { margin-top: 8px }
.fc-seed-row-label { margin-bottom: 4px; color: rgba(255, 255, 255, .4); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase }
.fc-seed-chips { display: flex; flex-wrap: wrap; gap: 4px }
.fc-seed-chip {
  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: 10px; font-weight: 700;
}

/* ---- footer note ---- */
.fc-note {
  margin-top: 56px; border: 1px solid rgba(251, 146, 60, .2); border-radius: 16px; padding: 40px;
  background: linear-gradient(to bottom right, #1c1208, #0e0a06, #0a0d0c);
}
.fc-note h2 { margin: 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.025em }
.fc-note p { max-width: 576px; margin: 8px 0 0; color: rgba(255, 255, 255, .6); font-size: 14px; line-height: 1.6 }
.fc-note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.fc-note-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;
}
.fc-note-link svg { width: 14px; height: 14px; flex: none }
.fc-note-link:hover { background: rgba(251, 191, 36, .15) }
.fc-note-link.market { border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .08); color: #6ee7b7 }
.fc-note-link.market:hover { background: rgba(52, 211, 153, .15) }

/* ---- responsive ---- */
@media (max-width: 1250px) { .fc-seed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 1100px) {
  .fc-content { padding: 40px 24px }
  .fc-title { font-size: 44px }
  .fc-seed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 767px) {
  .fc-content { padding: 28px 12px }
  .fc-title { font-size: 32px }
  .fc-form { flex-direction: column; align-items: stretch }
  .fc-submit { width: 100% }
  .fc-item { grid-template-columns: 1fr }
  .fc-seed-grid { grid-template-columns: 1fr }
  .fc-cta-row { flex-direction: column; align-items: stretch; text-align: center }
  .fc-card, .fc-cta, .fc-note { padding: 20px }
  .fc-value { font-size: 44px }
}
@media (prefers-reduced-motion: reduce) { .fc-fill { animation: none } .fc-submit, .fc-cta { transition: none } }