/* Tela de entrar do hub (todas as ferramentas), por cima de frame.css (o visual do protótipo da FrameaFrame STUDIO:
   fundo com auroras, cartão de vidro, a marca de três barras). A mais que o protótipo: o timecode correndo (pedido no
   briefing do Thiago), uma linha do tempo com a agulha e as três áreas do hub embaixo do cartão. */

.login { flex-direction: column; gap: 22px; display: flex; align-items: center; justify-content: center; }
.login-box { max-width: 448px; padding: 30px 32px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) inset; }
/* a borda do cartão acende onde o mouse está (como os cartões do hub) */
.login-box::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: .9;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, -40px), color-mix(in srgb, var(--accent-2) 80%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* topo do cartão: marca e timecode */
.lb-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 8px; margin-bottom: 14px; }
.login-box .lb-top .brand { justify-content: flex-start; margin: 0; font-size: 20px; }
.login-box .brand img { height: 30px; }
.tc { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 "JetBrains Mono", monospace; color: var(--muted);
  letter-spacing: .5px; font-variant-numeric: tabular-nums; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(10,10,13,.5); }
.tc .rec { width: 7px; height: 7px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: .25; } }

/* linha do tempo com a agulha, como a do progresso dos cursos */
.lb-tl { position: relative; height: 26px; margin: 0 0 24px; }
.lb-ruler { height: 8px; margin-bottom: 3px;
  background: repeating-linear-gradient(90deg, #5a5566 0 1px, transparent 1px 40px) bottom / 100% 8px no-repeat,
              repeating-linear-gradient(90deg, #34303f 0 1px, transparent 1px 8px) bottom / 100% 4px no-repeat; }
.lb-clips { display: flex; gap: 3px; height: 14px; }
.lb-clips span { flex: 1; border-radius: 3px; background: #241f2e; border: 1px solid #3a3446; transition: background .3s, border-color .3s; }
.lb-clips span.on { background: color-mix(in srgb, var(--accent) 70%, #000); border-color: var(--accent-2); }
.lb-head { position: absolute; top: 0; bottom: -2px; left: 0; width: 2px; background: #ff3b5c; will-change: transform; }
.lb-head::before { content: ""; position: absolute; top: -3px; left: -4px; border: 5px solid transparent; border-top: 6px solid #ff3b5c; border-bottom: 0; }

/* formulários */
.lp-form h1 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 8px; }
.lp-form h1 .hl { color: var(--accent-2); font-size: 1.12em; }
.lp-form > p:not(.form-err):not(.login-foot):not(.form-ok) { font-size: 13.5px; color: #cfcbd9; line-height: 1.6; margin-bottom: 20px; }
.lp-form h1 + .field, .lp-form h1 + .form-ok { margin-top: 20px; }
.lp-form h1 + p + .form-ok { margin-top: -6px; }
.lp-form .field label small { font-size: 11.5px; opacity: .8; }
.login-box .btn { margin-top: 6px; padding: 13px 22px; font-size: 14.5px; }
.login-box .btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 250% 100%; background-position: -150% 0; }
.login-box .btn:hover::after { opacity: 1; animation: shimmer 1s ease; }

.pw { position: relative; display: block; }
.pw input { padding-right: 78px; }
.pw-show { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 7px 9px; border-radius: 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.pw-show:hover { color: #fff; background: rgba(255,255,255,.07); }

.lp-remember { align-items: flex-start; margin: 2px 0 16px; cursor: pointer; color: #d8d5e0; }
.lp-remember input { width: 16px; height: 16px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.lp-remember span { display: grid; gap: 3px; }
.lp-remember small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.form-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: rgba(255,84,112,.1); border: 1px solid rgba(255,84,112,.35); color: #ffb3c1; font-size: 13px; line-height: 1.5; }
.form-ok { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: #fff; font-size: 13px; }
.login-foot { margin-top: 14px; text-align: center; color: var(--muted); font-size: 13px; }
.btn-link { color: #fff; font-weight: 600; font-size: 13px; padding: 6px 4px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-2) 60%, transparent); text-underline-offset: 3px; }
.btn-link:hover { color: var(--accent-2); }

/* as três áreas do hub, embaixo do cartão */
.login-spaces { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--muted); animation: pageIn .8s .5s both; }
.login-spaces .dot { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 70%, transparent); }

@media (max-width: 480px) {
  .login { padding: 16px; justify-content: flex-start; padding-top: max(28px, env(safe-area-inset-top)); }
  .login-box { padding: 24px 20px; }
  .login-box .lb-top .brand { font-size: 18px; }
  .tc { padding: 4px 6px; font-size: 10px; gap: 5px; letter-spacing: 0; }
  .tc .rec { width: 6px; height: 6px; }
  .tc .tc-hh { display: none; }   /* no celular o timecode mostra minutos, segundos e quadros */
  .lp-form h1 { font-size: 22px; }
  .lp-form .field input { font-size: 16px; }   /* o iPhone dá zoom em campos menores que 16 px */
}
@media (prefers-reduced-motion: reduce) {
  .lb-head, .tc .rec { animation: none; }
}