* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:#111; color:#fff; min-height:100vh;
  padding:20px 16px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:18px;
  max-width:520px; margin:0 auto;
}

header { display:flex; align-items:center; gap:12px; }
.logo-icon {
  width:40px; height:40px; background:#f2c811; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
h1 { font-size:18px; font-weight:700; }
header p { font-size:12px; color:#666; margin-top:2px; }
header .espaco { flex:1; }

.card {
  background:#1a1a1a; border:1px solid #2a2a2a; border-radius:14px;
  padding:18px; display:flex; flex-direction:column; gap:14px;
}
.card-title {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:#f2c811;
}

label { display:block; font-size:12px; color:#888; margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number] {
  width:100%; padding:13px; background:#111; border:1px solid #2a2a2a;
  border-radius:10px; color:#fff; font-size:16px; font-family:inherit;
}
input:focus { outline:none; border-color:#f2c811; }
input:disabled { opacity:.4; }

button {
  font-family:inherit; border:none; border-radius:10px; cursor:pointer;
  font-weight:600; transition:filter .15s; touch-action:manipulation;
}
button:active { filter:brightness(1.25); }
button:disabled { opacity:.35; cursor:not-allowed; }

.btn-principal { width:100%; padding:14px; background:#f2c811; color:#111; font-size:15px; }
.btn-secundario { padding:11px 14px; background:#222; color:#ccc; border:1px solid #2a2a2a; font-size:13px; }
.btn-fantasma { width:100%; padding:12px; background:transparent; color:#666; border:1px solid #2a2a2a; font-size:13px; }
.btn-perigo { padding:11px 14px; background:#3a1010; color:#e05; border:1px solid #5a1515; font-size:13px; }

.dot { width:8px; height:8px; border-radius:50%; background:#555; flex-shrink:0; }
.dot.on  { background:#7fcf2a; box-shadow:0 0 8px #7fcf2a80; }
.dot.off { background:#e05; }

.aviso { padding:11px 13px; border-radius:10px; font-size:13px; line-height:1.45; display:none; }
.aviso.show { display:block; }
.aviso.ok   { background:#16240a; border:1px solid #7fcf2a; color:#a5e06a; }
.aviso.erro { background:#2a0e14; border:1px solid #e05;    color:#f58aa0; }
.aviso.info { background:#0e1a2a; border:1px solid #2a6fd0; color:#8ab8f5; }

.dica { font-size:12px; color:#666; line-height:1.6; }
.dica strong { color:#aaa; }

.codigo {
  font-family:ui-monospace,Consolas,monospace; font-size:14px;
  background:#111; border:1px solid #2a2a2a; border-radius:8px;
  padding:12px; word-break:break-all; color:#f2c811; line-height:1.5;
}

.oculto { display:none !important; }