/* Shared pack cards source of truth.
   Preview and public shared-library cards should be changed here, then stale
   app-shell/shared-backup card rules can be removed instead of overridden. */

/* Shared-pack card base lock.
   Preview and public shared-library cards share this structure; scoped rules
   below scale the same card system for each surface. */
#tab-export .shared-pack-publish-body {
  grid-template-columns: minmax(420px, 1fr) minmax(0, 609px) !important;
  gap: 20px !important;
  align-items: start !important;
}

#tab-export .shared-pack-preview-panel {
  width: 100% !important;
  max-width: 609px !important;
  min-width: 0 !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-preview-card,
#tab-export #sharedPackPreviewCard.shared-pack-preview-result,
#sharedPackBrowseCard .shared-pack-result {
  --pack-card-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --pack-card-pad: 18px;
  --pack-card-gap: 12px;
  --pack-card-radius: 12px;
  --pack-card-author-avatar: 44px;
  --pack-card-author-gap: 6px;
  --pack-card-author-pad-right: 48px;
  --pack-card-author-font: 15px;
  --pack-card-author-name-font: 16px;
  --pack-card-title-size: clamp(34px, 3.1vw, 44px);
  --pack-card-description-font: 16px;
  --pack-card-chip-height: 31px;
  --pack-card-chip-pad-y: 6px;
  --pack-card-chip-pad-x: 10px;
  --pack-card-tag-pad-x: 12px;
  --pack-card-chip-gap: 7px;
  --pack-card-chip-radius: 7px;
  --pack-card-chip-font: 12.6px;
  --pack-card-chip-icon: 13.5px;
  --pack-card-footer-gap: 12px;
  --pack-card-footer-pad-top: 14px;
  --pack-card-date-col: 132px;
  --pack-card-actions-col: 272px;
  --pack-card-date-font: 12px;
  --pack-card-date-icon: 18px;
  --pack-card-button-height: 38px;
  --pack-card-button-radius: 8px;
  --pack-card-button-font: 14px;
  --pack-card-button-pad-x: 13px;
  --pack-card-action-min: 104px;
  --pack-card-download-done-min: 118px;
  --pack-card-reaction-min: 58px;
  --pack-card-pin-size: 40px;
  --pack-card-menu-top: 14px;
  --pack-card-menu-right: 14px;
  --pack-card-menu-width: 34px;
  --pack-card-menu-height: 38px;
  --pack-card-menu-open-width: 132px;
  --pack-card-menu-open-height: 42px;
  --pack-card-menu-line-width: 112px;
  --pack-card-menu-item-font: 12.5px;
  --pack-card-dot-open-x: -95px;
  --pack-card-dot-open-mid-x: -50px;
  --pack-card-dot-open-top-y: -5px;
  --pack-card-dot-open-bottom-y: 8px;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: var(--pack-card-gap) !important;
  padding: var(--pack-card-pad) !important;
  border-radius: var(--pack-card-radius) !important;
  font-family: var(--pack-card-font) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  container-type: inline-size !important;
  overflow: hidden !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-preview-card,
#tab-export #sharedPackPreviewCard.shared-pack-preview-result {
  --pack-card-pad: 14px;
  --pack-card-gap: 10px;
  --pack-card-radius: 10px;
  --pack-card-author-avatar: 35px;
  --pack-card-author-gap: 5px;
  --pack-card-author-pad-right: 38px;
  --pack-card-author-font: 12px;
  --pack-card-author-name-font: 13px;
  --pack-card-title-size: clamp(27px, 2.5vw, 35px);
  --pack-card-description-font: 13px;
  --pack-card-chip-height: 25px;
  --pack-card-chip-pad-y: 5px;
  --pack-card-chip-pad-x: 8px;
  --pack-card-tag-pad-x: 10px;
  --pack-card-chip-gap: 5px;
  --pack-card-chip-radius: 6px;
  --pack-card-chip-font: 10.2px;
  --pack-card-chip-icon: 11px;
  --pack-card-footer-gap: 10px;
  --pack-card-footer-pad-top: 11px;
  --pack-card-date-col: 106px;
  --pack-card-actions-col: 218px;
  --pack-card-date-font: 10px;
  --pack-card-date-icon: 14px;
  --pack-card-button-height: 30px;
  --pack-card-button-radius: 7px;
  --pack-card-button-font: 11.2px;
  --pack-card-button-pad-x: 10px;
  --pack-card-action-min: 83px;
  --pack-card-download-done-min: 94px;
  --pack-card-reaction-min: 46px;
  --pack-card-pin-size: 32px;
  --pack-card-menu-top: 11px;
  --pack-card-menu-right: 11px;
  --pack-card-menu-width: 27px;
  --pack-card-menu-height: 30px;
  --pack-card-menu-open-width: 106px;
  --pack-card-menu-open-height: 34px;
  --pack-card-menu-line-width: 90px;
  --pack-card-menu-item-font: 10px;
  --pack-card-dot-open-x: -76px;
  --pack-card-dot-open-mid-x: -40px;
  --pack-card-dot-open-top-y: -4px;
  --pack-card-dot-open-bottom-y: 6px;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu,
#sharedPackBrowseCard .shared-pack-card-menu {
  position: absolute !important;
  top: var(--pack-card-menu-top) !important;
  right: var(--pack-card-menu-right) !important;
  z-index: 5 !important;
  width: var(--pack-card-menu-width) !important;
  height: var(--pack-card-menu-height) !important;
  min-width: var(--pack-card-menu-width) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: width 180ms cubic-bezier(.2, .8, .2, 1), height 180ms cubic-bezier(.2, .8, .2, 1) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu.is-menu-open,
#sharedPackBrowseCard .shared-pack-result.is-card-menu-open .shared-pack-card-menu {
  width: var(--pack-card-menu-open-width) !important;
  height: var(--pack-card-menu-open-height) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu::after,
#sharedPackBrowseCard .shared-pack-card-menu::after {
  content: "" !important;
  position: absolute !important;
  top: calc(var(--pack-card-menu-open-height) / 2) !important;
  right: 0 !important;
  width: var(--pack-card-menu-line-width) !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--text-muted, #5f6b7a) 34%, transparent) !important;
  opacity: 0 !important;
  transform: translateX(9px) scaleX(.4) !important;
  transform-origin: right center !important;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1) !important;
  pointer-events: none !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu.is-menu-open::after,
#sharedPackBrowseCard .shared-pack-result.is-card-menu-open .shared-pack-card-menu::after {
  opacity: .38 !important;
  transform: translateX(0) scaleX(1) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu-trigger,
