/* Camada da versão de demonstração — carregada depois do app.css, sem alterá-lo.
   As alturas abaixo são só o valor inicial: o demo.js mede a faixa e a barra do
   topo de verdade e atualiza as duas variáveis. */
:root{--faixa-h:34px;--topbar-h:66px}

body{padding-top:var(--faixa-h)}

.demo-faixa{
  position:fixed;top:0;left:0;right:0;z-index:150;
  padding:7px 16px;text-align:center;
  background:rgba(5,9,15,.96);border-bottom:1px solid rgba(230,198,139,.28);
  color:rgba(255,255,255,.72);font-size:12px;line-height:1.4;letter-spacing:.02em;
}
.demo-faixa a{margin-left:6px;color:#E6C68B;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.demo-faixa a:hover{text-decoration:underline}

/* barras coladas no topo passam a colar abaixo da faixa */
.topbar{top:var(--faixa-h)}
.gal-topo{top:calc(var(--faixa-h) + var(--topbar-h))}

/* só faz sentido com os arquivos originais no computador */
.la[data-lb="original"]{display:none}

/* funções do álbum instalado, mostradas mas desligadas */
.mitem.demo-off{opacity:.45;cursor:not-allowed}
.mitem.demo-off small{color:#E6C68B}

/* créditos das fotos: botão discreto no rodapé e painel (lista gerada pelo montar_demo.py) */
.rodape p.demo-creditos-link{margin-top:14px;letter-spacing:.06em;text-transform:none}
.demo-creditos-link button{
  background:none;border:0;padding:10px 14px;cursor:pointer;
  font:inherit;font-size:11.5px;color:var(--muted-2,rgba(255,255,255,.5));
  text-decoration:underline;text-underline-offset:3px;
}
.demo-creditos-link button:hover,.demo-creditos-link button:focus-visible{color:#E6C68B}

.demo-creditos{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;
  background:rgba(3,6,10,.82);backdrop-filter:blur(14px);
}
.demo-creditos[hidden]{display:none}
.demo-creditos-caixa{
  position:relative;width:min(440px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  padding:28px 26px 24px;border-radius:14px;
  background:#0C1421;border:1px solid rgba(230,198,139,.28);color:rgba(255,255,255,.85);
}
.demo-creditos h3{margin:0 0 10px;font-size:18px;font-weight:500;color:#F3EFE6}
.demo-creditos p{margin:0 0 12px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.65)}
.demo-creditos ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.demo-creditos li a{display:block;padding:8px 0;font-size:14px;text-transform:capitalize}
.demo-creditos a{color:#E6C68B;text-decoration:underline;text-underline-offset:3px}
.demo-creditos-fechar{
  position:absolute;top:6px;right:8px;width:44px;height:44px;border:0;background:none;
  font-size:26px;line-height:1;color:rgba(255,255,255,.7);cursor:pointer;
}
.demo-creditos-fechar:hover{color:#fff}