/* Shared auth UI (connect drawer + account menu). Always loaded from index.html and
   fully self-contained under the `pa-` namespace, so it renders identically on every
   surface — including /livestream, which doesn't load app.css. Uses only the global
   design tokens from styles.css. */

/* ---------- connect drawer ---------- */
.pa-overlay{
  position:fixed; inset:0; z-index:200; display:flex; justify-content:flex-end;
  background:rgba(2,3,7,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease-out,ease), visibility .2s var(--ease-out,ease);
}
.pa-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.pa-drawer{
  width:min(440px,93vw); height:100%; background:var(--ink-950,#05070D);
  border-left:1px solid var(--line,rgba(255,255,255,0.08));
  display:flex; flex-direction:column; box-shadow:-30px 0 80px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .26s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.pa-overlay.is-open .pa-drawer{ transform:none; }
@media (max-width:640px){ .pa-drawer{ width:100vw; border-left:0; } }
@media (prefers-reduced-motion: reduce){ .pa-overlay,.pa-drawer{ transition:none; } }

.pa-head{ display:flex; align-items:flex-start; gap:12px; padding:24px 24px 6px; }
.pa-head__txt{ flex:1; min-width:0; }
.pa-title{ margin:0; font-family:var(--font-display,inherit); font-weight:var(--w-bold,700);
  font-size:20px; color:var(--text-primary,#fff); }
.pa-sub{ margin:6px 0 0; font-size:13px; line-height:1.45; color:var(--text-tertiary,rgba(255,255,255,.55)); }
.pa-sub b{ color:var(--text-secondary,rgba(255,255,255,.7)); font-weight:600; }
.pa-close{ flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line,rgba(255,255,255,0.08)); border-radius:50%; background:transparent;
  color:var(--text-secondary,#bbb); cursor:pointer; transition:background .15s,color .15s; }
.pa-close:hover{ background:var(--ink-800,#131A2B); color:var(--text-primary,#fff); }
.pa-close svg{ width:16px; height:16px; }

.pa-body{ flex:1; overflow-y:auto; padding:14px 24px 22px; display:flex; flex-direction:column; gap:12px; }

/* email field */
.pa-email{ display:flex; align-items:center; gap:8px; padding:5px 5px 5px 14px;
  border:1px solid var(--line,rgba(255,255,255,0.08)); border-radius:var(--radius-md,12px);
  background:var(--surface-card,#131A2B); transition:border-color .15s,box-shadow .15s; }
.pa-email:focus-within{ border-color:var(--brand,#3172FF); box-shadow:var(--glow-brand-sm,0 0 0 3px rgba(49,114,255,.18)); }
.pa-email__ico{ flex:none; width:18px; height:18px; color:var(--text-tertiary,#8a93a6); display:flex; align-items:center; }
.pa-email__ico svg{ width:18px; height:18px; }
.pa-email__input{ flex:1; min-width:0; background:transparent; border:0; outline:none;
  color:var(--text-primary,#fff); font-family:var(--font-body,inherit); font-size:14px; padding:9px 0; }
.pa-email__input::placeholder{ color:var(--text-tertiary,#8a93a6); }
.pa-email__go{ flex:none; width:38px; height:38px; border-radius:10px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand,#3172FF);
  transition:background .15s,transform .15s,opacity .15s; }
.pa-email__go:hover:not(:disabled){ background:var(--brand-hover,#4A82FF); transform:translateX(1px); }
.pa-email__go:disabled{ opacity:.5; cursor:not-allowed; background:var(--ink-700,#222C42); color:var(--text-tertiary,#8a93a6); }
.pa-email__go svg{ width:18px; height:18px; }

/* OTP */
.pa-otp{ display:flex; gap:10px; }
.pa-otp__input{ flex:1; min-width:0; text-align:center; letter-spacing:.45em; font-size:18px; font-weight:700;
  color:var(--text-primary,#fff); background:var(--surface-card,#131A2B);
  border:1px solid var(--line,rgba(255,255,255,0.08)); border-radius:var(--radius-md,12px); padding:12px 10px; outline:none; }
.pa-otp__input:focus{ border-color:var(--brand,#3172FF); box-shadow:var(--glow-brand-sm,0 0 0 3px rgba(49,114,255,.18)); }
.pa-otp__input::placeholder{ color:var(--ink-500,#3D4961); letter-spacing:.45em; }
.pa-otp__actions{ display:flex; justify-content:space-between; gap:10px; margin-top:2px; }
.pa-link{ background:none; border:0; cursor:pointer; padding:4px 0; font-size:12.5px; font-weight:600;
  color:var(--soft-cornflower,#7CA2FF); }
.pa-link:hover{ text-decoration:underline; }
.pa-link:disabled{ color:var(--text-tertiary,#8a93a6); cursor:default; text-decoration:none; }

/* buttons */
.pa-btn{ flex:none; min-width:96px; border:0; border-radius:10px; cursor:pointer; padding:0 18px; height:42px;
  font-family:var(--font-display,inherit); font-weight:var(--w-bold,700); font-size:14px;
  display:flex; align-items:center; justify-content:center; }
.pa-btn--primary{ color:#fff; background:var(--brand,#3172FF); transition:background .15s; }
.pa-btn--primary:hover:not(:disabled){ background:var(--brand-hover,#4A82FF); }
.pa-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* divider */
.pa-or{ display:flex; align-items:center; gap:12px; color:var(--text-tertiary,#8a93a6);
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:var(--w-bold,700); margin:2px 0; }
.pa-or::before,.pa-or::after{ content:''; flex:1; height:1px; background:var(--line,rgba(255,255,255,0.08)); }

/* socials */
.pa-socials{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pa-social{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  color:var(--text-primary,#fff); border:1px solid var(--line,rgba(255,255,255,0.08));
  border-radius:var(--radius-md,12px); padding:14px 6px; background:var(--surface-card,#131A2B);
  transition:border-color .15s,background .15s,transform .15s; }
.pa-social:hover:not(:disabled){ border-color:var(--line-brand,rgba(49,114,255,.4)); background:var(--brand-softer,rgba(49,114,255,.07)); transform:translateY(-1px); }
.pa-social:disabled{ opacity:.55; cursor:not-allowed; }
.pa-social__ic{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.pa-social__ic svg{ width:22px; height:22px; }
.pa-social__name{ font-family:var(--font-display,inherit); font-weight:var(--w-bold,700); font-size:12.5px; }

/* wallet */
.pa-wallet{ display:flex; align-items:center; gap:12px; width:100%; cursor:pointer; text-align:left;
  color:var(--text-primary,#fff); border:1px solid var(--line,rgba(255,255,255,0.08));
  border-radius:var(--radius-md,12px); padding:14px; background:var(--surface-card,#131A2B);
  transition:border-color .15s,background .15s,transform .15s; }
.pa-wallet:hover:not(:disabled){ border-color:var(--line-brand,rgba(49,114,255,.4)); background:var(--brand-softer,rgba(49,114,255,.07)); transform:translateY(-1px); }
.pa-wallet:disabled{ opacity:.55; cursor:not-allowed; }
.pa-wallet__ic{ flex:none; width:22px; height:22px; color:var(--soft-cornflower,#7CA2FF); display:flex; align-items:center; }
.pa-wallet__ic svg{ width:20px; height:20px; }
.pa-wallet__name{ flex:1; font-family:var(--font-display,inherit); font-weight:var(--w-bold,700); font-size:14px; }
.pa-wallet__go{ width:16px; height:16px; color:var(--text-tertiary,#8a93a6); }

.pa-error{ margin:0; font-size:12.5px; color:#FF6B72; }
.pa-foot{ font-size:11px; color:var(--text-tertiary,#8a93a6); text-align:center; line-height:1.5; margin:0; padding:6px 24px 22px; }

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

/* ---------- account menu (connected state) ---------- */
.pa-acct{ position:relative; }
.pa-acct__trigger{ display:flex; align-items:center; gap:9px; cursor:pointer; height:40px; padding:0 12px 0 8px;
  border:1px solid var(--line,rgba(255,255,255,0.08)); border-radius:var(--radius-pill,999px);
  background:var(--surface-card,#131A2B); color:var(--text-primary,#fff);
  transition:border-color .15s,background .15s; }
.pa-acct__trigger:hover,.pa-acct__trigger.is-open{ border-color:var(--line-brand,rgba(49,114,255,.4)); background:var(--ink-800,#131A2B); }
.pa-acct__ava{ flex:none; width:26px; height:26px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff;
  background:linear-gradient(145deg,var(--brand,#3172FF),#7C4DFF); }
.pa-acct__ava img{ width:100%; height:100%; object-fit:cover; }
.pa-acct__ava--lg{ width:40px; height:40px; font-size:15px; }
.pa-acct__name{ font-family:var(--font-display,inherit); font-weight:var(--w-bold,700); font-size:13.5px; max-width:120px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pa-acct__chev{ width:15px; height:15px; color:var(--text-tertiary,#8a93a6); }

.pa-acct__menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:120; width:280px;
  background:var(--ink-900,#090C15); border:1px solid var(--line,rgba(255,255,255,0.08));
  border-radius:var(--radius-lg,16px); box-shadow:0 24px 60px rgba(0,0,0,.5); padding:8px;
  animation:pa-pop .16s var(--ease-out,ease); }
@keyframes pa-pop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.pa-acct__id{ display:flex; align-items:center; gap:11px; padding:10px 10px 12px; }
.pa-acct__idtxt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.pa-acct__uname{ font-family:var(--font-display,inherit); font-weight:var(--w-bold,700); font-size:14px; color:var(--text-primary,#fff);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pa-acct__email{ font-size:12px; color:var(--text-tertiary,#8a93a6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pa-acct__sec{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  color:var(--text-tertiary,#8a93a6); padding:6px 10px 4px; }
.pa-acct__wallet{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; }
.pa-acct__wallet:hover{ background:var(--ink-800,#131A2B); }
.pa-acct__net{ font-size:12px; font-weight:700; color:var(--text-secondary,#cfd5e0); min-width:46px; }
.pa-acct__addr{ flex:1; font-size:12px; color:var(--text-tertiary,#8a93a6); }
.pa-acct__copy{ flex:none; width:28px; height:28px; border:0; background:transparent; cursor:pointer;
  color:var(--text-tertiary,#8a93a6); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.pa-acct__copy:hover{ background:var(--ink-700,#222C42); color:var(--text-primary,#fff); }
.pa-acct__copy svg{ width:15px; height:15px; }
.pa-acct__act{ display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; margin-top:6px;
  border:0; background:transparent; border-radius:10px; padding:11px 10px; font-size:13.5px; font-weight:600;
  color:var(--text-primary,#fff); }
.pa-acct__act:hover{ background:var(--ink-800,#131A2B); }
.pa-acct__act svg{ width:16px; height:16px; }
.pa-acct__act--danger{ color:#FF6B72; }
.pa-acct__act--danger:hover{ background:rgba(255,107,114,.1); }

/* fallback connect button (only if DS Button unavailable) */
.pa-connect-fallback{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; height:40px; padding:0 16px;
  border:0; border-radius:var(--radius-pill,999px); background:var(--brand,#3172FF); color:#fff;
  font-family:var(--font-display,inherit); font-weight:700; font-size:14px; }
.pa-connect-fallback:hover{ background:var(--brand-hover,#4A82FF); }
.pa-connect-fallback svg{ width:16px; height:16px; }