/* ConectaFreela — estilos próprios (CSS puro).
   Os utilitários do Tailwind (flex, gap-2, text-sm...) continuam vindo do CDN no index.html. */

/* ===== Base ===== */
html{color-scheme:dark}
body{font-family:Inter,system-ui,sans-serif;
  background:radial-gradient(60% 420px at 50% 0,rgba(139,92,246,.22),transparent) no-repeat,#09090b}
select option{background:#16111f;color:#f4f4f5}

/* ===== Tipografia e marca ===== */
.h{font-family:'Inter Tight',Inter,sans-serif;font-weight:300;letter-spacing:-.04em}
.grad{background:linear-gradient(90deg,#9f7aea,#e4d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(135deg,#7c3aed,#c4b5fd);color:#16092e;font-weight:800}

/* ===== Botões: .b1/.b3 = primário em degradê roxo → lilás, .b2 = contorno ===== */
.b{border-radius:9999px;padding:.625rem 1.25rem;font-size:.875rem;line-height:1.25rem;font-weight:500;
  transition:all .15s cubic-bezier(.4,0,.2,1)}
.b:disabled{opacity:.4}
.b1,.b3{background:linear-gradient(135deg,#a78bfa,#dccbff);color:#16092e;box-shadow:0 0 30px -8px rgba(167,139,250,.7)}
.b1:hover,.b3:hover{filter:brightness(1.1)}
.b1::after{content:'→';margin-left:.6rem}
.b2{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#f4f4f5}
.b2:hover{background:rgba(255,255,255,.1)}

/* ===== Cards e painéis ===== */
.c{border-radius:1rem;border:1px solid rgba(196,181,253,.15);background:rgba(196,181,253,.06);padding:1rem;
  transition:all .15s cubic-bezier(.4,0,.2,1)}
.c:hover{border-color:rgba(196,181,253,.3)}
.panel{border-radius:2rem;border:1px solid rgba(196,181,253,.15);padding:1rem;
  background:linear-gradient(180deg,rgba(167,139,250,.08),rgba(167,139,250,.02))}
@media (min-width:768px){.panel{padding:2rem}}

/* ===== Formulários ===== */
.i{width:100%;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:#f4f4f5}
.i::placeholder{color:#71717a}
.i:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #a78bfa}

/* ===== Navegação e etiquetas ===== */
.t{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;color:#a1a1aa;border-radius:9999px;white-space:nowrap}
.t:hover{color:#fff}
.on{background:rgba(255,255,255,.1);color:#fff}
.g{display:inline-block;border-radius:9999px;padding:.125rem .625rem;font-size:.75rem;line-height:1rem;font-weight:500}