:root{
  --ink:#241726; --plum:#3D2436; --coral:#FF6F5E; --coral2:#FF8C7A; --gold:#D9A464;
  --text:#F4EAE4; --soft:rgba(244,234,228,.66); --line:rgba(244,234,228,.14);
  --card:#3A2331;
}
*{box-sizing:border-box;}
/* A class with display:flex beats the browser's [hidden] rule, so anything
   toggled with the hidden attribute needs this or it never actually hides. */
[hidden]{display:none !important;}
html,body{height:100%;}
/* Solid colourway base so the iOS safe areas / Safari chrome never flash white
   behind the app (the fixed-attachment gradient didn't paint into them). */
html{background:#3D2436;}
body{
  margin:0; color:var(--text); font-family:Manrope,-apple-system,Segoe UI,sans-serif;
  background:linear-gradient(180deg,#3D2436 0%,#341F2E 42%,#241726 100%);
  background-color:#241726;
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased; padding-top:env(safe-area-inset-top);
}

/* header - centred above the deck */
.top{display:flex;flex-direction:column;align-items:center;padding:16px 18px 10px;flex:none;text-align:center;}
.brand{font-family:Fraunces,serif;font-weight:600;font-size:26px;letter-spacing:-.01em;color:var(--coral);line-height:1;}
.brand span{color:var(--gold);margin-left:.18em;}
.tagline{margin-top:5px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);}
@media(max-height:680px){ .brand{font-size:22px;} .tagline{display:none;} }

/* "Liked Models" — its own row above the deck so it is actually findable */
.likesrow{flex:none;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:2px 16px 10px;}
.likesbtn{display:inline-flex;align-items:center;gap:9px;background:rgba(255,251,246,.07);
  border:1px solid rgba(255,140,122,.42);color:var(--text);border-radius:999px;
  padding:10px 22px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s;}
.likesbtn:hover{background:rgba(255,111,94,.18);border-color:var(--coral2);transform:translateY(-1px);}
.likesbtn .lh{color:var(--coral2);font-size:15px;line-height:1;}
.likesbtn .lc{background:var(--coral);color:#fff;border-radius:999px;min-width:21px;
  padding:2px 7px;font-size:11.5px;font-weight:800;line-height:1.35;}
/* Creator-only, so it is gold rather than coral — reads as "yours", not as
   another thing for fans to tap. It is an <a>, hence the reset. */
.biolink{text-decoration:none;border-color:rgba(217,164,100,.5);}
.biolink:hover{background:rgba(217,164,100,.18);border-color:var(--gold);}
.biolink .lh{color:var(--gold);}

/* on-card "Her links" overlay (socials only; swipe-right handles her page) */
.cardlinks-btn{position:absolute;top:30px;left:12px;z-index:7;display:inline-flex;align-items:center;gap:6px;
  background:rgba(20,10,18,.58);border:1px solid rgba(255,140,122,.5);color:var(--text);
  border-radius:999px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.cardlinks-btn:hover{background:rgba(255,111,94,.28);}
.cardlinks{position:absolute;inset:0;z-index:9;border-radius:22px;
  background:rgba(15,8,12,.84);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:flex;padding:18px 16px;text-align:center;overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* margin:auto centres the column when it fits and lets BOTH ends scroll into
   view when it does not — a plain justify-content:center clips the top on short
   phones, which is what pushed the links past the card edge. */
.cardlinks-in{margin:auto;display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:300px;}
.cardlinks-x{position:absolute;top:11px;right:11px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,251,246,.1);border:1px solid var(--line);color:var(--text);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.cardlinks-h{font-family:Fraunces,serif;font-weight:600;font-size:19px;color:var(--text);line-height:1.1;}
.cardlinks-sub{font-size:12px;color:var(--soft);margin:3px 0 13px;}
.cardlinks-list{display:grid;gap:8px;width:100%;max-width:280px;}
.cardlink{position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:rgba(255,251,246,.08);border:1px solid rgba(255,140,122,.45);color:var(--text);
  border-radius:12px;padding:11px 38px;font-weight:700;font-size:13.5px;
  transition:background .16s,border-color .16s;}
.cardlink:hover{background:rgba(255,111,94,.2);border-color:var(--coral2);}
.cardlink-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;color:var(--coral2);}
.cardlink-ic svg{width:18px;height:18px;display:block;}
.cardlink-mono{width:20px;height:20px;border-radius:50%;background:rgba(255,140,122,.22);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;}
.cardlinks-tip{margin-top:12px;max-width:280px;font-size:12px;line-height:1.45;color:var(--soft);
  background:rgba(217,164,100,.14);border:1px solid rgba(217,164,100,.4);border-radius:12px;padding:9px 13px;}
.cardlinks-tip b{color:var(--gold);}
.cardlinks-back{margin-top:12px;background:rgba(255,251,246,.08);border:1px solid var(--line);
  color:var(--text);border-radius:999px;padding:9px 18px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:background .16s,border-color .16s;}
.cardlinks-back:hover{background:rgba(255,111,94,.18);border-color:var(--coral2);}

/* first-visit coach hint — teaches swipe-right, clears on the first swipe */
.coach{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:40;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:linear-gradient(135deg,#FF6F5E,#FF8C7A);color:#2a1420;font-weight:800;font-size:13.5px;
  padding:11px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(255,111,94,.5);
  animation:coachpop .3s ease both, coachnudge 1.6s ease-in-out .4s infinite;}
.coach b{font-size:15px;}
.coach-ar{font-size:16px;font-weight:900;}
@keyframes coachpop{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes coachnudge{0%,100%{transform:translateX(-50%) translateX(0);}50%{transform:translateX(-50%) translateX(6px);}}
@media (prefers-reduced-motion: reduce){ .coach{animation:coachpop .3s ease both;} }

/* liked-creators sheet */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(20,10,18,.72);backdrop-filter:blur(6px);
  overflow-y:auto;padding:24px 16px 40px;}
.sheet-in{max-width:640px;margin:0 auto;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sheet-head h2{font-family:Fraunces,serif;font-weight:600;font-size:24px;margin:0;}
.sheet-x{background:rgba(255,251,246,.08);border:1px solid var(--line);color:var(--text);
  width:38px;height:38px;border-radius:50%;font-size:16px;cursor:pointer;}
.likegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.likecard{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--card);aspect-ratio:9/16;}
.likecard img{width:100%;height:100%;object-fit:cover;display:block;}
.likecard .lshade{position:absolute;inset:auto 0 0 0;height:56%;
  background:linear-gradient(180deg,transparent,rgba(20,10,18,.9));}
.likecard .lmeta{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;}
.likecard .lmeta b{display:block;font-family:Fraunces,serif;font-weight:600;font-size:15px;line-height:1.15;}
.likecard .lmeta span{font-size:11.5px;color:rgba(255,255,255,.8);}
.likecard .lgo{position:absolute;inset:0;z-index:2;}
.likecard .lx{position:absolute;top:8px;right:8px;z-index:3;width:28px;height:28px;border-radius:50%;
  border:0;background:rgba(20,10,18,.66);color:#fff;font-size:13px;cursor:pointer;}
.likecard .lx:hover{background:var(--coral);}
.likecard .likelinks-btn{position:absolute;top:8px;left:8px;z-index:3;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,140,122,.5);background:rgba(20,10,18,.66);color:#fff;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.likecard .likelinks-btn:hover{background:rgba(255,111,94,.5);}

/* liked-card links drawer — a centred modal over the likes sheet */
.likelinks-modal{position:fixed;inset:0;z-index:70;border-radius:0;padding:22px;display:flex;
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
.likelinks-inner{position:relative;margin:auto;width:100%;max-width:360px;
  background:rgba(46,26,41,.96);border:1px solid var(--line);border-radius:20px;
  padding:32px 22px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.cardlink-primary{background:linear-gradient(135deg,var(--coral),var(--coral2));border-color:transparent;
  color:#2a1420;padding:14px 18px;margin-top:2px;}
.cardlink-primary:hover{filter:brightness(1.03);}
.likeempty{text-align:center;color:var(--soft);font-size:14px;padding:26px 10px;}

/* saved lists — a code so the likes survive losing this device's storage */
.savebox{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:center;}
.savenote{color:var(--soft);font-size:13px;margin:0 0 12px;line-height:1.5;}
.savenote b{color:var(--text);}
.saverow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.saverow .btn{padding:10px 18px;font-size:13.5px;}
.saveout{margin-top:16px;}
.codepill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:26px;
  letter-spacing:.22em;font-weight:600;color:var(--gold);background:rgba(0,0,0,.3);
  border:1px solid rgba(217,164,100,.4);border-radius:12px;padding:11px 20px 11px 26px;margin-bottom:12px;}
#list-code-input{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;
  color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:20px;letter-spacing:.18em;
  text-align:center;text-transform:uppercase;padding:11px 14px;width:190px;display:block;
  margin:0 auto 12px;}
#list-code-input:focus{outline:none;border-color:rgba(255,140,122,.65);
  box-shadow:0 0 0 3px rgba(255,111,94,.14);}
.savemsg{font-size:13px;margin:12px 0 0;min-height:16px;color:var(--gold);}
.savemsg.bad{color:#ffc0b5;}

/* undo toast — only ever shown while the likes sheet is open */
.undo{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:14px;background:#2a1420;border:1px solid var(--line);
  border-radius:999px;padding:11px 18px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.undo button{background:none;border:0;color:var(--coral2);font:inherit;font-weight:800;cursor:pointer;}

/* deck */
.stage{flex:1;position:relative;display:grid;place-items:center;padding:4px 10px;min-height:0;}

/* swipe-direction hints — huge condensed type that bleeds out from BEHIND the
   card (z-index below the deck), invisible at the card edge and fading to full
   opacity outward via a mask. Desktop effect (needs the side gutters). */
.swipehint{position:absolute;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;
  font-family:'Saira Condensed',Fraunces,serif;font-weight:700;line-height:.95;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(44px,10.2vh,115px);white-space:nowrap;user-select:none;transition:opacity .15s linear;}
.swipehint.r{left:calc(50% + min(210px,46vw) - 34px);text-align:left;color:var(--coral2);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 96px);
          mask-image:linear-gradient(to right,transparent 0,#000 96px);}
.swipehint.l{right:calc(50% + min(210px,46vw) - 34px);text-align:right;color:rgba(244,234,228,.92);
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 96px);
          mask-image:linear-gradient(to left,transparent 0,#000 96px);}
/* Phones have no side gutters, so the from-behind effect has nowhere to live. */
@media(max-width:760px){ .swipehint{display:none;} }
/* Fixed 9:16 phone-selfie frame. Height drives it so the card always fits the
   screen; width follows the ratio and is capped so it never gets silly-wide. */
.deck{position:relative;z-index:2;height:100%;aspect-ratio:9/16;width:auto;max-width:min(440px,96vw);margin:0 auto;}
.card{
  position:absolute;inset:0;border-radius:22px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.45);
  will-change:transform;touch-action:pan-y;user-select:none;
}
.card img,.card video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#241726;}
.card .shade{position:absolute;inset:auto 0 0 0;height:62%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(20,10,18,.92));}

/* ---------- VIP ---------- */
/* animated gradient ring drawn with a mask so it hugs the rounded corners */
.card.vip{animation:vipglow 2.8s ease-in-out infinite;}
.card.vip::before{
  content:"";position:absolute;inset:-5px;border-radius:27px;z-index:5;padding:5px;pointer-events:none;
  background:linear-gradient(115deg,#FF6F5E,#D9A464,#FFD9A0,#FF8C7A,#D9A464,#FF6F5E);
  background-size:320% 320%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:vipflow 5s linear infinite;
}
@keyframes vipflow{0%{background-position:0% 50%;}100%{background-position:320% 50%;}}
@keyframes vipglow{
  0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 26px rgba(255,111,94,.42);}
  50%    {box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 52px rgba(255,111,94,.75);}
}

/* the VIP badge, top-centre */
.viptag{
  position:absolute;top:30px;right:12px;z-index:6;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:linear-gradient(135deg,#FF6F5E,#D9A464);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  padding:6px 14px;border-radius:999px;box-shadow:0 5px 16px rgba(255,111,94,.55);
}
.viptag .h{font-size:12px;animation:beat 1.5s ease-in-out infinite;}
@keyframes beat{0%,100%{transform:scale(1);}28%{transform:scale(1.3);}45%{transform:scale(1);}}

/* hearts drifting up the edges */
.vhearts{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;border-radius:22px;}
.vhearts span{position:absolute;bottom:-24px;color:#FF8C7A;font-size:15px;opacity:0;
  filter:drop-shadow(0 0 6px rgba(255,111,94,.85));animation:vfloat 7s linear infinite;}
.vhearts span:nth-child(1){left:5%;animation-delay:0s;}
.vhearts span:nth-child(2){left:92%;animation-delay:1.4s;}
.vhearts span:nth-child(3){left:14%;animation-delay:3.2s;font-size:12px;}
.vhearts span:nth-child(4){left:83%;animation-delay:4.8s;font-size:18px;}
@keyframes vfloat{
  0%{transform:translateY(0) scale(.7);opacity:0;}
  12%{opacity:.85;}
  80%{opacity:.35;}
  100%{transform:translateY(-115%) scale(1.05);opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .card.vip,.card.vip::before,.viptag .h,.vhearts span{animation:none;}
  .vhearts span{opacity:.3;}
}

/* progress pips for the 5 teasers */
.pips{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:5px;z-index:3;}
.pips i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);}
.pips i.on{background:#fff;}

/* tap zones to move through a creator's images */
.nav{position:absolute;top:0;bottom:0;width:34%;z-index:2;}
.nav.l{left:0;} .nav.r{right:0;}

/* Name/@tag sit ABOVE the overlaid controls (which cover the card's bottom ~72px). */
.meta{position:absolute;left:0;right:0;bottom:84px;padding:0 18px;z-index:3;}
.meta h2{font-family:Fraunces,serif;font-weight:600;font-size:26px;margin:0;line-height:1.1;}
.meta .sub{color:rgba(255,255,255,.82);font-size:13.5px;margin-top:3px;font-weight:600;}
/* .plat (the platform pill) was removed from the card — the name of the
   destination was the last machine-readable clue on a page that otherwise
   carries no outbound link. Rule dropped with it. */

/* swipe verdict stamps */
.stamp{position:absolute;top:22px;z-index:4;font-family:Fraunces,serif;font-weight:700;font-size:26px;
  padding:7px 16px;border-radius:12px;border:3px solid;opacity:0;transform:rotate(-12deg);}
.stamp.y{left:18px;color:#6ee7a8;border-color:#6ee7a8;}
.stamp.n{right:18px;color:var(--coral2);border-color:var(--coral2);transform:rotate(12deg);}

/* controls — overlaid on the card's lower edge (the element lives INSIDE the
   stage). Being absolute frees its old row-height back to the stage, so the card
   grows; the buttons then sit over the photo, below the name/@tag, and the CTA
   row underneath tucks cleanly below the card. */
.controls{position:absolute;left:0;right:0;bottom:16px;z-index:8;
  display:flex;gap:20px;align-items:center;justify-content:center;pointer-events:none;}
.controls .cbtn{pointer-events:auto;}
/* Hidden (no deck yet, or empty state) — absolute, so nothing shifts. */
.controls[hidden]{display:flex !important;visibility:hidden;pointer-events:none;}
/* Hidden while the on-card "Her links" drawer is open (it would float over it). */
.controls.drawer-hidden{visibility:hidden;pointer-events:none;}
.cbtn{width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(20,10,18,.5);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  color:var(--text);font-size:24px;cursor:pointer;transition:transform .12s,background .2s,opacity .2s;}
.cbtn:hover{transform:translateY(-2px);}
.cbtn.yes{background:linear-gradient(135deg,var(--coral),var(--coral2));border-color:transparent;color:#fff;}
.cbtn.no{color:var(--soft);}
/* rewind — smaller, sits to the left like the others expect */
.cbtn.back{width:48px;height:48px;font-size:20px;color:var(--gold);margin-right:4px;}
.cbtn.back:disabled{opacity:.28;cursor:default;transform:none;}
.cbtn.back:not(:disabled):hover{background:rgba(217,164,100,.16);}

/* empty / loading */
.empty{text-align:center;max-width:340px;color:var(--soft);}
.empty h2{font-family:Fraunces,serif;font-weight:600;color:var(--text);font-size:22px;margin:6px 0;}
.bighe{font-size:40px;color:var(--coral);}
.btn{display:inline-block;margin-top:10px;background:linear-gradient(135deg,var(--coral),var(--coral2));
  color:#2a1420;font-weight:800;border:0;border-radius:999px;padding:12px 26px;font-size:14.5px;cursor:pointer;}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);font-weight:700;}
.btn.ghost:hover{background:rgba(255,251,246,.06);}
.emptybtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px;}

/* creator call-to-action, sits under the swipe buttons. Single flat row so the
   swipe card keeps its height — the two pills never wrap onto a second line. */
.ctarow{flex:none;display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;padding:12px 16px 0;}
.addbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  white-space:nowrap;flex:0 1 auto;min-width:0;
  background:rgba(255,111,94,.14);border:1px solid rgba(255,140,122,.5);color:var(--coral2);
  font-weight:700;font-size:13.5px;letter-spacing:.01em;padding:11px 24px;border-radius:999px;
  transition:background .18s,color .18s,transform .18s,box-shadow .18s;}
.addbtn:hover{background:rgba(255,111,94,.26);color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(255,111,94,.28);}
.addbtn .hh{font-size:14px;}
/* Discord "Growth Community" button — gold variant, sits beside "Add yourself" for everyone. */
.dbtn{background:rgba(217,164,100,.14);border-color:rgba(217,164,100,.5);color:var(--gold);}
.dbtn:hover{background:rgba(217,164,100,.26);color:#fff;box-shadow:0 6px 18px rgba(217,164,100,.28);}

.foot{flex:none;text-align:center;color:var(--soft);font-size:11.5px;padding:8px 16px calc(12px + env(safe-area-inset-bottom));}
.foot a{color:var(--coral2);font-weight:600;text-decoration:none;}

/* tighten up on short screens so the card keeps its room */
@media(max-height:680px){
  .cbtn{width:54px;height:54px;font-size:21px;}
  .cbtn.back{width:42px;height:42px;font-size:18px;}
  .controls{gap:16px;padding:10px 0 4px;}
  .likesrow{padding:0 16px 6px;}
  .likesbtn{font-size:12.5px;padding:8px 18px;}
  .ctarow{padding:8px 16px 0;}
  .addbtn{font-size:12.5px;padding:9px 20px;}
  .foot{font-size:10.5px;padding:6px 16px calc(10px + env(safe-area-inset-bottom));}
  .top{padding:12px 18px 6px;}
  /* on short phones the links drawer gets tighter still */
  .cardlinks-h{font-size:17px;}
  .cardlinks-sub{margin:2px 0 10px;}
  .cardlinks-list{gap:7px;}
  .cardlink{padding:9px 36px;font-size:13px;}
  .cardlinks-tip{margin-top:10px;padding:8px 12px;font-size:11.5px;}
  .cardlinks-back{margin-top:10px;padding:8px 16px;}
}

/* Phones: the two CTA pills become equal halves on one flat row (never stacked),
   wrapping their own text if needed, so the swipe card stays the focus and gets
   the reclaimed height. */
@media(max-width:480px){
  .ctarow{gap:8px;padding:8px 12px 0;}
  .addbtn{flex:1 1 0;justify-content:center;text-align:center;white-space:normal;
    line-height:1.15;font-size:12.5px;padding:10px 12px;gap:6px;}
  /* Give the card the maximum room: trim the header chrome so the photo is the
     focus (the card is height-driven, so every px reclaimed widens it too). */
  .top{padding:8px 16px 2px;}
  .brand{font-size:22px;}
  .tagline{display:none;}
  .likesrow{padding:0 16px 6px;}
  .stage{padding:2px 8px;}
}