:root{
  --cor-fundo: #0B1437;
  --cor-fundo-card: #131E52;
  --cor-fundo-input: rgba(255,255,255,.05);
  --cor-texto: #F5F3EC;
  --cor-texto-suave: rgba(245,243,236,.68);
  --cor-borda: rgba(245,243,236,.14);
  --cor-acento: #DAB45B;
  --cor-acento-fundo: rgba(218,180,91,.16);
  --cor-primaria: #2D41D9;
  --cor-primaria-hover: #3E51EE;
  --cor-erro: #F6C4C0;
  --cor-erro-fundo: rgba(232,131,125,.14);
  --cor-disabled-fundo: rgba(255,255,255,.06);
  --cor-disabled-texto: rgba(245,243,236,.55);
  --cor-neutro-fundo: rgba(255,255,255,.08);
  --cor-borda-fraca: rgba(245,243,236,.06);
  --raio: 8px;
  --raio-pequeno: 6px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--fonte);
  background:var(--cor-fundo);
  color:var(--cor-texto);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.envelope{max-width:640px; margin:0 auto; padding:32px 20px 64px}
.envelope-estreito{max-width:400px}

h1,h2,h3{font-weight:800; line-height:1.25; margin:0 0 4px}
h1{font-size:1.55rem}
h2{font-size:1.05rem; font-weight:700; color:var(--cor-texto-suave); margin-bottom:20px}
h3{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--cor-texto-suave); font-weight:700; margin:0 0 10px;
}

p{margin:0 0 12px; color:var(--cor-texto-suave)}
a{color:var(--cor-acento)}

.card{
  background:var(--cor-fundo-card);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  padding:20px;
  margin-bottom:16px;
}

.badge{
  display:inline-block; padding:3px 12px; border-radius:999px;
  font-size:.76rem; font-weight:700; letter-spacing:.02em;
}
.badge-acento{background:var(--cor-acento-fundo); color:var(--cor-acento); border:1px solid rgba(218,180,91,.4)}
.badge-neutro{background:var(--cor-neutro-fundo); color:var(--cor-texto-suave); border:1px solid var(--cor-borda)}

label{display:block; margin-bottom:16px; font-size:.9rem; color:var(--cor-texto-suave)}
input, select{
  display:block; width:100%; margin-top:6px;
  padding:11px 12px; border-radius:var(--raio-pequeno);
  border:1px solid var(--cor-borda); background:var(--cor-fundo-input);
  color:var(--cor-texto); font-size:1rem; font-family:inherit;
}
input:focus, select:focus, button:focus, a.botao:focus{
  outline:2px solid var(--cor-acento); outline-offset:1px;
}

button, .botao{
  display:inline-block; background:var(--cor-primaria); color:#fff;
  border:none; border-radius:var(--raio-pequeno); padding:11px 20px;
  font-size:.92rem; font-weight:600; font-family:inherit;
  cursor:pointer; text-decoration:none; line-height:1.2;
}
button:hover, .botao:hover{background:var(--cor-primaria-hover)}

button.secundario, .botao.secundario{
  background:transparent; border:1px solid var(--cor-borda); color:var(--cor-texto);
}
button.secundario:hover, .botao.secundario:hover{border-color:var(--cor-acento)}

button:disabled{
  background:var(--cor-disabled-fundo);
  color:var(--cor-disabled-texto);
  border:1px solid var(--cor-borda);
  cursor:not-allowed;
}
button:disabled:hover{background:var(--cor-disabled-fundo)}

.grupo-botoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}

.erro{
  background:var(--cor-erro-fundo); border:1px solid rgba(232,131,125,.4);
  color:var(--cor-erro); padding:12px 14px; border-radius:var(--raio-pequeno);
  margin-bottom:20px; font-size:.9rem;
}

.auth-card{
  max-width:380px; margin:64px auto; padding:32px 28px;
  background:var(--cor-fundo-card); border:1px solid var(--cor-borda);
  border-radius:var(--raio);
}

.url-copiavel{
  display:flex; gap:8px; align-items:center;
  background:var(--cor-fundo-input); border:1px solid var(--cor-borda);
  border-radius:var(--raio-pequeno); padding:6px 6px 6px 12px; margin:10px 0 4px;
}
.url-copiavel input{
  flex:1; min-width:0; border:none; background:transparent;
  padding:4px 0; margin:0; color:var(--cor-texto); font-size:.85rem;
}
.url-copiavel input:focus{outline:none}
.url-copiavel button{padding:8px 14px; font-size:.82rem; flex-shrink:0}

