/* Pagina de loadouts de skins (usa as variaveis de site.css) */
/* site.css esconde o <main> ate o site.js marcar o body como "pronto"; esta pagina nao usa o site.js */
body:not(.pronto) main { opacity: 1; }
.lo-titulo { color: var(--mudo); font-size: .95rem; }
.lo-usuario { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lo-usuario img { border-radius: 50%; width: 30px; height: 30px; background: var(--campo); }
.lo-btn { display: inline-block; border: 0; border-radius: 10px; padding: 9px 16px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.lo-btn:hover { background: var(--accent-h); }
.lo-btn:disabled { opacity: .5; cursor: default; }
.lo-mudo { background: var(--campo); color: var(--texto); border: 1px solid var(--borda); }
.lo-mudo:hover { background: #20163a; }
.lo-perigo { background: #7f1d1d; }
.lo-perigo:hover { background: #991b1b; }
.lo-steam { background: #1b2838; border: 1px solid #66c0f4; color: #fff; padding: 12px 22px; }
.lo-steam:hover { background: #2a475e; }

.lo-entrada { max-width: 560px; margin: 12vh auto; padding: 0 16px; text-align: center; }
.lo-entrada h1 { margin: 0 0 12px; }
.lo-entrada p { color: var(--mudo); line-height: 1.5; margin: 0 0 22px; }

.lo-app { display: grid; grid-template-columns: 270px 1fr; gap: 18px; max-width: 1280px; margin: 18px auto; padding: 0 16px; align-items: start; }
.lo-lado, .lo-editor, .lo-vazio { background: var(--painel); border: 1px solid var(--borda); border-radius: 14px; padding: 16px; }
.lo-lado h2 { margin: 0 0 12px; font-size: 1.05rem; }
.lo-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.lo-lista button { width: 100%; text-align: left; background: var(--campo); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; font: inherit; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.lo-lista button.on { border-color: var(--accent); background: #24153f; }
.lo-lista .ativo { color: var(--ok); font-size: .8rem; font-weight: 700; }
.lo-novo { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.lo-novo input, .lo-barra input, .lo-picker-topo input, .lo-ajustes input[type=number] { background: var(--campo); color: var(--texto); border: 1px solid var(--borda); border-radius: 10px; padding: 9px 12px; font: inherit; min-width: 0; }
.lo-dica { color: var(--mudo); font-size: .85rem; margin: 12px 0 0; }
.lo-vazio { text-align: center; color: var(--mudo); }

.lo-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.lo-barra input { font-size: 1.1rem; font-weight: 600; flex: 1 1 200px; }
.lo-sujo { color: #fbbf24; font-size: .85rem; }
.lo-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-abas { display: flex; gap: 6px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; flex-wrap: wrap; }
.lo-abas button { background: none; border: 0; color: var(--mudo); padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
.lo-abas button.on { color: var(--texto); border-bottom-color: var(--accent); }

.lo-conteudo h3 { margin: 18px 0 10px; font-size: 1rem; color: var(--accent-h); }
.lo-conteudo h3:first-child { margin-top: 0; }
.lo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lo-card { background: var(--campo); border: 1px solid var(--borda); border-radius: 12px; padding: 10px; cursor: pointer; text-align: center; color: var(--texto); font: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 130px; }
.lo-card:hover { border-color: var(--accent); }
.lo-card.on { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
.lo-card img { width: 100%; height: 84px; object-fit: contain; background: transparent; }
.lo-card .n { font-size: .85rem; line-height: 1.25; }
.lo-card .sub { font-size: .75rem; color: var(--ok); }
.lo-semimg { height: 84px; display: grid; place-items: center; color: var(--mudo); font-size: .8rem; }
.lo-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.lo-picker { position: fixed; inset: 0; background: rgba(5, 3, 12, .8); display: grid; place-items: center; z-index: 50; padding: 12px; }
.lo-picker[hidden] { display: none; }
.lo-picker-caixa { background: #100a20; border: 1px solid var(--borda); border-radius: 16px; width: min(1000px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.lo-picker-topo { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.lo-picker-topo h3 { margin: 0; flex: 1 1 160px; }
.lo-picker-topo input { flex: 1 1 200px; }
.lo-ajustes { display: flex; gap: 16px; align-items: end; padding: 12px 16px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.lo-ajustes label { display: grid; gap: 6px; font-size: .85rem; color: var(--mudo); }
.lo-ajustes input[type=range] { width: 240px; accent-color: var(--accent); }
.lo-ajustes input[type=number] { width: 110px; }
.lo-picker .lo-grade { padding: 14px 16px; overflow-y: auto; }

.lo-aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #1d1336; border: 1px solid var(--borda); padding: 12px 18px; border-radius: 12px; z-index: 80; max-width: 92vw; }
.lo-aviso.erro { border-color: var(--erro); color: #fecaca; }
.lo-aviso.ok { border-color: var(--ok); }

@media (max-width: 820px) {
  .lo-app { grid-template-columns: 1fr; }
  .lo-duas { grid-template-columns: 1fr; }
  .lo-ajustes input[type=range] { width: 100%; }
}