#sharedPackBrowseCard .shared-pack-card-menu-trigger {
  width: var(--pack-card-menu-width) !important;
  min-width: var(--pack-card-menu-width) !important;
  height: var(--pack-card-menu-height) !important;
  min-height: var(--pack-card-menu-height) !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--pack-card-button-radius) !important;
  background: transparent !important;
  color: var(--text, #111827) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 140ms ease, color 140ms ease !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu-trigger:hover,
#tab-export #sharedPackPreviewCard .shared-pack-card-menu-trigger:focus-visible,
#sharedPackBrowseCard .shared-pack-card-menu-trigger:hover,
#sharedPackBrowseCard .shared-pack-card-menu-trigger:focus-visible {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--theme-accent, #8abff2) 12%, transparent) !important;
  box-shadow: none !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger,
#sharedPackBrowseCard .shared-pack-result.is-card-menu-open .shared-pack-card-menu-trigger {
  pointer-events: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu-trigger svg,
#sharedPackBrowseCard .shared-pack-card-menu-trigger svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu-trigger svg circle,
#sharedPackBrowseCard .shared-pack-card-menu-trigger svg circle {
  fill: currentColor !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(1),
#sharedPackBrowseCard .shared-pack-result.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(1) {
  transform: translate(var(--pack-card-dot-open-x), var(--pack-card-dot-open-top-y)) scale(.72) !important;
  opacity: .82 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(2),
#sharedPackBrowseCard .shared-pack-result.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(2) {
  transform: translate(var(--pack-card-dot-open-mid-x), 1px) scale(.35) !important;
  opacity: 0 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(3),
#sharedPackBrowseCard .shared-pack-result.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(3) {
  transform: translate(var(--pack-card-dot-open-x), var(--pack-card-dot-open-bottom-y)) scale(.72) !important;
  opacity: .82 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu-panel,
#sharedPackBrowseCard .shared-pack-card-menu-panel {
  min-width: var(--pack-card-menu-open-width) !important;
  width: var(--pack-card-menu-open-width) !important;
  padding: 0 !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px) scaleX(.7) !important;
  transform-origin: right center !important;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-panel,
#sharedPackBrowseCard .shared-pack-result.is-card-menu-open .shared-pack-card-menu-panel {
  transform: translateY(0) scaleX(1) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu-panel button,
#sharedPackBrowseCard .shared-pack-card-menu-panel button {
  width: 100% !important;
  min-height: 17px !important;
  padding: 1px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text, #111827) !important;
  font-size: var(--pack-card-menu-item-font) !important;
  font-weight: 450 !important;
  line-height: 1.15 !important;
  text-align: left !important;
  box-shadow: none !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-card-menu-panel button:hover,
