/* ===== Base ===== */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
::selection { background: #a6dd00; color: #0f1411; }
body.locked { overflow: hidden; }

/* Navbar becomes solid on scroll */
#navbar.scrolled { background: rgba(15, 20, 17, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

/* ===== Hero ===== */
.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}

.float-a { animation: float 7s ease-in-out infinite; }
.float-b { animation: float 8s ease-in-out infinite -2s; }
.float-c { animation: float 6s ease-in-out infinite -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.bar { flex: 1; height: var(--h); background: #c8c2b0; border-radius: 4px 4px 0 0; transform-origin: bottom; animation: grow 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.bar-hi { background: #a6dd00; }
@keyframes grow { from { transform: scaleY(0); } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ===== Marquee ===== */
.marquee { animation: marquee 40s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ===== Filters ===== */
.filters-panel.open { transform: translateX(0); }
.filter-group { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid #ece8dc; }
.filter-group h4 { font-size: .875rem; font-weight: 600; margin-bottom: .7rem; }

.chip {
  border: 1px solid #ece8dc; background: #fff; border-radius: 999px;
  padding: .3rem .75rem; font-size: .8rem; transition: all .15s ease; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem;
}
.chip:hover { border-color: #131914; }
.chip.active { background: #131914; border-color: #131914; color: #fff; }

.seg { border-radius: .6rem; padding: .45rem 0; transition: all .15s ease; color: #49534a; }
.seg.active { background: #fff; color: #0f1411; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

.tier-row {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  border: 1px solid #ece8dc; background: #fff; border-radius: .75rem; padding: .55rem .8rem; font-size: .85rem; transition: all .15s ease;
}
.tier-row:hover { border-color: #131914; }
.tier-row.active { border-color: #131914; background: #131914; color: #fff; }
.tier-row.active .hint { color: #a6dd00; }

/* Range inputs */
.dual-range { position: relative; height: 24px; }
.dual-range .track { position: absolute; inset-inline: 0; top: 10px; height: 4px; border-radius: 4px; background: #ece8dc; }
.dual-range .fill { position: absolute; height: 100%; background: #131914; border-radius: 4px; }
.dual-range input { position: absolute; inset: 0; width: 100%; pointer-events: none; background: none; -webkit-appearance: none; appearance: none; }
.dual-range input::-webkit-slider-thumb { pointer-events: auto; }
.dual-range input::-moz-range-thumb { pointer-events: auto; }

.single-range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(to left, #131914 var(--p, 100%), #ece8dc var(--p, 100%)); }

.dual-range input::-webkit-slider-thumb,
.single-range::-webkit-slider-thumb {
  -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%;
  background: #a6dd00; border: 3px solid #131914; cursor: grab;
}
.dual-range input::-moz-range-thumb,
.single-range::-moz-range-thumb { height: 14px; width: 14px; border-radius: 50%; background: #a6dd00; border: 3px solid #131914; cursor: grab; }

.toggle { -webkit-appearance: none; appearance: none; width: 42px; height: 24px; border-radius: 999px; background: #c8c2b0; position: relative; cursor: pointer; transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle:checked { background: #131914; }
.toggle:checked::after { transform: translateX(-18px); background: #a6dd00; }

/* ===== Creator card ===== */
.card {
  background: #fff; border: 1px solid #ece8dc; border-radius: 1.25rem; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: cardIn .45s ease both; animation-delay: var(--d, 0ms);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(19, 25, 20, .35); border-color: #c8c2b0; }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.cover { position: relative; height: 92px; }
.cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, .15)); }

.avatar { position: relative; z-index: 1; background: #f2efe6; border: 4px solid #fff; }

.card.locked .lock-blur { filter: blur(6px); user-select: none; pointer-events: none; }
.card.locked .lock-hint { display: flex; }
.lock-hint { display: none; }
.user-menu { position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); min-width: 220px; background: #fff; color: #0f1411; border-radius: 1rem; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .35); padding: .4rem; z-index: 60; }
.user-menu a, .user-menu button { display: flex; width: 100%; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: .65rem; font-size: .85rem; text-align: start; }
.user-menu a:hover, .user-menu button:hover { background: #f2efe6; }
.swatch { display: inline-block; width: .85rem; height: .85rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex-shrink: 0; }
.chip.active .swatch { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.swatch-none { background: repeating-linear-gradient(45deg, #ece8dc 0 3px, #fff 3px 6px); }
.look-more summary { list-style: none; cursor: pointer; }
.look-more summary::-webkit-details-marker { display: none; }
.look-more[open] .look-chev { transform: rotate(180deg); }
.tt-embed { min-height: 180px; border-radius: 1rem; background: #fff; display: grid; place-items: center; overflow: hidden; }
.tt-embed blockquote > section { padding: 2rem; font-size: .85rem; color: #49534a; }
.save-btn.saved { background: #a6dd00; border-color: #a6dd00; color: #0f1411; }
.save-btn.pop { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.25); } }

.tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; background: #f2efe6; color: #49534a; }

.stat-mini { text-align: center; }
.stat-mini b { display: block; font-family: "Geist Mono", monospace; font-size: .95rem; }
.stat-mini span { font-size: .68rem; color: #49534a; }

.match {
  background: conic-gradient(#a6dd00 calc(var(--m) * 1%), #ece8dc 0);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
}
.match > span { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: "Geist Mono", monospace; font-size: .7rem; font-weight: 600; }

/* ===== Modal ===== */
.modal.flex .modal-card { animation: modalIn .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(40px); } }

.video-thumb { aspect-ratio: 9 / 16; border-radius: .9rem; position: relative; overflow: hidden; cursor: pointer; }
.video-thumb .play { opacity: 0; transition: opacity .2s; }
.video-thumb:hover .play { opacity: 1; }

.aud-bar { height: 8px; background: #ece8dc; border-radius: 99px; overflow: hidden; }
.aud-bar > div { height: 100%; background: #131914; border-radius: 99px; transform-origin: right; animation: grow-x 1s ease both; }
@keyframes grow-x { from { transform: scaleX(0); } }

.field-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }
.field { width: 100%; border: 1px solid #ece8dc; background: #fff; border-radius: .75rem; padding: .7rem .9rem; font-size: .9rem; }
.field:focus { outline: none; border-color: #131914; }

/* Drawer */
#drawer.open { transform: translateX(0); }

/* ===== Sections ===== */
.step { position: relative; border: 1px solid rgba(255, 255, 255, .08); background: #0f1411; border-radius: 1.5rem; padding: 2rem; transition: border-color .25s; }
.step:hover { border-color: rgba(166, 221, 0, .5); }
.step-icon { width: 1.5rem; height: 1.5rem; color: rgba(255, 255, 255, .35); transition: color .25s; }
.step:hover .step-icon { color: #a6dd00; }
.step-num { font-family: "Geist Mono", monospace; color: #a6dd00; font-size: .85rem; }
.step h3 { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 700; }
.step p { margin-top: .5rem; color: rgba(255, 255, 255, .55); line-height: 1.8; }

.plan { position: relative; background: #fff; border: 1px solid #ece8dc; border-radius: 1.5rem; padding: 2rem; display: flex; flex-direction: column; }
.plan h3 { font-weight: 700; color: #49534a; }
.plan .price { margin-top: .75rem; font-size: 2.25rem; font-weight: 700; }
.plan .price small { font-size: .85rem; font-weight: 400; color: #49534a; }
.plan ul { margin: 1.5rem 0; display: grid; gap: .6rem; font-size: .9rem; flex: 1; }
.plan li { display: flex; align-items: center; gap: .55rem; }
.plan li::before {
  content: ''; flex-shrink: 0; width: 1rem; height: 1rem; background: #8bbb00;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan-btn { display: block; text-align: center; border: 1px solid #131914; border-radius: .75rem; padding: .75rem; font-weight: 600; transition: all .2s; }
.plan-btn:hover { background: #131914; color: #fff; }
.plan-hi { background: #131914; color: #fff; border-color: #131914; transform: translateY(-8px); }
.plan-hi h3, .plan-hi .price small { color: rgba(255, 255, 255, .6); }
.plan-hi li::before { background: #a6dd00; }
.plan-hi .plan-btn { background: #a6dd00; color: #0f1411; border-color: #a6dd00; }
.plan-hi .plan-btn:hover { background: #c6f33f; }

/* Toast */
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}