:root {
  --fundo: #0b0714;
  --fundo-2: #150d26;
  --cartao: rgba(255, 255, 255, 0.045);
  --borda: rgba(255, 255, 255, 0.1);
  --texto: #f1ecfb;
  --suave: #a79bc2;
  --roxo: #8b5cf6;
  --roxo-2: #a78bfa;
  --rosa: #e879f9;
  --ok: #34d399;
  --erro: #f87171;
  --aviso: #fbbf24;
  --raio: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 600px at 20% -10%, #2a1458 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 110%, #4a1259 0%, transparent 55%), var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
p { margin: 0 0 .75rem; }
a { color: var(--roxo-2); }
.suave { color: var(--suave); }
.pequeno { font-size: .85rem; }

.layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.lateral {
  border-right: 1px solid var(--borda); padding: 1.25rem 1rem; background: rgba(8, 4, 16, .55);
  display: flex; flex-direction: column; gap: .25rem; position: sticky; top: 0; height: 100vh;
}
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem;
  margin-bottom: 1.25rem; cursor: pointer; }
.marca i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--roxo), var(--rosa)); font-style: normal; }
.marca b { color: var(--roxo-2); }
.lateral a.item { color: var(--suave); text-decoration: none; padding: .55rem .75rem; border-radius: 10px;
  display: block; }
.lateral a.item:hover { background: var(--cartao); color: var(--texto); }
.lateral a.item.ativo { background: rgba(139, 92, 246, .2); color: var(--texto); }
.lateral .rodape { margin-top: auto; }
.blogatual { font-size: .8rem; color: var(--suave); padding: 0 .75rem .75rem; }
.conteudo { padding: 2rem clamp(1rem, 4vw, 2.5rem); max-width: 1100px; width: 100%; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.25rem; backdrop-filter: blur(6px); }
.grade { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.contador b { display: block; font-size: 2rem; line-height: 1.1; }
.contador span { color: var(--suave); font-size: .85rem; }

label { display: block; font-size: .85rem; color: var(--suave); margin: .75rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=datetime-local], select, textarea {
  width: 100%; background: rgba(0, 0, 0, .35); color: var(--texto); border: 1px solid var(--borda);
  border-radius: 10px; padding: .65rem .8rem; font: inherit;
}
textarea { min-height: 90px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--roxo-2); outline-offset: 2px; }
.marcar { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; color: var(--texto); font-size: .92rem; }
.marcar input { accent-color: var(--roxo); width: 18px; height: 18px; }

button, .botao {
  background: var(--roxo); color: #fff; border: 0; border-radius: 10px; padding: .65rem 1.1rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover { filter: brightness(1.1); }
button.sec { background: var(--cartao); border: 1px solid var(--borda); color: var(--texto); }
button.mini { padding: .35rem .7rem; font-size: .82rem; }
button:disabled { opacity: .5; cursor: wait; }
.linha { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.espaco { height: 1rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--suave); font-weight: 500; font-size: .82rem; }
.selo { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font-size: .78rem;
  background: rgba(255, 255, 255, .08); }
.selo.ok { background: rgba(52, 211, 153, .15); color: var(--ok); }
.selo.erro { background: rgba(248, 113, 113, .15); color: var(--erro); }
.selo.aviso { background: rgba(251, 191, 36, .15); color: var(--aviso); }
.selo.rox { background: rgba(139, 92, 246, .2); color: var(--roxo-2); }

.escolha { text-align: left; cursor: pointer; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.25rem; color: var(--texto); }
.escolha:hover { border-color: var(--roxo); background: rgba(139, 92, 246, .1); }
.escolha h2 { margin-bottom: .35rem; }
.centro { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login { width: min(420px, 100%); }
.login .marca { justify-content: center; font-size: 1.4rem; }
iframe.previa { width: 100%; height: 480px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
#aviso { position: fixed; right: 1rem; bottom: 1rem; max-width: 380px; display: grid; gap: .5rem; z-index: 9; }
#aviso div { background: #1d1233; border: 1px solid var(--roxo); padding: .7rem 1rem; border-radius: 10px; }
#aviso div.erro { border-color: var(--erro); }

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0;
    border-bottom: 1px solid var(--borda); }
  .lateral .rodape, .blogatual { display: none; }
  .marca { width: 100%; margin-bottom: .5rem; }
}