/* ─────────────────────────────────────────────────────────────
   Écran « track » — Flow 12 · Track my Buzz, onglet Buzzers
   (Figma 1:11116, 390 × 922 ramené à 390 × 844 : bloc Conversions retiré)
   Coordonnées Figma, tout en absolu dans le .scr de 390 × 844.
   ───────────────────────────────────────────────────────────── */
.phone .scr.scr--track{background:#050505} /* bat .phone .scr de phone.css */
.scr--track p{margin:0}

/* en-tête */
.scr--track .tk-back{position:absolute;left:16px;top:40px;width:40px;height:40px;border-radius:999px;
  background:rgba(143,148,158,.08);border:1px solid rgba(143,148,158,.18)}
.scr--track .tk-back svg{position:absolute;left:14px;top:9px;width:10px;height:20px;transform:rotate(180deg)}
.scr--track .tk-title{position:absolute;left:95px;top:50px;width:200px;height:25px;font-size:21px;font-weight:700;
  letter-spacing:-.6176px;line-height:normal;text-align:center;white-space:nowrap;color:#fff}

/* onglets */
.scr--track .tk-tab{position:absolute;top:100px;width:130.333px;height:21px;font-size:15px;font-weight:700;line-height:normal;
  text-align:center;color:#8f949e;white-space:nowrap}
.scr--track .tk-tab.is-on{color:#fff}
.scr--track .tk-uline{position:absolute;left:-.333px;top:129px;width:130px;height:2px;border-radius:2px;background:#fff}

/* rangée d'avatars */
.scr--track .tk-av{position:absolute;top:158.5px;width:48px;height:48px;border-radius:50%}
.scr--track .tk-av img,.scr--track .tk-row__av img{width:100%;height:100%;border-radius:50%}

/* indicateurs */
.scr--track .tk-kpi{position:absolute;top:230px;width:110px;height:52px;text-align:center}
.scr--track .tk-kpi__v{display:block;height:31px;font-size:24px;font-weight:900;letter-spacing:-.5px;line-height:normal;color:#fff;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.scr--track .tk-kpi__v span{display:inline-block;transform-origin:50% 60%}
.scr--track .tk-kpi__l{position:absolute;left:0;right:0;top:36px;font-size:12px;font-weight:400;line-height:normal;color:#8f949e;white-space:nowrap}

/* graphique « Clicks in real time » */
.scr--track .tk-chart__l{position:absolute;left:16px;top:318px;font-size:11px;font-weight:700;letter-spacing:.5px;line-height:normal;
  color:#8f949e;white-space:nowrap}
.scr--track .tk-bars{position:absolute;left:19px;top:346px;width:355px;height:48px}
.scr--track .tk-bar{position:absolute;bottom:0;width:22.25px;border-radius:3px 3px 0 0;
  background:linear-gradient(to bottom,#fe00f2,#a20d9c);box-shadow:0 -2px 8px rgba(254,0,242,.3);
  transform-origin:50% 100%;will-change:transform}

/* liste « Live buzzers » */
.scr--track .tk-live__l{position:absolute;left:16px;top:414px;font-size:16px;font-weight:700;line-height:normal;color:#fff;white-space:nowrap}
.scr--track .tk-dot{position:absolute;left:278px;top:421px;width:7px;height:7px}
.scr--track .tk-dot i,.scr--track .tk-dot b{position:absolute;inset:0;border-radius:50%;background:#00d4fe}
.scr--track .tk-dot b{opacity:0;animation:tk-ping 1.8s cubic-bezier(.2,.6,.3,1) infinite}
.scr--track .tk-dot i{animation:tk-glow 1.8s ease-in-out infinite}
.scr--track .tk-live__n{position:absolute;left:289px;top:417px;font-size:13px;font-weight:400;line-height:normal;color:#8f949e;white-space:nowrap}

.scr--track .tk-list{position:absolute;left:21px;top:447px;width:348px;height:353px}
.scr--track .tk-row{position:absolute;left:0;width:348px;height:61px}
.scr--track .tk-row__av{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%}
.scr--track .tk-row__hd{position:absolute;left:48px;top:0;height:20px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.scr--track .tk-row__hd p{font-size:15px;line-height:normal;white-space:pre}
.scr--track .tk-row__h{font-weight:700;color:#fff}
.scr--track .tk-row__t{font-weight:400;color:#8c949e}
.scr--track .tk-row__hd img{width:12.512px;height:13px;flex:none}
.scr--track .tk-row__s{position:absolute;left:48px;top:22px;height:20px;font-size:14px;font-weight:400;line-height:normal;
  color:rgba(255,255,255,.82);white-space:nowrap}
.scr--track .tk-row__c{position:absolute;left:48px;top:44px;height:17px;font-size:13px;font-weight:700;line-height:normal;
  color:#00d4fe;white-space:nowrap;transform-origin:0 55%;font-variant-numeric:tabular-nums}

/* boucles CSS : figées hors lecture, absentes en mouvement réduit */
.scr--track:not(.is-playing) .tk-dot b,.scr--track:not(.is-playing) .tk-dot i{animation-play-state:paused}
.scr--track.is-still .tk-dot b,.scr--track.is-still .tk-dot i{animation:none}

@keyframes tk-ping{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(2.9);opacity:0}
}
@keyframes tk-glow{
  0%,100%{opacity:1}
  50%{opacity:.7}
}
