/* 2026-10-20 • Entrar na equipe (login do convidado): fundo cósmico + cartões de vidro. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.tl{background:#050814;color:#f1f5f9;font:15px/1.5 "Plus Jakarta Sans",Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
.tl-sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 15% -10%,rgba(56,189,248,.28),transparent 60%),
    radial-gradient(900px 600px at 110% 20%,rgba(139,92,246,.30),transparent 60%),
    radial-gradient(800px 500px at 50% 120%,rgba(236,72,153,.20),transparent 60%),
    linear-gradient(180deg,#070b1a,#050814 60%,#03050d)}
.tl-sky:before,.tl-sky:after{content:"";position:absolute;inset:0;background-image:
    radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 72%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 44% 30%,#fff,transparent),radial-gradient(1px 1px at 63% 58%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 78% 22%,#fff,transparent),radial-gradient(1px 1px at 88% 80%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 6% 88%,#fff,transparent),radial-gradient(1px 1px at 52% 92%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 35% 48%,#fff,transparent),radial-gradient(1px 1px at 95% 45%,#fff,transparent);opacity:.7;animation:tl-twinkle 6s ease-in-out infinite alternate}
.tl-sky:after{transform:translate(3%,5%) scale(1.1);opacity:.45;animation-delay:-3s}
@keyframes tl-twinkle{from{opacity:.25}to{opacity:.8}}
@media (prefers-reduced-motion:reduce){.tl-sky:before,.tl-sky:after{animation:none}}

.tl-main{position:relative;z-index:1;width:min(560px,100%);margin:0 auto;padding:18px 16px 40px;display:grid;gap:14px}
.tl-top{display:flex;align-items:center;justify-content:space-between}
.tl-back{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:99px;background:rgba(11,18,32,.72);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:800;text-decoration:none;backdrop-filter:blur(10px)}
.tl-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tl-brand{font-weight:900;letter-spacing:.2em;font-size:18px}

.tl-card{background:rgba(11,18,32,.72);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:20px;backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.tl-hero{display:grid;gap:8px}
.tl-hero-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#38bdf8,#8b5cf6);box-shadow:0 10px 28px rgba(56,189,248,.45)}
.tl-hero-icon svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.tl-eyebrow{color:#38bdf8;font-weight:900;font-size:11px;letter-spacing:.2em;margin-top:4px}
.tl-hero h1{margin:0;font-size:clamp(30px,8vw,38px);line-height:1.08;font-weight:900;letter-spacing:-.02em}
.tl-hero p{margin:0;color:#b8c4d9;font-size:14px;line-height:1.55}

.tl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tl-steps li{display:grid;justify-items:center;gap:6px;text-align:center;padding:12px 8px;border-radius:18px;background:rgba(11,18,32,.72);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;line-height:1.3;backdrop-filter:blur(10px)}
.tl-step-ic{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(56,189,248,.16)}
.tl-step-ic svg{width:21px;height:21px;fill:none;stroke:#38bdf8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tl-step-ic b{position:absolute;top:-3px;right:-3px;width:17px;height:17px;border-radius:50%;background:#8b5cf6;color:#fff;font-size:10px;display:grid;place-items:center}

.tl-actions{display:grid;gap:10px}
.tl-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;border:0;border-radius:18px;background:#fff;color:#1f2937;font:inherit;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 12px 30px rgba(56,189,248,.35);transition:transform .12s,box-shadow .2s}
.tl-google svg{width:22px;height:22px}
.tl-google:hover{box-shadow:0 14px 36px rgba(56,189,248,.5)}
.tl-google:active{transform:scale(.98)}
.tl-continue{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 14px;border-radius:20px;border:1.5px solid transparent;background:linear-gradient(rgba(11,18,32,.85),rgba(11,18,32,.85)) padding-box,linear-gradient(135deg,#22c55e,#0ea5e9) border-box;color:#fff;font:inherit;text-align:left;cursor:pointer}
.tl-continue .tl-av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#22c55e,#0ea5e9);font-weight:900;font-size:19px}
.tl-continue small{display:block;color:#b8c4d9;font-size:12px}
.tl-continue strong{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-continue .tl-arrow{margin-left:auto;font-size:20px;opacity:.85}

.tl-status:empty{display:none}
.tl-status{padding:12px 14px;border-radius:16px;background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.4);color:#fff;font-size:13.5px;white-space:pre-line}
.tl-status.error{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.5);color:#fecaca}

.tl-teams{display:grid;gap:12px}
.tl-teams-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.tl-teams h2{margin:0;font-size:20px;font-weight:900}
.tl-chip{padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#b8c4d9;font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-team-list{display:grid;gap:10px}
.tl-team{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border-radius:22px;border:1.5px solid transparent;background:linear-gradient(rgba(11,18,32,.9),rgba(11,18,32,.9)) padding-box,linear-gradient(135deg,var(--c1),var(--c2)) border-box;color:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 10px 26px color-mix(in srgb,var(--c1) 30%,transparent);transition:transform .12s}
.tl-team:active{transform:scale(.985)}
.tl-team .tl-team-av{width:52px;height:52px;flex:0 0 52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2));font-weight:900;font-size:24px}
.tl-team strong{display:block;font-size:17px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-team small{display:block;color:#b8c4d9;font-size:12px}
.tl-team .tl-go{margin-left:auto;width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:20px}
.tl-team>span:nth-child(2){min-width:0;flex:1}
.tl-ghost{min-height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#e2e8f0;font:inherit;font-weight:800;cursor:pointer}

.tl-note{display:flex;gap:8px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.35);color:#b8c4d9;font-size:12.5px;line-height:1.45}
.tl-note svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2}

button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible{outline:3px solid #a7cfff;outline-offset:3px}
[hidden]{display:none!important}

/* Depois de conectado: some o topo (cabeçalho, passos e Google). Fica um "voltar" discreto. */
body.tl-connected .tl-hero,
body.tl-connected .tl-steps,
body.tl-connected #google,
body.tl-connected .tl-brand { display: none !important; }
body.tl-connected .tl-back { padding: 6px 4px; background: transparent; border-color: transparent; color: #b8c4d9; font-weight: 600; font-size: 13px; backdrop-filter: none; }
.tl-switch { justify-self: start; border: 0; background: transparent; color: #38bdf8; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 2px 4px; }