table{width:100%; border-collapse:collapse; font-size:.88rem}
th{
  text-align:left; padding:8px 6px; border-bottom:1px solid var(--cor-borda);
  color:var(--cor-texto-suave); font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.04em;
}
td{padding:8px 6px; border-bottom:1px solid var(--cor-borda-fraca)}

@media (max-width:480px){
  .envelope{padding:20px 14px 48px}
  .auth-card{margin:32px auto; padding:24px 20px}
  h1{font-size:1.3rem}
  table{font-size:.82rem}
  th, td{padding:6px 4px}
  .card{padding:16px}
}

/* =========================================================================
   ESQUELETO DO PAINEL LOGADO (/painel e /painel/*): header fixo + menu
   lateral, os dois no mesmo azul-marinho do resto do chrome. A area de
   conteudo (onde a pessoa efetivamente trabalha) usa tema CLARO - texto
   escuro em fundo claro le melhor por muito tempo, publico do produto tem
   50+. Componentes (.card, button, table, .badge-*) sao escritos em cima
   das variaveis de :root; a classe .conteudo so redefine essas variaveis
   com valores claros, sem duplicar as regras dos componentes.
   ========================================================================= */

.app-header{
  position:fixed; top:0; left:0; right:0; height:60px;
  background:var(--cor-fundo); border-bottom:1px solid var(--cor-borda);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; z-index:30;
}
.app-header .marca{font-weight:800; font-size:1.05rem; color:var(--cor-texto); text-decoration:none}
.app-header .marca .acento{color:var(--cor-acento)}
.app-header .direita{display:flex; align-items:center; gap:14px}
.app-header .usuario{
  font-size:.85rem; color:var(--cor-texto-suave);
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.app-header select{width:auto; max-width:160px; margin:0; padding:6px 10px; font-size:.82rem}
.app-header form{margin:0}
.header-sair{display:none}

.app-menu{
  position:fixed; top:60px; left:0; bottom:0; width:200px;
  background:var(--cor-fundo); border-right:1px solid var(--cor-borda);
  display:flex; flex-direction:column; padding:16px 0; z-index:20;
}
.menu-item{
  display:block; padding:11px 20px; color:var(--cor-texto-suave);
  text-decoration:none; font-size:.9rem; font-weight:600;
  border-left:3px solid transparent;
}
.menu-item:hover{color:var(--cor-texto)}
.menu-item.ativo{
  color:var(--cor-acento); border-left-color:var(--cor-acento);
  background:rgba(218,180,91,.08);
}
.menu-rodape{margin-top:auto; padding-top:12px; border-top:1px solid var(--cor-borda)}
.menu-rodape form{padding:0 20px}
.menu-rodape button{width:100%}

.app-conteudo{
  margin-left:200px; padding-top:60px; min-height:100vh;
}
.app-conteudo.conteudo{
  --cor-fundo-card: #FFFFFF;
  --cor-fundo-input: #EFEDE5;
  --cor-texto: #1B2340;
  --cor-texto-suave: #5B5F82;
  --cor-borda: rgba(27,35,64,.12);
  --cor-borda-fraca: rgba(27,35,64,.07);
  --cor-neutro-fundo: rgba(27,35,64,.06);
  --cor-disabled-fundo: rgba(27,35,64,.06);
  --cor-disabled-texto: rgba(27,35,64,.4);
  background:#F4F2EC; color:var(--cor-texto);
}
.app-conteudo.conteudo a{color:var(--cor-primaria)}
.app-conteudo-in{max-width:760px; margin:0 auto; padding:32px 24px 64px}

.campo-config{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--cor-borda);
}
.campo-config:last-of-type{border-bottom:none}
.campo-config .rotulo{color:var(--cor-texto-suave); font-size:.85rem}
.campo-config .valor{font-weight:600; text-align:right}

.tab-bar{display:none}

@media (max-width:768px){
  .app-menu{display:none}
  .app-conteudo{margin-left:0}
  .app-conteudo-in{padding-bottom:88px}
  .header-sair{display:block}
  .app-header .usuario{display:none}

  .tab-bar{
    display:flex; position:fixed; bottom:0; left:0; right:0; height:60px;
    background:var(--cor-fundo); border-top:1px solid var(--cor-borda); z-index:20;
  }
  .tab-bar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; color:var(--cor-texto-suave); text-decoration:none;
    font-size:.68rem; font-weight:600;
  }
  .tab-bar a.ativo{color:var(--cor-acento)}
}