/* Estilos compartidos por todas las páginas de SyncHub.
   La paleta es la de la marca: azul #5A7CFF sobre fondo profundo. */
:root {
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2a2f3a;
  --txt:#e8eaed; --dim:#9aa3b2; --accent:#5A7CFF; --deep:#02314a;
  --ok:#3ecf8e; --warn:#f0b429; --bad:#f2555a;
  --radius:10px;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
a { color:var(--accent); }
.wrap { max-width:1100px; margin:0 auto; padding:28px 20px 60px; }
.brand { font-size:21px; font-weight:700; letter-spacing:-.3px; text-decoration:none; color:var(--txt); }
.brand span { color:var(--accent); }
.muted { color:var(--dim); font-size:13px; }
.card {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; margin-bottom:18px;
}
h2 { font-size:15px; margin:0 0 16px; font-weight:600; letter-spacing:.02em; }
label { display:block; font-size:12px; color:var(--dim); margin-bottom:5px; }
input, select {
  width:100%; padding:9px 11px; background:var(--panel2); color:var(--txt);
  border:1px solid var(--line); border-radius:7px; font-size:14px; font-family:inherit;
}
input:focus, select:focus { outline:none; border-color:var(--accent); }
.grid { display:grid; gap:13px; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:700px){ .g2,.g3 { grid-template-columns:1fr; } }
button, .btn {
  display:inline-block; background:var(--accent); color:#fff; border:0; padding:10px 18px;
  border-radius:7px; font-size:14px; font-weight:600; cursor:pointer;
  font-family:inherit; text-decoration:none; text-align:center;
}
button:hover, .btn:hover { filter:brightness(1.1); }
button.ghost, .btn.ghost { background:transparent; border:1px solid var(--line); color:var(--dim); }
.err { color:var(--bad); font-size:13px; margin-top:9px; min-height:18px; }

/* Avisos. El panel redefine estas mismas clases en su propio <style>, que va
   después de esta hoja y por lo tanto gana: acá están para las páginas sueltas
   —login, restablecer, verificado— que no cargan aquel bloque. */
.alert { padding:10px 13px; border-radius:7px; font-size:13.5px; line-height:1.55; }
.alert.critical { background:rgba(242,85,90,.12);  border-left:3px solid var(--bad); }
.alert.warning  { background:rgba(240,180,41,.12); border-left:3px solid var(--warn); }
.alert.good     { background:rgba(62,207,142,.12); border-left:3px solid var(--ok); }
.hide { display:none; }
.note { font-size:12.5px; color:var(--dim); margin-top:14px; line-height:1.5; }

/* Barra superior común a portada, login y vinculación */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:26px;
}
.topbar nav { display:flex; align-items:center; gap:14px; }

footer.site {
  border-top:1px solid var(--line); margin-top:46px; padding-top:18px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:var(--dim);
}