/* latest.css — controls styling (boxed PREV / PLAY / NEXT)
   Mode-aware: uses --accent-rgb and --glow from global style.css
*/

/* ---------- Shared Flow button styling (Latest page) ---------- */
.ff-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  margin-top: 18px;
}

.ff-btn,
.ff-play-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(245,247,250,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(245,247,250,0.86);
  border-radius: 999px;
  padding: 10px 18px;
  min-width: 96px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.ff-btn:hover,
.ff-play-btn:hover{
  border-color: rgba(var(--accent-rgb), .60);
  box-shadow: 0 0 18px var(--glow);
  transform: translateY(-1px);
}

.ff-btn:active,
.ff-play-btn:active{
  transform: translateY(0px) scale(.98);
}

.ff-play-btn{
  min-width: 140px;
  padding: 12px 28px;
  border-color: rgba(var(--accent-rgb), .38);
  background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), .16), rgba(0,0,0,.18) 70%);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .20);
}

/* Accessibility */
.ff-btn:focus-visible,
.ff-play-btn:focus-visible{
  outline: none;
  border-color: rgba(var(--accent-rgb), .75);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15), 0 0 18px var(--glow);
}

/* Small screens */
@media (max-width: 900px){
  .ff-controls{ gap: 12px; }
  .ff-btn{ min-width: 84px; padding: 10px 14px; }
  .ff-play-btn{ min-width: 120px; padding: 12px 22px; }
}