/* SNS PHASE 7.1 - SNS PACE RATING */

.reference-pace-hero-actions{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.reference-track-block{
  margin:0 0 28px;
  padding:20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(19,24,32,.72);
  box-shadow:0 16px 40px rgba(0,0,0,.13);
}

.reference-track-block > h2{
  margin:0 0 14px;
}

.reference-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}

.reference-card{
  padding:16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:#171c24;
}

.reference-card.gtp{border-color:rgba(32,199,255,.34);}
.reference-card.gtd-pro{border-color:rgba(239,51,64,.40);}
.reference-card.gtd{border-color:rgba(56,181,74,.40);}

.reference-label{
  display:block;
  margin-top:12px;
  color:#9299a5;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.reference-time{
  display:block;
  margin-top:3px;
  font-family:Consolas,monospace;
  font-size:1.55rem;
  color:#fff;
}

.reference-source{
  display:block;
  margin-top:4px;
  color:#a8adb7;
  font-size:.82rem;
}

.sns-record{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#c7ccd4;
  font-size:.86rem;
}

.pace-gap{
  font-family:Consolas,monospace;
  font-weight:800;
}

.pace-gap.good{color:#60d77c;}
.pace-gap.close{color:#ffd166;}
.pace-gap.review{color:#ff7c86;}

.pace-tier{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  font-size:.70rem;
  font-weight:900;
  letter-spacing:.06em;
  white-space:nowrap;
}

.pace-tier.pro{
  color:#f4d8ff;
  border-color:rgba(191,99,255,.55);
  background:rgba(131,49,184,.22);
}

.pace-tier.elite{
  color:#fff0cb;
  border-color:rgba(255,179,55,.55);
  background:rgba(179,104,10,.20);
}

.pace-tier.competitive{
  color:#d8ffe1;
  border-color:rgba(56,181,74,.55);
  background:rgba(18,111,41,.20);
}

.pace-tier.sport{
  color:#d8f4ff;
  border-color:rgba(32,199,255,.50);
  background:rgba(20,111,168,.20);
}

.pace-tier.development{
  color:#d9dde3;
  border-color:rgba(180,186,196,.30);
  background:rgba(120,126,138,.14);
}

.pace-tier.none{
  color:#858c97;
  background:transparent;
}

.pace-range-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:0 0 16px;
}

.pace-range{
  padding:10px;
  border-radius:10px;
  background:#12171e;
  border:1px solid rgba(255,255,255,.07);
}

.pace-range strong{
  display:block;
  margin-bottom:4px;
}

.pace-range small{
  color:#9da4af;
  line-height:1.4;
}

.reference-help{
  margin:0 0 20px;
  padding:13px 15px;
  border-left:3px solid #e63946;
  border-radius:8px;
  background:rgba(230,57,70,.07);
  color:#b6bcc6;
  line-height:1.5;
}

.reference-table .lap-time{
  white-space:nowrap;
}

@media(max-width:950px){
  .pace-range-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:850px){
  .reference-card-grid{
    grid-template-columns:1fr;
  }

  .reference-track-block{
    padding:14px;
  }
}

@media(max-width:540px){
  .pace-range-grid{
    grid-template-columns:1fr;
  }
}