/* ============================================================
   studio-deck — extracted VERBATIM from standalone/influeri-studio.html
   (the creator-review deck, Figma 678-7217 + control bar 681-5).
   Every selector is scoped under .sd-root so the deck is isolated when
   mounted alongside the hero shell + results-ui on one page.
   The card + control bar + swipe/reveal animations are preserved exactly.

   Tokens are defined ON .sd-root (not global :root) so the component is
   self-contained and never depends on the host page's token set.
   ============================================================ */
.sd-root{
  --white:#ffffff;
  --primary:#0b0b0b;
  --text:#535353;
  --muted:#8a8a8f;
  --line:#ececec;
  --grad-fwd:linear-gradient(90deg,#0b0b0b 0%,#8a8a8a 100%);
  --pink:#0b0b0b;
  --gold:#8a8a8a;
  --navy:#11243d;
  --coral:#f9896b;
  --font-display:"Manrope",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --r-card:32px;
  --shadow-card:0 80px 180px -48px rgba(0,0,0,.28), 0 12px 28px -16px rgba(15,15,30,.2);

  position:relative;
  width:100%;
  font-family:var(--font-body);
  color:var(--primary);
}
.sd-root, .sd-root *{ box-sizing:border-box; }
.sd-root button{ font-family:inherit; }

/* ---------------- Deck ---------------- */
.sd-root .deck-wrap{position:relative;width:100%;max-width:1040px;margin:34px auto 86px;}
.sd-root .deck{position:relative;width:100%;height:clamp(700px,84vh,840px);}
.sd-root .deck__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;}

/* ============================================================
   CARD — faithful rebuild of the Figma creator-review card.
   ============================================================ */
.sd-root .card{
  position:absolute;inset:0;
  background:#fbfbfb;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);overflow:hidden;
  transform-origin:50% 0;will-change:transform,opacity,filter;
  -webkit-user-select:none;user-select:none;
}
.sd-root .card__inner{position:relative;height:100%;display:flex;flex-direction:column;}

/* top bar */
.sd-root .card__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:11px 16px 9px;}
.sd-root .card__close{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#6b6b73;background:transparent;border:0;}
.sd-root .card__close svg{width:14px;height:14px;}
.sd-root .btn-campaign{
  display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;font-size:13px;
  color:#fff;padding:7px 17px;border-radius:9px;background:var(--grad-fwd);
  box-shadow:0 8px 18px -10px rgba(11, 11, 11, .55);
}

/* body grid */
.sd-root .card__body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:270px 1fr;gap:0;padding:0 14px 14px;}