#tab-export #sharedPackPreviewCard .shared-pack-card-menu-panel button:focus-visible,
#sharedPackBrowseCard .shared-pack-card-menu-panel button:hover,
#sharedPackBrowseCard .shared-pack-card-menu-panel button:focus-visible {
  color: var(--theme-accent-strong, var(--theme-accent, #2563eb)) !important;
  background: transparent !important;
  outline: none !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-result-authorline,
#sharedPackBrowseCard .shared-pack-result-authorline {
  min-height: var(--pack-card-author-avatar) !important;
  padding-right: var(--pack-card-author-pad-right) !important;
  align-items: flex-start !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-author-card,
#sharedPackBrowseCard .shared-pack-author-card {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: var(--pack-card-author-gap) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-author-avatar,
#sharedPackBrowseCard .shared-pack-author-avatar {
  width: var(--pack-card-author-avatar) !important;
  height: var(--pack-card-author-avatar) !important;
  flex: 0 0 var(--pack-card-author-avatar) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-author-text,
#sharedPackBrowseCard .shared-pack-author-text {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding-top: 0 !important;
  color: var(--text-muted, #667085) !important;
  font-size: var(--pack-card-author-font) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-author-text strong,
#sharedPackBrowseCard .shared-pack-author-text strong {
  color: var(--text, #111827) !important;
  font-size: var(--pack-card-author-name-font) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-author-separator,
#tab-export #sharedPackPreviewCard .shared-pack-author-date,
#sharedPackBrowseCard .shared-pack-author-separator,
#sharedPackBrowseCard .shared-pack-author-date {
  color: var(--text-muted, #667085) !important;
  font-weight: 400 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-result-title,
#sharedPackBrowseCard .shared-pack-result-title {
  margin: 0 !important;
  max-width: min(100%, 720px) !important;
  color: var(--text, #111827) !important;
  font-size: var(--pack-card-title-size) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-badges,
#tab-export #sharedPackPreviewCard .shared-pack-tags,
#sharedPackBrowseCard .shared-pack-badges,
#sharedPackBrowseCard .shared-pack-tags {
  gap: 8px !important;
  margin: 0 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-badge,
#sharedPackBrowseCard .shared-pack-badge {
  min-height: var(--pack-card-chip-height) !important;
  padding: var(--pack-card-chip-pad-y) var(--pack-card-chip-pad-x) !important;
  gap: var(--pack-card-chip-gap) !important;
  border-radius: var(--pack-card-chip-radius) !important;
  border: 1px solid var(--chip-border, color-mix(in srgb, var(--border, #dbe4f0) 78%, transparent)) !important;
  background: var(--chip-bg, color-mix(in srgb, var(--theme-accent, #8abff2) 7%, var(--surface-elevated, #ffffff) 93%)) !important;
  color: var(--chip-text, var(--text, #111827)) !important;
  box-shadow: none !important;
  font-size: var(--pack-card-chip-font) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-badge.library-histology,
#sharedPackBrowseCard .shared-pack-badge.library-histology {
  color: var(--type-slides-text, #12803b) !important;
  background: var(--type-slides-bg, color-mix(in srgb, #dff8e8 84%, #ffffff 16%)) !important;
  border-color: var(--type-slides-border, color-mix(in srgb, #a8e6bf 58%, transparent)) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-badge.library-anatomy,
#sharedPackBrowseCard .shared-pack-badge.library-anatomy {
  color: var(--type-cards-text, #1d4ed8) !important;
  background: var(--type-cards-bg, color-mix(in srgb, #e8f2ff 88%, #ffffff 12%)) !important;
  border-color: var(--type-cards-border, color-mix(in srgb, #b9d4ff 58%, transparent)) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-meta-icon,
#sharedPackBrowseCard .shared-pack-meta-icon,
#tab-export #sharedPackPreviewCard .shared-pack-badge svg,
#sharedPackBrowseCard .shared-pack-badge svg {
  width: var(--pack-card-chip-icon) !important;
  height: var(--pack-card-chip-icon) !important;
  flex-basis: var(--pack-card-chip-icon) !important;
  color: currentColor !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-description,
#sharedPackBrowseCard .shared-pack-description {
  margin: 0 !important;
  color: var(--text-muted, #667085) !important;
  font-size: var(--pack-card-description-font) !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  overflow-wrap: anywhere !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-tag,
#sharedPackBrowseCard .shared-pack-tag {
  min-height: var(--pack-card-chip-height) !important;
  padding: var(--pack-card-chip-pad-y) var(--pack-card-tag-pad-x) !important;
  gap: var(--pack-card-chip-gap) !important;
  border-radius: 999px !important;
  background: var(--tag-bg, #efe7ff) !important;
  border: 1px solid var(--tag-border, #d9c8ff) !important;
  color: var(--tag-text, #4c1d95) !important;
  box-shadow: none !important;
  font-size: var(--pack-card-chip-font) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-tag .shared-pack-meta-icon,
#sharedPackBrowseCard .shared-pack-tag .shared-pack-meta-icon {
  color: var(--tag-icon, #5b21b6) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-footer,
#sharedPackBrowseCard .shared-pack-footer {
  display: grid !important;
  grid-template-columns: minmax(var(--pack-card-date-col), 1fr) auto minmax(var(--pack-card-actions-col), auto) !important;
  align-items: center !important;
  gap: var(--pack-card-footer-gap) !important;
  margin-top: 4px !important;
  padding-top: var(--pack-card-footer-pad-top) !important;
  border-top: 1px solid color-mix(in srgb, var(--border, #dbe4f0) 74%, transparent) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-date-line,
#sharedPackBrowseCard .shared-pack-date-line {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: var(--text-muted, #667085) !important;
  font-size: var(--pack-card-date-font) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-date-line .shared-pack-meta-icon,
#sharedPackBrowseCard .shared-pack-date-line .shared-pack-meta-icon {
  width: var(--pack-card-date-icon) !important;
  height: var(--pack-card-date-icon) !important;
  flex-basis: var(--pack-card-date-icon) !important;
  color: var(--text-muted, #667085) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-social-row,
#sharedPackBrowseCard .shared-pack-social-row {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-thumbs-btn,
#sharedPackBrowseCard .shared-pack-thumbs-btn {
  width: auto !important;
  min-width: var(--pack-card-reaction-min) !important;
  height: var(--pack-card-button-height) !important;
  min-height: var(--pack-card-button-height) !important;
  padding: 0 var(--pack-card-button-pad-x) !important;
  border-radius: var(--pack-card-button-radius) !important;
  border: 1px solid color-mix(in srgb, var(--border, #dbe4f0) 78%, transparent) !important;
  background: var(--surface-elevated, #ffffff) !important;
  color: var(--text-muted, #667085) !important;
  font-size: var(--pack-card-button-font) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-actions,
#sharedPackBrowseCard .shared-pack-actions {
  display: grid !important;
  grid-template-columns: max-content max-content var(--pack-card-pin-size) !important;
  justify-content: end !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: auto !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-actions :is(.btn, .btn-primary, .btn-secondary, .shared-pack-pin-btn),
#sharedPackBrowseCard .shared-pack-actions :is(.btn, .btn-primary, .btn-secondary, .shared-pack-pin-btn) {
  width: auto !important;
  max-width: none !important;
  height: var(--pack-card-button-height) !important;
  min-height: var(--pack-card-button-height) !important;
  padding: 0 var(--pack-card-button-pad-x) !important;
  border-radius: var(--pack-card-button-radius) !important;
  font-size: var(--pack-card-button-font) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  box-shadow: none !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-actions :is(.btn, .btn-primary, .btn-secondary),
#sharedPackBrowseCard .shared-pack-actions :is(.btn, .btn-primary, .btn-secondary) {
  min-width: var(--pack-card-action-min) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-actions .btn-primary:not(:disabled):not(.disabled),
#sharedPackBrowseCard .shared-pack-actions .btn-primary:not(:disabled):not(.disabled) {
  border-color: var(--pack-action-primary-border, color-mix(in srgb, #66afe9 74%, #ffffff 26%)) !important;
  background: var(--pack-action-primary-bg, linear-gradient(180deg, #9bd7ff 0%, #78bff4 100%)) !important;
  color: var(--pack-action-primary-text, #0b2942) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-actions .btn-primary.is-preview-downloaded {
  min-width: var(--pack-card-download-done-min) !important;
  background: var(--pack-action-primary-complete-bg, linear-gradient(180deg, #8fd0ff 0%, #6ab8ef 100%)) !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-actions .shared-pack-pin-btn,
#sharedPackBrowseCard .shared-pack-actions .shared-pack-pin-btn {
  width: var(--pack-card-pin-size) !important;
  min-width: var(--pack-card-pin-size) !important;
  padding: 0 !important;
}

#tab-export #sharedPackPreviewCard .shared-pack-actions .shared-pack-pin-btn.is-preview-pinned,
#sharedPackBrowseCard .shared-pack-actions .shared-pack-pin-btn.is-active {
  background: var(--pack-pin-active-bg, rgba(255, 246, 211, .86)) !important;
  border-color: var(--pack-pin-active-border, rgba(234, 179, 8, .32)) !important;
  color: var(--pack-pin-active-text, #b7791f) !important;
}

html[data-theme="dark"] #tab-export #sharedPackPreviewCard .shared-pack-badge,
html[data-theme="dark"] #sharedPackBrowseCard .shared-pack-badge {
  color: var(--chip-text, var(--text, #f8fafc)) !important;
  background: var(--chip-bg, color-mix(in srgb, var(--theme-accent, #8abff2) 16%, var(--surface-elevated, #111827) 84%)) !important;
  border-color: var(--chip-border, color-mix(in srgb, var(--theme-accent, #8abff2) 24%, transparent)) !important;
}

html[data-theme="dark"] #tab-export #sharedPackPreviewCard .shared-pack-tag,
html[data-theme="dark"] #sharedPackBrowseCard .shared-pack-tag {
  color: var(--tag-text, #ddd6fe) !important;
  background: var(--tag-bg, rgba(109, 40, 217, .28)) !important;
  border-color: var(--tag-border, rgba(196, 181, 253, .42)) !important;
}

html[data-theme="dark"] #tab-export #sharedPackPreviewCard .shared-pack-tag .shared-pack-meta-icon,
html[data-theme="dark"] #sharedPackBrowseCard .shared-pack-tag .shared-pack-meta-icon {
  color: var(--tag-icon, #c4b5fd) !important;
}

@container (max-width: 460px) {
#tab-export #sharedPackPreviewCard .shared-pack-footer,
  #sharedPackBrowseCard .shared-pack-footer {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
  }

  #tab-export #sharedPackPreviewCard .shared-pack-social-row,
  #tab-export #sharedPackPreviewCard .shared-pack-actions,
  #sharedPackBrowseCard .shared-pack-social-row,
  #sharedPackBrowseCard .shared-pack-actions {
    justify-content: start !important;
  }
}

@media (max-width: 1180px) {
#tab-export .shared-pack-publish-body {
    grid-template-columns: 1fr !important;
  }
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-system-badge,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-system-badge {
  border-radius: var(--pack-card-chip-radius, 7px) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-system-histology,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-system-histology {
  border-color: var(--type-slides-border, color-mix(in srgb, #22c55e 24%, transparent)) !important;
  background: var(--type-slides-bg, color-mix(in srgb, #dcfce7 72%, var(--surface-elevated, #fff) 28%)) !important;
  color: var(--type-slides-text, #14783e) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-system-anatomy,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-system-anatomy {
  border-color: var(--type-cards-border, color-mix(in srgb, #3b82f6 22%, transparent)) !important;
  background: var(--type-cards-bg, color-mix(in srgb, #dbeafe 72%, var(--surface-elevated, #fff) 28%)) !important;
  color: var(--type-cards-text, #1d4ed8) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source {
  --pack-card-pad: 15px;
  --pack-card-gap: 10px;
  --pack-card-radius: 10px;
  --pack-card-author-avatar: 35px;
  --pack-card-author-gap: 5px;
  --pack-card-author-pad-right: 40px;
  --pack-card-author-font: 12px;
  --pack-card-author-name-font: 13px;
  --pack-card-title-size: clamp(28px, 2.65vw, 37px);
  --pack-card-description-font: 13px;
  --pack-card-chip-height: 25px;
  --pack-card-chip-pad-y: 5px;
  --pack-card-chip-pad-x: 8px;
  --pack-card-tag-pad-x: 10px;
  --pack-card-chip-gap: 5px;
  --pack-card-chip-radius: 6px;
  --pack-card-chip-font: 10.5px;
  --pack-card-chip-icon: 11px;
  --pack-card-footer-gap: 9px;
  --pack-card-footer-pad-top: 11px;
  --pack-card-date-col: 112px;
  --pack-card-date-font: 10px;
  --pack-card-date-icon: 14px;
  --pack-card-button-height: 31px;
  --pack-card-button-radius: 7px;
  --pack-card-button-font: 11.4px;
  --pack-card-button-pad-x: 10px;
  --pack-card-action-min: 84px;
  --pack-card-reaction-min: 46px;
  --pack-card-pin-size: 32px;
  --pack-card-menu-top: 11px;
  --pack-card-menu-right: 11px;
  --pack-card-menu-width: 27px;
  --pack-card-menu-height: 30px;
  --pack-card-menu-open-width: 106px;
  --pack-card-menu-open-height: 34px;
  --pack-card-menu-line-width: 90px;
  --pack-card-menu-item-font: 10px;
  --pack-card-dot-open-x: -76px;
  --pack-card-dot-open-mid-x: -40px;
  --pack-card-dot-open-top-y: -4px;
  --pack-card-dot-open-bottom-y: 6px;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-footer {
  display: grid !important;
  grid-template-columns: minmax(var(--pack-card-date-col), 1fr) max-content max-content !important;
  grid-template-areas: "date social actions" !important;
  align-items: center !important;
  gap: var(--pack-card-footer-gap) !important;
  min-width: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-date-line {
  grid-area: date !important;
  min-width: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-social-row {
  grid-area: social !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  min-width: max-content !important;
  margin-top: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: max-content max-content var(--pack-card-pin-size) !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 8px !important;
  min-width: max-content !important;
  margin-top: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-actions :is(.btn, .btn-primary, .btn-secondary),
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-thumbs-btn {
  min-width: var(--pack-card-action-min) !important;
  height: var(--pack-card-button-height) !important;
  min-height: var(--pack-card-button-height) !important;
  padding: 0 var(--pack-card-button-pad-x) !important;
  border-radius: var(--pack-card-button-radius) !important;
  font-size: var(--pack-card-button-font) !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-thumbs-btn {
  min-width: var(--pack-card-reaction-min) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-actions .shared-pack-pin-btn {
  width: var(--pack-card-pin-size) !important;
  min-width: var(--pack-card-pin-size) !important;
  height: var(--pack-card-button-height) !important;
  min-height: var(--pack-card-button-height) !important;
  padding: 0 !important;
  border-radius: var(--pack-card-button-radius) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-card-menu-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  align-content: center !important;
  min-width: var(--pack-card-menu-open-width) !important;
  width: var(--pack-card-menu-open-width) !important;
  height: var(--pack-card-menu-open-height) !important;
  transform-origin: right top !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel[hidden],
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-card-menu-panel[hidden] {
  display: none !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel button,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-card-menu-panel button {
  min-height: 0 !important;
  line-height: 1.1 !important;
}

@container (max-width: 620px) {
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-footer {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "date"
      "social"
      "actions" !important;
    justify-items: start !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-actions,
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-social-row {
    justify-content: start !important;
  }
}

html[data-theme="dark"] #tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-system-histology,
html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-system-histology {
  border-color: var(--type-slides-border, rgba(134, 239, 172, .34)) !important;
  background: var(--type-slides-bg, rgba(22, 101, 52, .26)) !important;
  color: var(--type-slides-text, #bbf7d0) !important;
}

html[data-theme="dark"] #tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-system-anatomy,
html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-card-source .shared-pack-system-anatomy {
  border-color: var(--type-cards-border, rgba(147, 197, 253, .34)) !important;
  background: var(--type-cards-bg, rgba(30, 64, 175, .28)) !important;
  color: var(--type-cards-text, #bfdbfe) !important;
}

/* Shared-library cards are the preview-card system at a compact browsing scale.
   Values below are derived from the approved preview-card tokens at ~69.3%. */
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source {
  --pack-card-browse-scale: .693;
  --pack-card-pad: 9.7px;
  --pack-card-gap: 6.9px;
  --pack-card-radius: 6.9px;
  --pack-card-author-avatar: 24.3px;
  --pack-card-author-gap: 3.5px;
  --pack-card-author-pad-right: 26.3px;
  --pack-card-author-font: 8.3px;
  --pack-card-author-name-font: 9px;
  --pack-card-title-size: clamp(18.7px, 1.73vw, 24.3px);
  --pack-card-description-font: 9px;
  --pack-card-chip-height: 17.3px;
  --pack-card-chip-pad-y: 3.5px;
  --pack-card-chip-pad-x: 5.5px;
  --pack-card-tag-pad-x: 6.9px;
  --pack-card-chip-gap: 3.5px;
  --pack-card-chip-radius: 4.2px;
  --pack-card-chip-font: 7.1px;
  --pack-card-chip-icon: 7.6px;
  --pack-card-footer-gap: 6.9px;
  --pack-card-footer-pad-top: 7.6px;
  --pack-card-date-col: 73.5px;
  --pack-card-actions-col: 151px;
  --pack-card-date-font: 6.9px;
  --pack-card-date-icon: 9.7px;
  --pack-card-button-height: 20.8px;
  --pack-card-button-radius: 4.9px;
  --pack-card-button-font: 7.8px;
  --pack-card-button-pad-x: 6.9px;
  --pack-card-action-min: 57.5px;
  --pack-card-download-done-min: 65.1px;
  --pack-card-reaction-min: 31.9px;
  --pack-card-pin-size: 22.2px;
  --pack-card-menu-top: 7.6px;
  --pack-card-menu-right: 7.6px;
  --pack-card-menu-width: 18.7px;
  --pack-card-menu-height: 20.8px;
  --pack-card-menu-open-width: 73.5px;
  --pack-card-menu-open-height: 23.6px;
  --pack-card-menu-line-width: 62.4px;
  --pack-card-menu-item-font: 6.9px;
  --pack-card-dot-open-x: -53px;
  --pack-card-dot-open-mid-x: -27.7px;
  --pack-card-dot-open-top-y: -2.8px;
  --pack-card-dot-open-bottom-y: 4.2px;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu {
  position: absolute !important;
  top: var(--pack-card-menu-top) !important;
  right: var(--pack-card-menu-right) !important;
  z-index: 9 !important;
  width: var(--pack-card-menu-width) !important;
  min-width: var(--pack-card-menu-width) !important;
  height: var(--pack-card-menu-height) !important;
  min-height: var(--pack-card-menu-height) !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    width 180ms cubic-bezier(.2, .8, .2, 1),
    height 180ms cubic-bezier(.2, .8, .2, 1) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu {
  width: var(--pack-card-menu-open-width) !important;
  height: var(--pack-card-menu-open-height) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu::before,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger::before,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger::after,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel::before,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel::after {
  content: none !important;
  display: none !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu::after {
  content: "" !important;
  position: absolute !important;
  top: calc(var(--pack-card-menu-open-height) / 2) !important;
  right: 0 !important;
  width: var(--pack-card-menu-line-width) !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--text-muted, #5f6b7a) 34%, transparent) !important;
  opacity: 0 !important;
  transform: translateX(8px) scaleX(.4) !important;
  transform-origin: right center !important;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1) !important;
  pointer-events: none !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu::after {
  opacity: .38 !important;
  transform: translateX(0) scaleX(1) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger {
  width: var(--pack-card-menu-width) !important;
  min-width: var(--pack-card-menu-width) !important;
  height: var(--pack-card-menu-height) !important;
  min-height: var(--pack-card-menu-height) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--pack-card-button-radius) !important;
  background: transparent !important;
  color: var(--text, #111827) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger:hover,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger:focus-visible {
  background: color-mix(in srgb, var(--theme-accent, #8abff2) 10%, transparent) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-trigger {
  pointer-events: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger svg circle {
  fill: currentColor !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
  transition:
    transform 180ms cubic-bezier(.2, .8, .2, 1),
    opacity 160ms ease !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(1) {
  transform: translate(var(--pack-card-dot-open-x), var(--pack-card-dot-open-top-y)) scale(.72) !important;
  opacity: .82 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(2) {
  transform: translate(var(--pack-card-dot-open-mid-x), 1px) scale(.35) !important;
  opacity: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(3) {
  transform: translate(var(--pack-card-dot-open-x), var(--pack-card-dot-open-bottom-y)) scale(.72) !important;
  opacity: .82 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  align-content: center !important;
  min-width: var(--pack-card-menu-open-width) !important;
  width: var(--pack-card-menu-open-width) !important;
  height: var(--pack-card-menu-open-height) !important;
  padding: 0 !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-2px) scaleX(.72) !important;
  transform-origin: right center !important;
  transition:
    opacity 160ms ease,
    transform 180ms cubic-bezier(.2, .8, .2, 1) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel[hidden] {
  display: none !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scaleX(1) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel button {
  width: 100% !important;
  min-height: 15px !important;
  padding: 1px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text, #111827) !important;
  box-shadow: none !important;
  font-size: var(--pack-card-menu-item-font) !important;
  font-weight: 450 !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel button:hover,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel button:focus-visible {
  color: var(--theme-accent-strong, var(--theme-accent, #2563eb)) !important;
  background: transparent !important;
  outline: none !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn.is-shared-pack-reaction-pop .shared-pack-like-icon {
  animation: sharedPackPreviewReactionPop 560ms cubic-bezier(.18, .88, .28, 1.25);
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn.is-shared-pack-reaction-pop .shared-pack-like-count {
  animation: sharedPackPreviewCountPop 360ms cubic-bezier(.18, .88, .28, 1.18);
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-pin-btn.is-shared-pack-pin-pop {
  animation: sharedPackPreviewButtonPop 420ms cubic-bezier(.18, .88, .28, 1.18);
}

@media (prefers-reduced-motion: reduce) {
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn.is-shared-pack-reaction-pop .shared-pack-like-icon,
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn.is-shared-pack-reaction-pop .shared-pack-like-count,
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-pin-btn.is-shared-pack-pin-pop {
    animation: none !important;
  }
}

@keyframes sharedPackPreviewReactionPop {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-3px) scale(1.82); }
  62% { transform: translateY(0) scale(.92); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes sharedPackPreviewCountPop {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-1px) scale(1.22); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes sharedPackPreviewButtonPop {
  0% { transform: translateY(0) scale(1); }
  44% { transform: translateY(-1px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes sharedPackPreviewPinPop {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  45% { transform: translateY(-2px) rotate(-8deg) scale(1.25); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Public shared-library cards: complete preview-derived source of truth.
   Older app-shell rules still exist, so this block intentionally restates the
   full upper and lower card system at the approved browsing scale. */
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source {
  --pack-card-scale: .832;
  --pack-card-pad: calc(14px * var(--pack-card-scale));
  --pack-card-gap: calc(10px * var(--pack-card-scale));
  --pack-card-radius: calc(10px * var(--pack-card-scale));
  --pack-card-author-avatar: calc(35px * var(--pack-card-scale));
  --pack-card-author-gap: calc(5px * var(--pack-card-scale));
  --pack-card-author-pad-right: calc(38px * var(--pack-card-scale));
  --pack-card-author-font: calc(12px * var(--pack-card-scale));
  --pack-card-author-name-font: calc(13px * var(--pack-card-scale));
  --pack-card-author-text-gap: calc(8px * var(--pack-card-scale));
  --pack-card-title-size-fixed: calc(35px * var(--pack-card-scale));
  --pack-card-description-font: calc(13px * var(--pack-card-scale));
  --pack-card-chip-height: calc(25px * var(--pack-card-scale));
  --pack-card-chip-pad-y: calc(5px * var(--pack-card-scale));
  --pack-card-chip-pad-x: calc(8px * var(--pack-card-scale));
  --pack-card-tag-pad-x: calc(10px * var(--pack-card-scale));
  --pack-card-chip-gap: calc(5px * var(--pack-card-scale));
  --pack-card-chip-radius: calc(6px * var(--pack-card-scale));
  --pack-card-chip-font: calc(10.2px * var(--pack-card-scale));
  --pack-card-chip-icon: calc(11px * var(--pack-card-scale));
  --pack-card-footer-gap: calc(10px * var(--pack-card-scale));
  --pack-card-footer-pad-top: calc(11px * var(--pack-card-scale));
  --pack-card-date-col: calc(106px * var(--pack-card-scale));
  --pack-card-actions-col: calc(218px * var(--pack-card-scale));
  --pack-card-date-font: calc(10px * var(--pack-card-scale));
  --pack-card-date-icon: calc(14px * var(--pack-card-scale));
  --pack-card-button-height: calc(30px * var(--pack-card-scale));
  --pack-card-button-radius: calc(7px * var(--pack-card-scale));
  --pack-card-button-font: calc(11.2px * var(--pack-card-scale));
  --pack-card-button-pad-x: calc(10px * var(--pack-card-scale));
  --pack-card-action-min: calc(83px * var(--pack-card-scale));
  --pack-card-reaction-min: calc(46px * var(--pack-card-scale));
  --pack-card-pin-size: calc(32px * var(--pack-card-scale));
  --pack-card-like-icon-size: calc(16px * var(--pack-card-scale));
  --pack-card-menu-top: calc(11px * var(--pack-card-scale));
  --pack-card-menu-right: calc(11px * var(--pack-card-scale));
  --pack-card-menu-width: calc(27px * var(--pack-card-scale));
  --pack-card-menu-height: calc(30px * var(--pack-card-scale));
  --pack-card-menu-open-width: calc(106px * var(--pack-card-scale));
  --pack-card-menu-open-height: calc(34px * var(--pack-card-scale));
  --pack-card-menu-line-width: calc(90px * var(--pack-card-scale));
  --pack-card-menu-item-font: calc(10px * var(--pack-card-scale));
  --pack-card-dot-open-x: calc(-76px * var(--pack-card-scale));
  --pack-card-dot-open-mid-x: calc(-40px * var(--pack-card-scale));
  --pack-card-dot-open-top-y: calc(-4px * var(--pack-card-scale));
  --pack-card-dot-open-bottom-y: calc(6px * var(--pack-card-scale));
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: var(--pack-card-gap) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: var(--pack-card-pad) !important;
  padding-right: var(--pack-card-pad) !important;
  border-radius: var(--pack-card-radius) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  container-type: inline-size !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-result-authorline {
  min-height: var(--pack-card-author-avatar) !important;
  padding-right: var(--pack-card-author-pad-right) !important;
  align-items: flex-start !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-author-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: var(--pack-card-author-gap) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-muted, #667085) !important;
  box-shadow: none !important;
  text-align: left !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-author-avatar {
  width: var(--pack-card-author-avatar) !important;
  height: var(--pack-card-author-avatar) !important;
  flex: 0 0 var(--pack-card-author-avatar) !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-author-text {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: var(--pack-card-author-text-gap) !important;
  width: auto !important;
  padding-top: 0 !important;
  color: var(--text-muted, #667085) !important;
  font-size: var(--pack-card-author-font) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-author-text strong {
  color: var(--text, #111827) !important;
  font-size: var(--pack-card-author-name-font) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-result-title {
  margin: 0 !important;
  max-width: min(100%, 720px) !important;
  color: var(--text, #111827) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
  font-size: clamp(18px, 1.55vw, var(--pack-card-title-size-fixed)) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-badges,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--pack-card-chip-gap) !important;
  margin: 0 !important;
  min-width: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-badge {
  min-height: var(--pack-card-chip-height) !important;
  padding: var(--pack-card-chip-pad-y) var(--pack-card-chip-pad-x) !important;
  gap: var(--pack-card-chip-gap) !important;
  border-radius: var(--pack-card-chip-radius) !important;
  border: 1px solid var(--chip-border, color-mix(in srgb, var(--border, #dbe4f0) 78%, transparent)) !important;
  background: var(--chip-bg, color-mix(in srgb, var(--theme-accent, #8abff2) 7%, var(--surface-elevated, #ffffff) 93%)) !important;
  color: var(--chip-text, var(--text, #111827)) !important;
  box-shadow: none !important;
  font-size: var(--pack-card-chip-font) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-system-badge {
  font-weight: 400 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-system-histology {
  border-color: var(--type-slides-border, color-mix(in srgb, #22c55e 24%, transparent)) !important;
  background: var(--type-slides-bg, color-mix(in srgb, #dcfce7 72%, var(--surface-elevated, #fff) 28%)) !important;
  color: var(--type-slides-text, #14783e) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-system-anatomy {
  border-color: var(--type-cards-border, color-mix(in srgb, #3b82f6 22%, transparent)) !important;
  background: var(--type-cards-bg, color-mix(in srgb, #dbeafe 72%, var(--surface-elevated, #fff) 28%)) !important;
  color: var(--type-cards-text, #1d4ed8) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-meta-icon,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-badge svg,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-tag svg {
  width: var(--pack-card-chip-icon) !important;
  height: var(--pack-card-chip-icon) !important;
  flex: 0 0 var(--pack-card-chip-icon) !important;
  margin-inline-start: 0 !important;
  color: currentColor !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-description {
  margin: 0 !important;
  max-width: 86ch !important;
  color: var(--text-muted, #667085) !important;
  font-size: var(--pack-card-description-font) !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  overflow-wrap: anywhere !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-tag {
  min-height: var(--pack-card-chip-height) !important;
  padding: var(--pack-card-chip-pad-y) var(--pack-card-tag-pad-x) !important;
  gap: var(--pack-card-chip-gap) !important;
  border-radius: 999px !important;
  border: 1px solid var(--tag-border, #d9c8ff) !important;
  background: var(--tag-bg, #efe7ff) !important;
  color: var(--tag-text, #4c1d95) !important;
  box-shadow: none !important;
  font-size: var(--pack-card-chip-font) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-tag .shared-pack-meta-icon {
  color: var(--tag-icon, #5b21b6) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-footer {
  display: grid !important;
  grid-template-columns: minmax(var(--pack-card-date-col), 1fr) auto minmax(var(--pack-card-actions-col), auto) !important;
  grid-template-areas: "date social actions" !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: var(--pack-card-footer-gap) !important;
  min-width: 0 !important;
  margin-top: calc(4px * var(--pack-card-scale)) !important;
  padding-top: var(--pack-card-footer-pad-top) !important;
  border-top: 1px solid color-mix(in srgb, var(--border, #dbe4f0) 74%, transparent) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-date-line {
  grid-area: date !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(8px * var(--pack-card-scale)) !important;
  min-width: 0 !important;
  color: var(--text-muted, #667085) !important;
  font-size: var(--pack-card-date-font) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-date-line .shared-pack-meta-icon {
  width: var(--pack-card-date-icon) !important;
  height: var(--pack-card-date-icon) !important;
  flex-basis: var(--pack-card-date-icon) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-social-row {
  grid-area: social !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--pack-card-footer-gap) !important;
  min-width: max-content !important;
  margin-top: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn {
  width: auto !important;
  min-width: var(--pack-card-reaction-min) !important;
  height: var(--pack-card-button-height) !important;
  min-height: var(--pack-card-button-height) !important;
  padding: 0 var(--pack-card-button-pad-x) !important;
  border-radius: var(--pack-card-button-radius) !important;
  font-size: var(--pack-card-button-font) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-like-icon {
  font-size: var(--pack-card-like-icon-size) !important;
  line-height: 1 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-like-count {
  font-size: var(--pack-card-button-font) !important;
  line-height: 1 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: max-content max-content var(--pack-card-pin-size) !important;
  align-items: center !important;
  justify-content: end !important;
  gap: var(--pack-card-footer-gap) !important;
  width: auto !important;
  min-width: max-content !important;
  margin-top: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions :is(.btn, .btn-primary, .btn-secondary),
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions .shared-pack-pin-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: var(--pack-card-button-height) !important;
  height: var(--pack-card-button-height) !important;
  padding: 0 var(--pack-card-button-pad-x) !important;
  border-radius: var(--pack-card-button-radius) !important;
  font-size: var(--pack-card-button-font) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions :is(.btn-primary, .btn-secondary) {
  min-width: var(--pack-card-action-min) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions .shared-pack-pin-btn {
  width: var(--pack-card-pin-size) !important;
  min-width: var(--pack-card-pin-size) !important;
  padding: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-pin-icon {
  width: calc(16px * var(--pack-card-scale)) !important;
  height: calc(16px * var(--pack-card-scale)) !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn.is-shared-pack-reaction-pop .shared-pack-like-icon {
  animation: sharedPackPreviewReactionPop .48s cubic-bezier(.18, .96, .22, 1.22) both !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn.is-shared-pack-reaction-pop .shared-pack-like-count {
  animation: sharedPackPreviewCountPop .34s cubic-bezier(.2, .86, .26, 1.15) both !important;
}

#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-pin-btn.is-shared-pack-pin-pop .shared-pack-pin-icon {
  animation: sharedPackPreviewPinPop .38s cubic-bezier(.2, .86, .26, 1.12) both !important;
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-system-histology {
  border-color: var(--type-slides-border, rgba(134, 239, 172, .34)) !important;
  background: var(--type-slides-bg, rgba(22, 101, 52, .26)) !important;
  color: var(--type-slides-text, #bbf7d0) !important;
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-system-anatomy {
  border-color: var(--type-cards-border, rgba(147, 197, 253, .34)) !important;
  background: var(--type-cards-bg, rgba(30, 64, 175, .28)) !important;
  color: var(--type-cards-text, #bfdbfe) !important;
}

html[data-theme="dark"] #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-tag {
  border-color: var(--tag-border, rgba(196, 181, 253, .3)) !important;
  background: var(--tag-bg, color-mix(in srgb, #8b5cf6 20%, var(--surface-elevated, #111827) 80%)) !important;
  color: var(--tag-text, #ddd6fe) !important;
}

@container (max-width: 500px) {
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-footer {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "date"
      "social"
      "actions" !important;
    justify-items: start !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-social-row,
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions {
    justify-content: start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn.is-shared-pack-reaction-pop .shared-pack-like-icon,
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn.is-shared-pack-reaction-pop .shared-pack-like-count,
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-pin-btn.is-shared-pack-pin-pop .shared-pack-pin-icon {
    animation: none !important;
  }
}

/* Final shared-pack card/menu sync: preview card stays the source shape, public
   browser cards use the same menu system at a compact +10% browse scale. */
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source {
  --pack-card-scale: .915;
  --pack-card-browse-scale: .762;
  --pack-card-menu-top: calc(14px * var(--pack-card-scale));
  --pack-card-menu-right: calc(14px * var(--pack-card-scale));
  --pack-card-menu-width: calc(34px * var(--pack-card-scale));
  --pack-card-menu-height: calc(38px * var(--pack-card-scale));
  --pack-card-menu-open-width: calc(132px * var(--pack-card-scale));
  --pack-card-menu-open-height: calc(42px * var(--pack-card-scale));
  --pack-card-menu-line-width: calc(112px * var(--pack-card-scale));
  --pack-card-menu-item-font: calc(12.5px * var(--pack-card-scale));
  --pack-card-dot-open-x: calc(-95px * var(--pack-card-scale));
  --pack-card-dot-open-mid-x: calc(-50px * var(--pack-card-scale));
  --pack-card-dot-open-top-y: calc(-5px * var(--pack-card-scale));
  --pack-card-dot-open-bottom-y: calc(8px * var(--pack-card-scale));
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source {
  --pack-card-menu-top: 14px;
  --pack-card-menu-right: 14px;
  --pack-card-menu-width: 34px;
  --pack-card-menu-height: 38px;
  --pack-card-menu-open-width: 132px;
  --pack-card-menu-open-height: 42px;
  --pack-card-menu-line-width: 112px;
  --pack-card-menu-item-font: 12.5px;
  --pack-card-dot-open-x: -95px;
  --pack-card-dot-open-mid-x: -50px;
  --pack-card-dot-open-top-y: -5px;
  --pack-card-dot-open-bottom-y: 8px;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu {
  position: absolute !important;
  top: var(--pack-card-menu-top) !important;
  right: var(--pack-card-menu-right) !important;
  z-index: 12 !important;
  width: var(--pack-card-menu-width) !important;
  min-width: var(--pack-card-menu-width) !important;
  height: var(--pack-card-menu-height) !important;
  min-height: var(--pack-card-menu-height) !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    width 180ms cubic-bezier(.2, .8, .2, 1),
    height 180ms cubic-bezier(.2, .8, .2, 1) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu.is-menu-open,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu.is-menu-open {
  width: var(--pack-card-menu-open-width) !important;
  height: var(--pack-card-menu-open-height) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu::before,
#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-trigger::before,
#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-trigger::after,
#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel::before,
#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel::after,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu::before,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger::before,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger::after,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel::before,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel::after {
  content: none !important;
  display: none !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu::after,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu::after {
  content: "" !important;
  position: absolute !important;
  top: calc(var(--pack-card-menu-open-height) / 2) !important;
  right: 0 !important;
  width: var(--pack-card-menu-line-width) !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--text-muted, #667085) 34%, transparent) !important;
  opacity: 0 !important;
  transform: translateX(8px) scaleX(.7) !important;
  transform-origin: right center !important;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1) !important;
  pointer-events: none !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu.is-menu-open::after,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu::after,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu.is-menu-open::after {
  opacity: .38 !important;
  transform: translateX(0) scaleX(1) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-trigger,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: var(--pack-card-menu-width) !important;
  min-width: var(--pack-card-menu-width) !important;
  height: var(--pack-card-menu-height) !important;
  min-height: var(--pack-card-menu-height) !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--pack-card-button-radius, 8px) !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--text, #101828) 84%, var(--text-muted, #667085) 16%) !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-trigger:hover,
#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-trigger:focus-visible,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger:hover,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger:focus-visible {
  border-color: transparent !important;
  background: color-mix(in srgb, var(--theme-ui-tint, var(--theme-accent, #8abff2)) 16%, transparent) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-trigger,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger {
  pointer-events: none !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-trigger svg,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  fill: currentColor !important;
  stroke: none !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-trigger svg circle,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-trigger svg circle {
  fill: currentColor !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
  transition:
    transform 180ms cubic-bezier(.2, .8, .2, 1),
    opacity 160ms ease !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(1),
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(1),
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(1) {
  opacity: .82 !important;
  transform: translate(var(--pack-card-dot-open-x), var(--pack-card-dot-open-top-y)) scale(.72) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(2),
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(2),
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(2) {
  opacity: 0 !important;
  transform: translate(var(--pack-card-dot-open-mid-x), 1px) scale(.35) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(3),
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(3),
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-trigger svg circle:nth-child(3) {
  opacity: .82 !important;
  transform: translate(var(--pack-card-dot-open-x), var(--pack-card-dot-open-bottom-y)) scale(.72) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr !important;
  align-content: center !important;
  justify-items: end !important;
  gap: 5px !important;
  min-width: var(--pack-card-menu-open-width) !important;
  width: var(--pack-card-menu-open-width) !important;
  height: var(--pack-card-menu-open-height) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(8px) !important;
  transform-origin: right center !important;
  transition:
    opacity 160ms ease,
    transform 180ms cubic-bezier(.2, .8, .2, 1) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel[hidden],
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel[hidden] {
  display: none !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-panel,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-card-menu-open .shared-pack-card-menu-panel,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu.is-menu-open .shared-pack-card-menu-panel {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel button,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-height: calc(18px * var(--pack-card-scale, 1)) !important;
  height: calc(18px * var(--pack-card-scale, 1)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--text-muted, #667085) 78%, var(--text, #101828) 22%) !important;
  box-shadow: none !important;
  font-size: var(--pack-card-menu-item-font) !important;
  font-weight: 450 !important;
  line-height: 1.2 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel button:hover,
#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-card-menu-panel button:focus-visible,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel button:hover,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu-panel button:focus-visible {
  color: var(--theme-accent-strong, var(--theme-accent, #2563eb)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#tab-export #sharedPackPreviewCard.shared-pack-card-source .shared-pack-result-details,
#sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-result-details {
  display: grid !important;
  gap: var(--pack-card-gap) !important;
  min-width: 0 !important;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-column-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: left;
  cursor: default;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-column-title-count {
  color: inherit;
}

#sharedPackBrowseCard.shared-library-inline .shared-pack-column-toggle-icon {
  display: none;
}

@media (max-width: 760px) {
  #sharedPackBrowseCard.shared-library-inline .shared-pack-columns {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start !important;
    align-content: start !important;
    overflow: visible !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-column {
    display: grid !important;
    grid-template-rows: auto minmax(0, auto) !important;
    gap: 10px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-column-toggle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 2px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--line, #dbe4f0) 82%, transparent);
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-column-title-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 26px;
    font-weight: 850;
    line-height: 1.05;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-column-title-count {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--line, #dbe4f0) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft, #dbeafe) 42%, var(--surface-elevated, #fff) 58%);
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-column-toggle-icon {
    display: block;
    width: 22px;
    height: 22px;
    color: color-mix(in srgb, var(--text, #0f172a) 78%, var(--muted, #64748b) 22%);
    transition: transform 160ms ease;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-column.is-collapsed .shared-pack-column-toggle-icon {
    transform: rotate(-90deg);
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-column.is-collapsed .shared-pack-column-list {
    display: none !important;
  }

  #sharedPackBrowseCard.shared-library-inline .shared-pack-column-list {
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source {
    display: grid !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    --pack-card-scale: 1;
    --pack-card-pad: 14px;
    --pack-card-gap: 10px;
    --pack-card-radius: 12px;
    --pack-card-author-avatar: 40px;
    --pack-card-author-gap: 8px;
    --pack-card-author-pad-right: 46px;
    --pack-card-author-font: 14px;
    --pack-card-author-name-font: 15px;
    --pack-card-author-text-gap: 8px;
    --pack-card-title-size-fixed: 30px;
    --pack-card-description-font: 15px;
    --pack-card-chip-height: 32px;
    --pack-card-chip-pad-y: 6px;
    --pack-card-chip-pad-x: 10px;
    --pack-card-tag-pad-x: 12px;
    --pack-card-chip-gap: 7px;
    --pack-card-chip-radius: 8px;
    --pack-card-chip-font: 13px;
    --pack-card-chip-icon: 14px;
    --pack-card-footer-gap: 10px;
    --pack-card-footer-pad-top: 12px;
    --pack-card-date-col: 120px;
    --pack-card-actions-col: 220px;
    --pack-card-date-font: 13px;
    --pack-card-date-icon: 17px;
    --pack-card-button-height: 42px;
    --pack-card-button-radius: 10px;
    --pack-card-button-font: 14px;
    --pack-card-button-pad-x: 12px;
    --pack-card-action-min: 0px;
    --pack-card-reaction-min: 58px;
    --pack-card-pin-size: 42px;
    --pack-card-like-icon-size: 18px;
    --pack-card-menu-top: 13px;
    --pack-card-menu-right: 13px;
    --pack-card-menu-width: 36px;
    --pack-card-menu-height: 40px;
    --pack-card-menu-open-width: 132px;
    --pack-card-menu-open-height: 44px;
    --pack-card-menu-line-width: 112px;
    --pack-card-menu-item-font: 12px;
    --pack-card-dot-open-x: -95px;
    --pack-card-dot-open-mid-x: -50px;
    --pack-card-dot-open-top-y: -5px;
    --pack-card-dot-open-bottom-y: 8px;
    gap: var(--pack-card-gap) !important;
    padding: var(--pack-card-pad) !important;
    border-radius: var(--pack-card-radius) !important;
    cursor: pointer;
    scroll-margin-top: calc(var(--app-topbar-height, 64px) + 12px);
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-collapsed {
    min-height: 0 !important;
    padding: 12px 46px 14px 14px !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-expanded {
    align-self: start !important;
    display: grid !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-expanded .shared-pack-result-details {
    display: grid !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-collapsed .shared-pack-result-details {
    display: none !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-result-authorline {
    min-height: var(--pack-card-author-avatar) !important;
    padding-right: var(--pack-card-author-pad-right) !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-author-card {
    min-height: var(--pack-card-author-avatar) !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-author-text {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    font-size: var(--pack-card-author-font) !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-author-text strong {
    font-size: var(--pack-card-author-name-font) !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-result-title {
    max-width: 100% !important;
    font-size: var(--pack-card-title-size-fixed) !important;
    font-weight: 450 !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source.is-collapsed .shared-pack-result-title {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-footer {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "date"
      "social"
      "actions" !important;
    justify-items: stretch !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-date-line,
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-social-row,
  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions {
    justify-content: start !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--pack-card-pin-size) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-actions :is(.btn-primary, .btn-secondary) {
    width: 100% !important;
    min-width: 0 !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-thumbs-btn {
    min-width: var(--pack-card-reaction-min) !important;
  }

  #sharedPackBrowseCard.shared-library-inline #sharedPackResults .shared-pack-public-card.shared-pack-card-source .shared-pack-card-menu {
    top: var(--pack-card-menu-top) !important;
    right: var(--pack-card-menu-right) !important;
  }
}