/* ═══════════════════════════════════════════════════════════════════════════
   vzn-profile-menu.css — el menu de perfil de la topbar.

   Extraido de design-canvas.html el 2026-09-07 (era la copia mas completa: es
   la unica que lleva "Projects & history" adentro del menu y el estado .here).
   Lo consumen los canvas: /design, /upgrade, /upscale. El markup lo inyecta
   js/vzn-profile-menu.js dentro de <div id="vzn-profile-slot">.

   ⚠️ Los botones se estilan solos a proposito: los canvas NO tienen la regla
      global button{background:none;border:0} — se saco porque pisaba a los
      controles del widget movido del home.
   ═══════════════════════════════════════════════════════════════════════════ */
.vzn-profile button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.vzn-profile{position:relative;display:inline-flex;align-items:center;gap:.5rem}
.vzn-profile[hidden],.vzn-profile-menu[hidden]{display:none!important}
.vzn-plan-badge{font-size:.54rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;background:rgba(202,130,98,.2);color:var(--gold-lt);border:1px solid rgba(202,130,98,.35)}
.vzn-plan-badge.free{background:rgba(255,255,255,.06);color:var(--muted);border-color:rgba(255,255,255,.12)}
.vzn-avatar-btn{width:38px;height:38px;border-radius:50%;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.18);background:rgba(202,130,98,.18);display:inline-flex;align-items:center;justify-content:center;transition:border-color .25s}
.vzn-avatar-btn:hover{border-color:var(--gold)}
.vzn-avatar-btn img{width:100%;height:100%;object-fit:cover;display:none}
.vzn-avatar-btn img.loaded{display:block}
.vzn-avatar-btn span{font-family:var(--serif);font-size:1.1rem;color:var(--gold-lt)}
.vzn-profile-menu{position:absolute;top:calc(100% + 14px);right:0;width:300px;background:rgba(20,18,14,.78);-webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:1.3rem;box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.08);z-index:200}
.vzn-pm-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem}
.vzn-pm-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;background:rgba(202,130,98,.18);display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16)}
.vzn-pm-avatar img{width:100%;height:100%;object-fit:cover;display:none}
.vzn-pm-avatar img.loaded{display:block}
.vzn-pm-avatar span{font-family:var(--serif);font-size:1.35rem;color:var(--gold-lt)}
.vzn-pm-name{font-size:.94rem;color:var(--fg);font-weight:500;line-height:1.3}
.vzn-pm-email{font-size:.74rem;color:var(--muted);word-break:break-all}
.vzn-pm-plan{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 1px rgba(255,255,255,.08);margin-bottom:.8rem}
.vzn-pm-plan-label{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vzn-pm-plan-val{font-size:.88rem;color:var(--gold-lt);font-weight:500}
.vzn-pm-upgrade{margin-left:auto;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);background:rgba(202,130,98,.2);box-shadow:inset 0 1px 1px rgba(230,173,142,.25);padding:.4rem .8rem;border-radius:999px;text-decoration:none;transition:background .25s}
.vzn-pm-upgrade:hover{background:rgba(202,130,98,.36)}
.vzn-pm-credits{margin-bottom:.9rem;padding:.7rem .9rem;border-radius:14px;background:rgba(255,255,255,.03);box-shadow:inset 0 1px 1px rgba(255,255,255,.06)}
.vzn-pm-credits-title{font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.vzn-pm-credit{display:flex;align-items:center;justify-content:space-between;padding:.28rem 0;font-size:.82rem}
.vzn-pm-credit span{color:var(--muted)}
.vzn-pm-credit b{font-weight:600;color:var(--gold-lt);font-variant-numeric:tabular-nums}
.vzn-pm-credit b.out{color:#e76f6f}
.vzn-pm-agents{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.vzn-pm-link{display:block;padding:.6rem .8rem;border-radius:12px;font-size:.8rem;color:var(--fg);text-decoration:none;background:rgba(255,255,255,.03);transition:background .2s}
.vzn-pm-link:hover{background:rgba(255,255,255,.07)}
.vzn-pm-link.here{background:rgba(202,130,98,.16);color:var(--gold-lt)}
.vzn-pm-signout{width:100%;padding:.6rem;border-radius:12px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.03);transition:color .2s,background .2s}
.vzn-pm-signout:hover{color:var(--fg);background:rgba(255,255,255,.07)}