.shared-account-backdrop { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 20px; background: rgba(20,28,23,.48); backdrop-filter: blur(7px); opacity: 0; transition: opacity .18s cubic-bezier(.22,1,.36,1); }
.shared-account-backdrop.is-open { opacity: 1; }
.shared-account-panel { width: min(480px,100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 30px; border: 1px solid var(--line,#e2e1d9); border-radius: 20px; background: var(--surface,#fffefa); color: var(--ink,#1f2923); box-shadow: 0 34px 100px rgba(20,28,23,.25); transform: translateY(10px) scale(.985); opacity: 0; transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .18s ease; }
.shared-account-backdrop.is-open .shared-account-panel { transform: translateY(0) scale(1); opacity: 1; }
.shared-account-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.shared-account-heading p { margin: 0 0 7px; color: var(--green-text,var(--green,#146b48)); font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.shared-account-heading h2 { margin: 0; font: 700 25px/1.15 Manrope,"DM Sans",sans-serif; letter-spacing: -.03em; }
.shared-account-close { width: var(--icon-control-size,40px); height: var(--icon-control-size,40px); padding: 0; display: grid; place-items: center; border: 1px solid var(--line-strong,#c7c7cc); border-radius: var(--control-radius,10px); background: var(--surface,#fff); color: var(--muted,#6f776f); cursor: pointer; transition: border-color var(--motion-fast,.16s ease), background var(--motion-fast,.16s ease), color var(--motion-fast,.16s ease), transform var(--motion-fast,.16s ease); }
.shared-account-close:hover { border-color: var(--line-hover,#aeaeb2); background: var(--surface-strong,#fff); color: var(--ink,#1f2923); transform: translateY(-1px); }
.shared-account-close:focus-visible { outline: 0; box-shadow: var(--focus-ring,0 0 0 3px rgba(23,107,77,.2)); }
.shared-account-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.shared-account-summary { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding-bottom: 18px; }
.shared-account-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft,#e6f0e9); color: var(--green-text,var(--green,#146b48)); font-size: 14px; font-weight: 800; }
.shared-account-identity { min-width: 0; display: grid; gap: 3px; }
.shared-account-identity strong, .shared-account-identity span, .shared-account-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-account-identity strong { font-size: 14px; }
.shared-account-identity span, .shared-account-identity small { color: var(--muted,#6f776f); font-size: .8rem; }
.shared-account-edit { min-height: 32px; padding: 0 10px; border: 1px solid var(--line,#e2e1d9); border-radius: 8px; background: transparent; color: var(--muted,#6f776f); font-size: .8rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; }
.shared-account-edit:hover { border-color: var(--green,#146b48); background: var(--green-soft,#e6f0e9); color: var(--green-text,var(--green,#146b48)); }
.shared-account-plan { padding: 14px 0; display: grid; gap: 4px; border-top: 1px solid var(--line,#e2e1d9); border-bottom: 1px solid var(--line,#e2e1d9); }
.shared-account-plan strong { font-size: 12px; }
.shared-account-plan span { color: var(--muted,#6f776f); font-size: 11px; line-height: 1.4; }
.shared-account-nav { display: grid; gap: 2px; padding: 8px 0; }
.shared-account-link { width: 100%; min-height: 62px; padding: 8px 12px; display: grid; grid-template-columns: 36px minmax(0,1fr) 20px; align-items: center; gap: 12px; border: 0; border-radius: 11px; appearance: none; background: transparent; color: var(--ink,#1f2923); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .16s ease, transform .16s cubic-bezier(.22,1,.36,1); }
.shared-account-link:hover { background: var(--surface-strong,#fff); transform: translateX(2px); }
.shared-account-link > span:nth-child(2) { min-width: 0; display: grid; justify-items: start; gap: 3px; text-align: left; }
.shared-account-link strong { font-size: .8rem; }
.shared-account-link small { overflow: hidden; color: var(--muted,#6f776f); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.shared-account-link-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--canvas,#f6f4ee); color: var(--green-text,var(--green,#146b48)); }
.shared-account-link-icon .ph { font-size: 18px; line-height: 1; }
.shared-account-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shared-account-link > svg:last-child { justify-self: end; }
.shared-account-chevron { color: var(--faint,#a3aaa2); }
.shared-account-footer { padding-top: 13px; display: grid; gap: 8px; border-top: 1px solid var(--line,#e2e1d9); }
.shared-account-theme, .shared-account-signout { width: 100%; min-height: 40px; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; }
.shared-account-theme { border: 1px solid var(--line,#e2e1d9); background: transparent; color: var(--muted,#6f776f); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.shared-account-theme:hover { border-color: var(--green,#146b48); background: var(--green-soft,#e6f0e9); color: var(--green-text,var(--green,#146b48)); }
.shared-account-theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shared-account-signout { border: 0; background: transparent; color: var(--muted,#6f776f); }
.shared-account-signout:hover { background: var(--surface-strong,#fff); color: var(--ink,#1f2923); }
.shared-account-trigger { flex: 0 0 auto; }
html[data-theme="dark"] .shared-account-backdrop { background: rgba(5,8,11,.72); }
@media (max-width: 520px) { .shared-account-backdrop { align-items: end; padding: 10px; } .shared-account-panel { width: 100%; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .shared-account-backdrop, .shared-account-panel, .shared-account-link { transition-duration: .01ms !important; } }