/* Hyplab — design system compartilhado pelas páginas (site, entrar, painel). */
:root { --laranja:#FF8A3D; --rosa:#FF3D7F; --pink:#FF1F8E; --magenta:#D81BE8; --roxo:#1A0B2E; --creme:#F7F1E8; }
* { font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
html { scroll-behavior: smooth; }
body { background: #1A0B2E; }

.border-gradient { position: relative; }
.border-gradient::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  background: linear-gradient(225deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%);
}
.glass {
  background: linear-gradient(225deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(12px);
}

.grad-text {
  background: linear-gradient(100deg, #FF8A3D 0%, #FF3D7F 38%, #FF1F8E 62%, #D81BE8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@keyframes fadeSlideIn { 0% { opacity: 0; transform: translateY(28px); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }
.reveal { opacity: 0; }
.reveal.on { animation: fadeSlideIn .8s cubic-bezier(.22,.8,.3,1) both; }
.d1 { animation-delay: .08s } .d2 { animation-delay: .16s } .d3 { animation-delay: .24s }
.d4 { animation-delay: .32s } .d5 { animation-delay: .4s }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { animation: marquee 32s linear infinite; }

@keyframes floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
.floaty { animation: floaty 6s ease-in-out infinite; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.16) }

input, select, textarea { color-scheme: dark; }
select option { background: #251240; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px #1A0B2E inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
}

.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.2); border-top-color: #FF8FBE; border-radius: 50%; animation: spin .7s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* campos de formulário */
.campo {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: .75rem 1rem; font-size: .875rem; color: #fff; transition: all .2s;
}
.campo::placeholder { color: #525252; }
.campo:focus { outline: none; border-color: rgba(255,77,151,.4); box-shadow: 0 0 0 1px rgba(255,77,151,.6); }

/* botões */
.btn-branco {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; background: #fff; color: #171717; padding: .875rem 1.5rem;
  font-size: .875rem; font-weight: 600; transition: all .2s; border: 0; cursor: pointer;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.5) inset, 0 8px 30px rgba(255,31,142,.22);
}
.btn-branco:hover:not(:disabled) { transform: translateY(-2px); }
.btn-branco:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.85);
  padding: .875rem 1.5rem; font-size: .875rem; font-weight: 500; transition: all .2s;
  border: 1px solid rgba(255,255,255,.1); cursor: pointer; backdrop-filter: blur(12px);
}
.btn-glass:hover:not(:disabled) { transform: translateY(-2px); color: #fff; background: rgba(255,255,255,.09); }
.btn-glass:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* barra de cota */
.barra { height: 6px; border-radius: 9999px; background: rgba(255,255,255,.08); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #FF8A3D, #FF1F8E, #D81BE8); transition: width .6s cubic-bezier(.22,.8,.3,1); }