:root {
  --cor-roxo: #5566F5;
  --cor-bg: #0B0E15;
  --cor-sidebar-esquerda: #131620;
  --cor-sidebar-direita: #0D1017;
  --cor-fundo-geral: #0E1119;
  --cor-cards: #181C24;
  --cor-icones: #97A1BB;
  --cor-vermelho: #D3363E;
  --cor-traco: #13171F;

  --cor-texto-principal: #E6E6EA;
  --cor-online: #3BA55D;

  --glass-border: rgba(255, 255, 255, 0.027);
  --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.034);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.034);

  --fonte-principal: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--fonte-principal);
}

body {
  background-color: var(--cor-bg);
  color: var(--cor-texto-principal);
}

.vidro {
  background-color: rgba(24, 28, 36, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}
/* Ícones locais de fallback: mantêm o mesmo tamanho dos ícones Phosphor do projeto. */
i[data-ph-fallback="1"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-style: normal;
  flex: 0 0 auto;
}
i[data-ph-fallback="1"] > .ph-fallback-svg {
  display: block;
  width: 1em;
  height: 1em;
  overflow: visible;
}