/* ── Sign out button, confirmation card and sign-out screen ── */
.lo-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
  box-shadow:var(--shadow-btn);transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease}
.lo-btn:hover{color:#B91C1C;background:#FEF2F2;border-color:#FECACA}
.lo-btn:active{transform:scale(.97)}
.lo-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.lo-door .lo-arrow{transition:transform .25s cubic-bezier(.3,.7,.3,1.3)}
.lo-btn:hover .lo-door .lo-arrow,.lo-confirm:hover .lo-door .lo-arrow{transform:translateX(3px)}
@media (max-width:640px){.lo-btn .lo-label{display:none}.lo-btn{padding:0 9px}}

.lo-pop{position:fixed;z-index:90;width:290px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);padding:16px}
.lo-pop[hidden]{display:none}
.lo-pop.is-open{animation:loPop .2s cubic-bezier(.2,.8,.3,1.2)}
@keyframes loPop{from{opacity:0;transform:scale(.92) translateY(-4px)}to{opacity:1;transform:none}}
.lo-pop-who{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-soft)}
.lo-pop-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-pop-sub{font-size:12px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lo-pop-title{font-weight:600;font-size:14px}
.lo-pop-text{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.lo-pop-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.lo-confirm{display:inline-flex;align-items:center;gap:6px;background:#DC2626;border:1px solid #DC2626;color:#fff}
.lo-confirm:hover{background:#B91C1C;border-color:#B91C1C}
.lo-confirm .lo-door{width:15px;height:15px}

/* full-screen goodbye: a dark circle grows from the button */
.lo-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 120% at 50% 40%,#1E3A8A 0%,#0F172A 55%,#020617 100%);
  clip-path:circle(0 at var(--lx,50%) var(--ly,0));transition:clip-path .7s cubic-bezier(.65,0,.35,1),opacity .45s ease}
.lo-screen[hidden]{display:none}
.lo-screen.is-on{clip-path:circle(150% at var(--lx,50%) var(--ly,0))}
.lo-screen.is-leaving{opacity:0}
.lo-screen-inner{text-align:center;opacity:0;transform:translateY(8px);transition:opacity .35s ease .3s,transform .35s ease .3s}
.lo-screen.is-on .lo-screen-inner{opacity:1;transform:none}
.lo-orb{width:92px;height:92px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;color:#BFDBFE;
  background:radial-gradient(circle at 35% 30%,rgba(96,165,250,.35),rgba(30,58,138,.25));border:1px solid rgba(147,197,253,.3);
  box-shadow:0 0 0 0 rgba(96,165,250,.45);animation:loPulse 1.4s ease-out infinite}
.lo-orb .lo-arrow{animation:loExit 1.1s cubic-bezier(.5,0,.3,1) infinite}
@keyframes loPulse{to{box-shadow:0 0 0 22px rgba(96,165,250,0)}}
@keyframes loExit{0%{transform:translateX(-4px);opacity:0}25%{opacity:1}70%{transform:translateX(5px);opacity:1}100%{transform:translateX(9px);opacity:0}}
.lo-screen-title{font-size:20px;font-weight:600;letter-spacing:-.01em}
.lo-screen-sub{margin-top:6px;color:#93C5FD;font-size:14px}

@media (prefers-reduced-motion:reduce){
  .lo-screen,.lo-screen-inner,.lo-pop.is-open,.lo-orb,.lo-orb .lo-arrow,.lo-door .lo-arrow{animation:none;transition:none}
}