/* Viral lab - shared styles */
:root{
  --ink:#0a1320;
  --bg:#0b1624;
  --card:#0f1f33;
  --line:#1c2a3a;
  --muted:#8fa6bf;
  --accent:#21c1a5;
  --warn:#ff6b6b;
}

.viral-wrap{max-width:920px;margin:32px auto;padding:0 16px}
.viral-hero{display:grid;gap:12px;margin:8px 0 18px}
.viral-hero h1{font-size:28px;margin:0}
.viral-hero p{color:var(--muted);margin:0}

.vcard{
  background:linear-gradient(180deg,#0e1b2c,#0a1520);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  padding:16px;
  margin:14px 0;
}

.vrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.vrow input[type="text"],
.vrow input[type="url"],
.vrow textarea,
.vrow select{
  flex:1 1 260px;
  background:#0e1b2c;color:#eaf2ff;border:1px solid var(--line);
  border-radius:10px;padding:12px 12px;outline:0;
}
.vrow textarea{min-height:110px}

.btn-xl{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:12px;border:1px solid #194a42;
  background:var(--accent);color:#fff;font-weight:800;cursor:pointer;
}
.btn-ghost{background:#0f1f33;border:1px solid var(--line);color:#dfe9f6}
.btn-warn{background:var(--warn);border-color:#ff8c8c}
.small{font-size:13px;color:var(--muted)}

.center{display:flex;justify-content:center;align-items:center}

/* swipe deck */
.deck{position:relative;height:420px;margin:10px 0}
.card{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:#0d1b2b;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transform:translateY(8px) scale(.98);opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.card.active{opacity:1;transform:translateY(0) scale(1)}
.card img{width:100%;height:240px;object-fit:cover}
.card .meta{padding:12px}
.actions{display:flex;gap:10px;justify-content:center;margin-top:8px}
.actions .btn{width:44%;padding:12px 0;border-radius:12px;border:1px solid var(--line);background:#0f2235;color:#eaf2ff}
.actions .yes{background:#123f36;border-color:#1e6a5c}
.actions .no{background:#3a1620;border-color:#6a1e2f}

/* grid chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);padding:8px 10px;border-radius:999px;background:#0e1b2c;color:#dfe9f6;cursor:pointer}
.chip.active{background:#112f27;border-color:#1a6b5c}

/* result box */
.result{
  border:1px dashed #284058;border-radius:14px;padding:14px;background:#0b1828;color:#cfe2ff
}

/* subtle enter animation for CTA row */
.stagger > *{opacity:0;transform:translateY(16px) scale(.96)}
.animated .stagger > *{animation:popin .5s cubic-bezier(.17,.67,.42,1.37) forwards}
.animated .stagger > *:nth-child(1){animation-delay:.05s}
.animated .stagger > *:nth-child(2){animation-delay:.18s}
.animated .stagger > *:nth-child(3){animation-delay:.31s}
@keyframes popin{to{opacity:1;transform:translateY(0) scale(1)}}

/* mobile */
@media (max-width:1024px){
  .viral-hero h1{font-size:22px}
  .deck{height:400px}
}