:root {
  --fundo: #14121c;
  --painel: #1d1a29;
  --painel-2: #262236;
  --borda: #34304a;
  --texto: #ecebf5;
  --texto-2: #a19fb8;
  --roxo: #8b5cf6;
  --ciano: #22d3ee;
  --verde: #22c55e;
  --amarelo: #eab308;
  --vermelho: #ef4444;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.4 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  user-select: none;
}

button, input, select { font: inherit; color: inherit; }

button {
  cursor: pointer;
  border: 1px solid var(--borda);
  background: var(--painel-2);
  border-radius: 8px;
  padding: 8px 12px;
}
button:hover:not(:disabled) { border-color: var(--roxo); }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ciano); outline-offset: 1px; }

.primario {
  background: linear-gradient(135deg, var(--roxo), var(--ciano));
  border: none;
  color: #0c0a14;
  font-weight: 600;
}
.perigo { background: #3a1820; border-color: #6b2232; }

input[type='text'], input[type='password'], input[type='url'], select {
  width: 100%;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
  user-select: text;
}

label { display: block; color: var(--texto-2); font-size: 12px; margin: 12px 0 4px; }

.erro { color: var(--vermelho); font-size: 13px; min-height: 18px; margin-top: 8px; }
.oculto { display: none !important; }

/* Interruptor */
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--texto); font-size: 14px; margin: 0; }
.interruptor input { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--borda); position: relative; cursor: pointer; flex: none; margin: 0; }
.interruptor input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--texto); transition: left 0.15s; }
.interruptor input:checked { background: var(--roxo); }
.interruptor input:checked::after { left: 19px; }