.collection-share-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
  border: 0;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .3);
}

.collection-share-dialog::backdrop,
.public-share-dialog::backdrop,
.team-space-invite-dialog::backdrop,
.team-invitations-dialog::backdrop {
  background: rgba(15, 23, 42, .42);
  -webkit-backdrop-filter: blur(4px) saturate(.9);
  backdrop-filter: blur(4px) saturate(.9);
}

.collection-share-inner { display: grid; gap: 18px; padding: 22px; }
.collection-share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.collection-share-kicker { margin: 0 0 4px; color: var(--primary-strong); font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.collection-share-head h2 { margin: 0; color: var(--ink); font-size: 1.18rem; line-height: 1.28; }
.collection-share-copy { margin: -5px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.collection-share-card { display: grid; gap: 12px; padding: 15px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.collection-share-card strong { color: var(--ink); font-size: .96rem; }
.collection-share-card small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.collection-share-field { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.collection-share-field select,
.collection-share-url input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 80%, var(--bg)); color: var(--ink); font: inherit; }
.collection-share-field select { padding: 0 12px; }
.collection-share-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.collection-share-qr{display:grid;justify-items:center;gap:8px;padding:12px;border:1px dashed var(--line);border-radius:14px}.collection-share-qr img{width:190px;height:190px;background:#fff;padding:8px;border-radius:10px}.collection-share-qr small{color:var(--muted);font-size:.76rem}
.collection-share-url input { min-width: 0; padding: 0 12px; font-size: .8rem; }
.collection-share-updated{display:block;margin-top:-5px;color:var(--muted);font-size:.72rem;line-height:1.35}
.collection-share-url .ghost-btn { min-height: 44px; }
.collection-share-privacy { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: .77rem; line-height: 1.45; }
.collection-share-privacy i { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 5px; border-radius: 999px; background: #3b8ea5; box-shadow: 0 0 0 4px color-mix(in srgb, #3b8ea5 15%, transparent); }
.collection-share-status { min-height: 1.2em; margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.45; }
.collection-share-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.collection-share-actions .primary-action { min-height: 44px; }

.public-share-dialog {
  width: min(690px, calc(100vw - 24px));
  max-width: 690px;
  max-height: min(790px, calc(100dvh - 24px));
  border: 0;
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .32);
}
.public-share-inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.public-share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.public-share-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--primary-strong); font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.public-share-badge i { width: 9px; height: 9px; border-radius: 99px; background: var(--share-color, #176b87); }
.public-share-head h1 { margin: 0; color: var(--ink); font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.22; }
.public-share-description { margin: 8px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.public-share-body { min-height: 0; overflow: auto; padding: 18px 22px; -webkit-overflow-scrolling: touch; }
.public-share-state { margin: 6px 0; color: var(--muted); text-align: center; }
.public-share-list { display: grid; gap: 9px; }
.public-share-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface) 86%, var(--bg)); }
.public-share-link-copy { min-width: 0; display: grid; gap: 4px; }
.public-share-link-copy strong { overflow: hidden; color: var(--ink); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.public-share-link-copy span { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.public-share-link .open-link { min-width: 42px; min-height: 42px; }
.public-share-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); }
.public-share-footer-copy { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.public-share-footer .primary-action { min-height: 46px; white-space: nowrap; }

body.dark .collection-share-dialog,
body.dark .public-share-dialog,
body.dark .team-space-invite-dialog,
body.dark .team-invitations-dialog { background: var(--surface); }

.team-invites-trigger,
.mobile-team-invites-trigger { position: relative; }
.mobile-team-invites-trigger { display: none; }
.team-invite-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}
.team-invite-badge.hidden { display: none; }

.team-space-invite-dialog,
.team-invitations-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: 560px;
  max-height: min(820px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .3);
}
.team-space-invite-inner,
.team-invitations-inner { min-height: 0; display: grid; margin: 0; }
.team-space-invite-inner { gap: 16px; padding: 22px; }
.team-space-invite-head,
.team-invitations-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.team-space-invite-head h2,
.team-invitations-head h2 { margin: 0; color: var(--ink); font-size: 1.2rem; line-height: 1.3; }
.team-space-invite-head p:not(.collection-share-kicker),
.team-invitations-head p:not(.collection-share-kicker) { margin: 5px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.team-space-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.team-space-summary-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary-strong); }
.team-space-summary-icon svg { width: 21px; height: 21px; }
.team-space-summary strong,
.team-space-summary small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-space-summary strong { color: var(--ink); font-size: .9rem; }
.team-space-summary small { margin-top: 3px; color: var(--muted); font-size: .74rem; }
.team-space-field { display: grid; gap: 7px; color: var(--muted); font-size: .79rem; font-weight: 820; }
.team-space-field > span { color: var(--ink); }
.team-space-field > span small { margin-left: 5px; color: var(--muted); font-weight: 650; }
.team-space-field input,
.team-space-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 80%, var(--bg));
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}
.team-space-field input:focus,
.team-space-field select:focus { outline: none; border-color: var(--primary); box-shadow: var(--selected-ring); }
.team-space-field > small { color: var(--muted); font-size: .72rem; font-weight: 600; line-height: 1.4; }
.team-space-invite-status { min-height: 1.25em; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.team-space-invite-status.success { color: #16834d; }
.team-space-invite-status.error { color: #dc3f4f; }
.team-space-invite-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.team-space-invite-actions button { min-height: 44px; }

.team-invitations-inner { grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.team-invitations-head { padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.team-invitations-body { min-height: 0; display: grid; align-content: start; gap: 18px; overflow-y: auto; padding: 18px 22px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.team-invitations-state { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 7%, var(--surface)); color: var(--muted); font-size: .78rem; text-align: center; }
.team-invitations-state.hidden { display: none; }
.team-invitation-section { display: grid; gap: 9px; }
.team-invitation-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); font-size: .84rem; }
.team-invitation-section-head span { min-width: 24px; min-height: 24px; display: grid; place-items: center; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); color: var(--primary-strong); font-size: .72rem; font-weight: 900; }
.team-invitation-list { display: grid; gap: 9px; }
.team-invitation-empty { margin: 0; padding: 18px 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: .78rem; text-align: center; }
.team-invitation-card { display: grid; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--surface) 88%, var(--bg)); }
.team-invitation-card.is-pending { border-color: color-mix(in srgb, var(--primary) 28%, var(--line)); }
.team-invitation-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.team-invitation-card-copy { min-width: 0; display: grid; gap: 3px; }
.team-invitation-card-copy strong { overflow: hidden; color: var(--ink); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.team-invitation-card-copy span { color: var(--muted); font-size: .73rem; line-height: 1.4; }
.team-invitation-status { min-height: 25px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 10%, var(--surface)); color: var(--muted); font-size: .67rem; font-weight: 900; white-space: nowrap; }
.team-invitation-status.pending { background: color-mix(in srgb, #f2b01e 15%, var(--surface)); color: #966406; }
.team-invitation-status.accepted,
.team-invitation-status.sent { background: color-mix(in srgb, #22a06b 13%, var(--surface)); color: #16834d; }
.team-invitation-status.failed,
.team-invitation-status.revoked { background: color-mix(in srgb, #dc3f4f 11%, var(--surface)); color: #c72f40; }
.team-invitation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.team-invitation-actions button { min-height: 36px; padding: 0 11px; font-size: .74rem; }
.team-invitations-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px calc(13px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); }
.team-invitations-footer span { color: var(--muted); font-size: .7rem; line-height: 1.4; }

body.dark .team-space-summary,
body.dark .team-invitation-card { background: color-mix(in srgb, var(--surface) 82%, var(--bg)); }

@media (max-width: 640px) {
  .collection-share-dialog { width: min(100vw - 20px, 520px); border-radius: 19px; }
  .collection-share-inner { gap: 15px; padding: 17px; }
  .collection-share-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .collection-share-actions .primary-action { grid-column: 1 / -1; }
  .collection-share-actions .ghost-btn { min-width: 0; }
  .public-share-dialog { width: 100vw; max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .public-share-head { padding: calc(16px + env(safe-area-inset-top)) 16px 14px; }
  .public-share-body { padding: 14px 16px; }
  .public-share-footer { align-items: stretch; display: grid; grid-template-columns: 1fr; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .public-share-footer .primary-action { width: 100%; }
  .team-space-invite-dialog,
  .team-invitations-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
  .team-space-invite-inner { gap: 14px; padding: 17px; }
  .team-space-invite-actions { display: grid; grid-template-columns: .75fr 1.25fr; }
  .team-space-invite-actions button { min-width: 0; }
  .team-invitations-head { padding: 17px 17px 14px; }
  .team-invitations-body { padding: 14px 17px; }
  .team-invitations-footer { padding: 11px 17px calc(11px + env(safe-area-inset-bottom)); }
  .team-invitation-card-head { grid-template-columns: minmax(0, 1fr); }
  .team-invitation-status { width: fit-content; }
  .team-invitation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-invitation-actions button { min-width: 0; }
}

@media (max-width: 768px) {
  .mobile-team-invites-trigger {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    color: var(--primary-strong);
    cursor: pointer;
  }
  .mobile-team-invites-trigger svg { width: 19px; height: 19px; }
}

@media (max-width: 390px) {
  .topbar-brand-inline > span:not(.topbar-brand-mark) { min-width: 0; }
  .topbar-brand-inline > span:not(.topbar-brand-mark) small { display: none; }
  .mobile-team-invites-trigger,
  .mobile-child-safe-trigger,
  .mobile-theme-trigger { width: 36px !important; height: 36px !important; flex-basis: 36px !important; border-radius: 11px !important; }
}