/* =========================================================
   loading.css - página do criador de loading screens
   ========================================================= */
.ld-hero{padding-bottom:8px}
.ld-hero h1{max-width:22ch}
.ld-body{padding:20px 0 8px}

.ld-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:16px;align-items:start}
.ld-stage{position:sticky;top:14px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.ld-bar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(5,10,26,.5)}
.ld-tag{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:#FFC46B}
.ld-tag svg{width:14px;height:14px}
.ld-prog-wrap{display:flex;align-items:center;gap:8px}
.ld-prog-wrap .rng{width:110px}
.ld-prog-wrap b{font-family:'JetBrains Mono',monospace;font-size:11px;color:#FFC46B;min-width:34px;text-align:right}
.ld-frame-box{position:relative;width:100%;aspect-ratio:16/9;background:#050a16}
#ldFrame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ld-bar-bottom{padding:7px 11px;border-top:1px solid rgba(255,255,255,.06);background:rgba(5,10,26,.5)}
.ld-bar-bottom .small{font-size:11px}

.ld-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.ld-side .panel{padding:13px}
.ld-side .panel+.panel{margin-top:0}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bar-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:10px}
.inp.color{padding:2px;height:32px;cursor:pointer}
.ld-steps{padding:40px 0 8px}
.ld-faq{padding:28px 0 16px}

@media (max-width:980px){
  .ld-grid{grid-template-columns:1fr}
  .ld-stage{position:static}
}
@media (max-width:520px){
  .bar-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row3{grid-template-columns:1fr}
}

/* valor numérico ao lado do rótulo (separado para a tradução) */
.field .val,label+.val{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;font-size:11.5px;margin-left:6px}
.field{flex-wrap:wrap}