/* Paleta TAIVA (mesmos hex da barra do desktop e do Taiva Search). */
:root {
  --fundo: #071A33; --painel: #0B223F; --marca: #6FADE0; --texto: #FFFFFF;
  --suave: #A9C4DE; --borda: rgba(111,173,224,.25); --erro: #E0A3A3;
  --f0:#E0A3A3; --f1:#E0BE9E; --f2:#E0D89E; --f3:#B6D89E; --f4:#8FC7F5;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--fundo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px;
}
.topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--borda);
}
.marca { font-weight: 700; letter-spacing: .3px; }

.cartao {
  max-width: 26rem; margin: 3rem auto; background: var(--painel);
  border: 1px solid var(--borda); border-radius: 12px; padding: 1.6rem;
}
.cartao.larga { max-width: 44rem; }
h1 { font-size: 1.35rem; margin: 0 0 .3rem; }
.sub { color: var(--suave); margin: 0 0 1.2rem; font-size: .9rem; }
label { display: block; margin: .7rem 0; font-size: .85rem; color: var(--suave); }
input, select {
  width: 100%; margin-top: .25rem; padding: .6rem .7rem; font-size: 1rem;
  background: #0e2a4d; color: var(--texto); border: 1px solid var(--borda);
  border-radius: 7px;
}
input[type=range] { padding: 0; }
input[type=checkbox] { width: auto; margin: 0 .3rem 0 0; }

.btn {
  width: 100%; padding: .7rem; margin-top: .4rem; font-weight: 600; font-size: 1rem;
  background: var(--marca); color: var(--fundo); border: 0; border-radius: 7px; cursor: pointer;
}
.btn:hover { background: #8FC7F5; }
.btn.secundario { background: transparent; color: var(--marca); border: 1px solid var(--marca); }
.btn.disabled, .btn:disabled { opacity: .5; cursor: default; }
.btn-txt { background: none; border: 0; color: var(--marca); cursor: pointer; font-size: .85rem; padding: .3rem; }
.btn-txt.perigo { color: var(--erro); }
.alt { text-align: center; margin-top: 1rem; font-size: .85rem; color: var(--suave); }
.erro { color: var(--erro); font-size: .85rem; margin: .5rem 0 0; }

.barra-cofre { display: flex; gap: .6rem; margin-bottom: 1rem; }
.barra-cofre input { margin-top: 0; }
.barra-cofre .btn { width: auto; white-space: nowrap; margin: 0; }
.lista { list-style: none; margin: 0; padding: 0; }
.item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .3rem; border-bottom: 1px solid var(--borda);
}
.i-site { font-weight: 600; }
.i-user { color: var(--suave); font-size: .85rem; }
.acoes { display: flex; gap: .3rem; }
.vazio { color: var(--suave); text-align: center; padding: 2rem 0; }

dialog {
  background: var(--painel); color: var(--texto); border: 1px solid var(--borda);
  border-radius: 12px; padding: 1.4rem; max-width: 26rem; width: 92%;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.linha-senha { display: flex; gap: .3rem; align-items: center; }
.forca { height: 6px; background: #0e2a4d; border-radius: 3px; overflow: hidden; margin-top: .5rem; }
.forca span { display: block; height: 100%; width: 0; transition: width .2s; background: var(--marca); }
.forca span[data-nivel="0"] { background: var(--f0); }
.forca span[data-nivel="1"] { background: var(--f1); }
.forca span[data-nivel="2"] { background: var(--f2); }
.forca span[data-nivel="3"] { background: var(--f3); }
.forca span[data-nivel="4"] { background: var(--f4); }
.forca-txt { font-size: .8rem; color: var(--suave); margin: .3rem 0 0; min-height: 1em; }
.gerador { border: 1px solid var(--borda); border-radius: 8px; padding: .6rem .8rem; margin: 1rem 0; }
.gerador legend { color: var(--suave); font-size: .8rem; padding: 0 .3rem; }
.gerador .range { display: flex; align-items: center; gap: .5rem; }
.gerador .range input { flex: 1; }
.toggles { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; font-size: .82rem; }
menu { display: flex; justify-content: flex-end; gap: .5rem; padding: 0; margin: 1rem 0 0; }
menu .btn { width: auto; }
[hidden] { display: none !important; }

/* Saúde do cofre + selos */
.saude {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .7rem; margin-bottom: .8rem; font-size: .82rem; color: var(--suave);
  background: #0e2a4d; border: 1px solid var(--borda); border-radius: 7px;
}
.selo {
  display: inline-block; margin-left: .4rem; padding: .05rem .4rem; font-size: .7rem;
  border-radius: 4px; vertical-align: middle; font-weight: 600;
}
.sel-rep { background: rgba(224,216,158,.2); color: var(--f2); }
.sel-fraca { background: rgba(224,163,163,.2); color: var(--f0); }
.sel-vaz { background: var(--f0); color: var(--fundo); }
/* Selo padrão (features novas): estado de link/herança/etc. */
.selo:not([class*=" sel-"]):not([class^="sel-"]) {
  background: rgba(111,173,224,.18); color: var(--marca);
}

/* Navegação por abas do cofre (Estágio 3/4) */
.abas-cofre {
  display: flex; flex-wrap: wrap; gap: .3rem; margin: -.4rem 0 1.1rem;
  border-bottom: 1px solid var(--borda); padding-bottom: .6rem;
}
.abas-cofre .aba {
  background: none; border: 0; color: var(--suave); cursor: pointer;
  font-size: .88rem; padding: .4rem .6rem; border-radius: 6px;
}
.abas-cofre .aba:hover { background: #0e2a4d; }
.abas-cofre .aba.ativa { background: var(--marca); color: var(--fundo); font-weight: 600; }
.sec h2 { font-size: 1rem; margin: .2rem 0 .5rem; }

textarea {
  width: 100%; margin-top: .25rem; padding: .6rem .7rem; font-size: .95rem;
  background: #0e2a4d; color: var(--texto); border: 1px solid var(--borda);
  border-radius: 7px; font-family: inherit; resize: vertical;
}
.check { display: flex; align-items: center; color: var(--suave); font-size: .85rem; }
.linha-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.linha-form input { margin-top: 0; flex: 1; min-width: 8rem; }
.linha-form .btn { width: auto; margin: 0; white-space: nowrap; }
code { background: #0e2a4d; padding: .05rem .3rem; border-radius: 4px; font-size: .85em; }