/* ---- left rail: target audience ---- */
.sd-root .aud{display:flex;flex-direction:column;gap:9px;min-height:0;overflow:hidden;padding-right:14px;}
.sd-root .aud__label{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin:0 0 1px 2px;}
.sd-root .panel{background:#fff;border:1px solid #eef0f2;border-radius:13px;padding:11px 13px;box-shadow:0 1px 2px rgba(16,24,40,.03);}
.sd-root .panel__h{font-size:13px;font-weight:600;color:#3a3a3a;margin:0 0 8px;}
.sd-root .panel__h.has-nav{display:flex;justify-content:space-between;align-items:center;}

/* gender gauge */
.sd-root .gauge-row{display:flex;align-items:center;gap:6px;}
.sd-root .gauge{display:block;width:122px;height:67px;flex:0 0 auto;}
.sd-root .gauge .gt{fill:none;stroke:#ededf0;stroke-width:9;stroke-linecap:round;}
.sd-root .gauge .gw{fill:none;stroke:var(--pink);stroke-width:9;stroke-linecap:round;}
.sd-root .gauge .gm{fill:none;stroke:var(--coral);stroke-width:9;stroke-linecap:round;}
.sd-root .legend{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#3a3a3a;}
.sd-root .legend span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.sd-root .legend i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.sd-root .legend .dw{background:var(--pink);}
.sd-root .legend .dm{background:var(--coral);}

/* distribution bars */
.sd-root .bar{display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:9px;margin:7px 0;}
.sd-root .bar__k{font-size:12px;font-weight:500;color:#5a5a5a;}
.sd-root .bar__t{height:7px;border-radius:99px;background:#f2f2f2;overflow:hidden;}
.sd-root .bar__t i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0b0b0b,#8a8a8a);transform-origin:left center;}
.sd-root .bar__v{font-size:12px;font-weight:500;color:#5a5a5a;text-align:right;}

/* similar profile mini card */
.sd-root .sim{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #eef0f2;border-radius:11px;padding:9px 11px;}
.sd-root .sim__ava{width:47px;height:47px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;font-family:var(--font-display);background-size:cover;background-position:center;overflow:hidden;}
.sd-root .sim__h{font-size:15px;font-weight:600;color:var(--navy);}
.sd-root .sim__s{font-size:13px;color:#8a8a8f;margin-top:2px;}
.sd-root .sim__nav{display:flex;gap:6px;}
.sd-root .chip-nav{width:23px;height:23px;border-radius:50%;border:1px solid #e2e2e6;background:#fff;display:grid;place-items:center;color:#9a9aa0;}
.sd-root .chip-nav svg{width:9px;height:9px;}

/* ---- right main ---- */
.sd-root .main{display:flex;flex-direction:column;gap:9px;min-height:0;}
/* head: flex row — photo-col | right-col */
.sd-root .head{background:#fff;border:1px solid #eef0f2;border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.03);display:flex;align-items:flex-start;gap:0;padding:16px 18px;}
/* left column: large rectangular photo + name + handle (stacked, centered) */
.sd-root .head__id{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:130px;padding-right:16px;border-right:1px solid #ededf0;}
.sd-root .head__ava{width:118px;height:152px;border-radius:14px;display:block;font-size:0;position:relative;overflow:hidden;background-size:cover;background-position:center;flex-shrink:0;}
.sd-root .head__name{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--navy);margin-top:0;line-height:1.2;text-align:center;}
.sd-root .head__handle{font-size:11px;color:#8a8a8f;margin-top:0;text-align:center;}
.sd-root .head__sep{display:none;}
/* right column: top row (stats + cred) + bottom row (bio + location) */
.sd-root .head__right{flex:1;display:flex;flex-direction:column;gap:12px;padding-left:16px;min-width:0;}
.sd-root .head__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #ededf0;}
.sd-root .head__btm{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
/* stats */
.sd-root .stats{display:flex;align-items:center;justify-content:space-around;flex:1;border-right:1px solid #ededf0;padding-right:14px;}
.sd-root .stat{text-align:center;}
.sd-root .stat__n{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;}
.sd-root .stat__l{font-size:12px;color:#8a8a8f;margin-top:5px;}
/* credibility ring */
.sd-root .cred{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;padding-left:14px;}
.sd-root .ring{width:57px;height:57px;flex:0 0 auto;}
.sd-root .ring .rb{fill:none;stroke:#f1f1f4;stroke-width:5;}
.sd-root .ring .rf{fill:none;stroke:var(--coral);stroke-width:5;stroke-linecap:round;}
.sd-root .ring__t{font-size:13px;font-weight:700;font-family:var(--font-display);fill:#1a1a1a;}
.sd-root .cred__l{font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--navy);white-space:nowrap;text-align:center;}

/* bio + location (now inside head__btm — .info kept as alias for compat) */
.sd-root .info,.sd-root .head__btm{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sd-root .info__card{background:#fff;border:1px solid #eef0f2;border-radius:14px;padding:13px 15px;min-width:0;box-shadow:0 1px 2px rgba(16,24,40,.03);}
.sd-root .info__h{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--navy);margin:0 0 7px;}
.sd-root .info__bio{font-size:13px;color:#5a5a5a;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sd-root .info__chips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
.sd-root .tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#0a66c2;background:#eef4fb;border:0;border-radius:6px;padding:3px 8px;}
.sd-root .tag.tag--plain{color:#5a5a5a;background:#f3f3f5;}
.sd-root .row{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin:5px 0;align-items:baseline;}
.sd-root .row span{color:#8a8a8f;}
.sd-root .row b{font-weight:600;color:var(--navy);text-align:right;}
.sd-root .row .price{font-family:var(--font-display);font-weight:700;color:var(--navy);}

/* paid collaborations + popular posts */
.sd-root .collabs{display:flex;flex-direction:column;flex:0 0 auto;}
.sd-root .collabs__h{display:flex;align-items:center;justify-content:space-between;margin:0 0 7px;}
.sd-root .collabs__h h4{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--navy);margin:0;}
.sd-root .collabs .grid{flex:none;height:108px;grid-template-rows:108px;}
.sd-root .posts{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;max-height:190px;}
.sd-root .posts__h{display:flex;align-items:center;justify-content:space-between;margin:0 0 7px;}
.sd-root .posts__h h4{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--navy);margin:0;}
.sd-root .posts__nav{display:flex;gap:6px;}
.sd-root .grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;gap:8px;}
/* top interest tags */
.sd-root .interests{display:flex;gap:6px;flex-wrap:wrap;}
.sd-root .interest-tag{background:#f5f5f5;border:1px solid #e8e8e8;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:500;color:#535353;}
.sd-root .tile{position:relative;border-radius:10px;overflow:hidden;min-height:0;background:#222 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);}
.sd-root .tile__cap{
  position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%) rotate(-2deg);text-align:center;
  font-family:var(--font-display);font-size:11px;font-weight:800;line-height:1.12;color:#fff;
  text-shadow:-1.4px -1.4px 0 #2a1466,1.4px -1.4px 0 #2a1466,-1.4px 1.4px 0 #2a1466,1.4px 1.4px 0 #2a1466,0 2px 4px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sd-root .tile__eng{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-around;gap:2px;padding:12px 4px 5px;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,0));color:#fff;font-size:9px;font-weight:600;}
.sd-root .tile__eng span{display:inline-flex;align-items:center;gap:2px;}
.sd-root .tile__eng svg{width:11px;height:11px;flex:0 0 auto;}

/* delivery package tab */
.sd-root .deliver{position:absolute;top:50%;right:-1px;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.03em;color:#6b6b73;background:#fff;border:1px solid #e8e8ec;border-right:0;border-radius:9px 0 0 9px;padding:16px 6px;box-shadow:-5px 0 14px -12px rgba(0,0,0,.4);}

/* ============================================================
   CONTROL BAR (Figma 681-5) — drives the deck. Bottom, on top.
   ============================================================ */
.sd-root .actions{
  position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:flex-start;gap:clamp(8px,1.4vw,18px);
  padding:15px 22px 13px;border-radius:38px;
  background:#d8d8db;
  box-shadow:0 24px 50px -20px rgba(15,15,30,.5), 0 6px 14px -8px rgba(15,15,30,.3), inset 0 1px 0 rgba(255,255,255,.55);
}
.sd-root .act{display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;}
.sd-root .act__c{
  width:clamp(48px,5vw,60px);height:clamp(48px,5vw,60px);border-radius:50%;background:#fff;
  display:grid;place-items:center;color:#1d1d1f;
  box-shadow:0 7px 16px -8px rgba(0,0,0,.45);
  transition:box-shadow .2s ease, background .2s ease;
  will-change:transform;
}
.sd-root .act:hover .act__c{box-shadow:0 11px 22px -8px rgba(0,0,0,.55);}
/* interactive:false — the bar is decoration: no pointer target, no hover tell.
   The press states below still run, because the film drives them itself. */
.sd-root--inert .actions{pointer-events:none;}
.sd-root--inert .act{cursor:default;}
.sd-root--inert .act:hover .act__c{box-shadow:0 6px 16px -8px rgba(0,0,0,.45);}
.sd-root .act__c svg{width:25px;height:25px;display:block;}
.sd-root .act__l{font-family:var(--font-display);font-size:clamp(13px,1.3vw,16px);font-weight:600;color:#2a2a2a;}
/* pressed feedback, synced to the swipe */
.sd-root .act.is-press .act__c{background:#f1f1f4;box-shadow:inset 0 4px 9px rgba(0,0,0,.22);}
.sd-root .act--like.is-press .act__c{background:#fff;box-shadow:0 0 0 4px rgba(237,61,127,.28), 0 10px 22px -8px rgba(237,61,127,.55);}
.sd-root .act--pass.is-press .act__c{background:#fff;box-shadow:0 0 0 4px rgba(108,116,132,.26), inset 0 3px 8px rgba(0,0,0,.16);}

/* ---------------- toast ---------------- */
.sd-root .toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);background:var(--primary);color:#fff;font-size:13px;font-weight:500;padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:90;box-shadow:0 16px 36px -16px rgba(0,0,0,.5);}
.sd-root .toast.is-show{opacity:1;transform:translate(-50%,0);}

/* ---------------- responsive ---------------- */
@media (max-width:880px){
  .sd-root .deck{height:auto;}
  .sd-root .card{position:relative;inset:auto;transform-origin:50% 50%;}
  .sd-root .card:not(.is-front){display:none;}
  .sd-root .card__body{grid-template-columns:1fr;gap:14px;}
  .sd-root .aud{overflow:visible;padding-right:0;border-bottom:1px solid #eef0f2;padding-bottom:14px;}
  .sd-root .grid{grid-template-columns:repeat(2,1fr);grid-template-rows:100px 100px;height:auto;}
  .sd-root .collabs .grid{height:auto;}
  .sd-root .deliver{display:none;}
  .sd-root .head__id{width:auto;padding-right:14px;}
  .sd-root .head__right{flex:1;}
  .sd-root .stats{border-right:1px solid #ededf0;}
}
@media (max-width:520px){
  .sd-root .grid{grid-template-columns:repeat(2,1fr);}
  .sd-root .head{flex-direction:column;align-items:stretch;}
  .sd-root .head__id{width:100%;flex-direction:row;border-right:none;border-bottom:1px solid #ededf0;padding-right:0;padding-bottom:12px;}
  .sd-root .head__ava{width:70px;height:90px;}
  .sd-root .head__name{text-align:left;}
  .sd-root .head__handle{text-align:left;}
  .sd-root .head__right{padding-left:0;padding-top:12px;}
  .sd-root .head__btm,.sd-root .info{grid-template-columns:1fr;}
  .sd-root .actions{gap:6px;padding:12px 12px 10px;}
  .sd-root .act__l{display:none;}
}